echarts的pie图中,各区块颜色的调整
今天在学习使用echarts生成各种图表。
然后在使用pie图时出现我无论怎么更改代码中的颜色,pie图中各块的颜色都十分相近,几乎没法区别块与块之间的区别,如下图:
在下图中,除了其中一块的是红色的,其它都是十分相近的白色,然后我无论怎么更改代码中的rgb值,几乎都没有影响到这个图中的主要颜色

然而我的代码时参照echarts官方案例来写的,最后都改得厘米级相似,按理说不应该有问题啊:Customized Pie
最后定位发现出问题的代码所在了,主要就是visualMap这个配置的问题,官方代码如下

在我的定位下,发现min和max值和颜色跨度是有关系的,同时这个值和你传入的数据也是有关系的。这里的80和600就意味着它会把指定的颜色从浅到深划分为540个层次
由于官方数据分布比较均匀,同时数值也全部包含在80到600之间,所以成图的颜色过渡很明显。


而我的数据分布十分不均匀,数值从407到14329。其中只有407是在80-600之间的,其它全部越界了(越界应该是全部当做最大值600来处理),所以这就导致我的Pie图只有2-3这一块是红色,其它都是十分相近的白色。


那么既然问题找到了,那么我就可以把min和max的差值调大一点来显现效果吧
首先把差值改大到10000,效果显著。但是为什么会出现白色呢?因为设置了colorLightness颜色明亮的,把里面的1改为0.5,然后就会发现全变红色了



然而单一的红色并不好看,所以我要增加颜色,首先是把itemStyle里面的颜色注释掉,然后再在visualMap中新增颜色,颜色的rgb乱选了两个233333


最后看效果,是不是颜色分块很明显啊

刚接触echarts,如果说的有什么问题的地方,欢迎提出来~~~
echarts的pie图中,各区块颜色的调整的更多相关文章
- 前端 | 使用 ECharts 绘制关系图
0 需求 做的项目需要画一个关系图,主要需求如下: 需要展示6种对象之间的关系:数据机构 数据 合约 模型 计算机构 应用 支持突出显示6种对象中的某一种的所有对象 支持Top x子图功能.top x ...
- WPF仿百度Echarts人口迁移图
GitHub地址:https://github.com/ptddqr/wpf-echarts-map/tree/master 关于大名鼎鼎的百度Echarts我就不多说了 不了解的朋友直接看官方的例子 ...
- Echarts line折线图使用(vue)
实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/ ...
- 练习UML类图中的类的表示
第一部分:UML类图(class diagram) 类图用来展现一组类.类的特性以及其类相互之间的关系,一个类图由一组类以及它们之间的关系构成,类图用来对系统的领域概念以及静态结构进行建模. 在软件模 ...
- 关于echarts生成雷达图的一些参数介绍
export const industryFactorOption = { title: { text: '雷达图', textStyle: { color: 'rgba(221,221,221,1) ...
- 利用echarts自定义环形图
一.代码 app.title = '通讯盒各版本用户占比'; option = { backgroundColor: '#0f0f31', title: { show:true, x:"le ...
- 由echarts想到的js中的时间类型
在工作中使用echarts时,偶然发现折线图中对时间类型变量的用法: now前面的+号何解? now = new Date(+now + oneDay); 后来查阅资料,看到一篇博客,解释如下:这是对 ...
- FUNMVP:几张图看懂区块链技术到底是什么?(转载)
几张图看懂区块链技术到底是什么? 本文转载自:http://www.cnblogs.com/behindman/p/8873191.html “区块链”的概念可以说是异常火爆,好像互联网金融峰会上没人 ...
- echarts实现环形图
前端框架使用的angular,使用echarts实现环形图 1. item.component.html <div id="box1" class="pie&quo ...
随机推荐
- 生理周期,POJ(1006)
题目链接:http://poj.org/problem?id=1006 解题报告: 1.枚举天数的时候可以根据前面的结果直接跳过一些错误的答案. ///三个周期是23,28,33, #include ...
- 2018.12.14 Mac的Matlab2018a软件及其安装步骤
软件百度云链接:https://pan.baidu.com/s/1q3EO5up-1YuAQ4gEi7sTwQ 密码:p6mf MATLAB R2018a for Mac破解说明 1.MATLAB R ...
- HashMap的工作原理-hashcode和equals原理的再次深入
前言 首先再次强调hashcode (==)和equals的真正含义(我记得以前有人会说,equals是判断对象内容,hashcode是判断是否相等之类): equals:是否同一个对象实例.注意,是 ...
- Android学习笔记_42_各种图形的炫酷效果的实现和使用
一.文档位置: 这里在android中的图形,在帮助文档的这个页面, android-sdk-windows\docs\guide\topics\resources\drawable-resourc ...
- ISIS Scanner Errors codes
This section lists errors sorted by number: Error # Defined Constant String Defined In PIXDFLT 0 PIX ...
- MySQL单列索引和联合索引
MySQL单列索引和联合索引 所有的MySQL列类型能被索引.在相关的列上的使用索引是改进SELECT操作性能的最好方法. 一个表最多可有16个索引.最大索引长度是256个字节,尽管这可以在编译M ...
- 学习WebSocket笔记
由于HTTP协议是无状态的,服务器只会响应来自客户端的请求,但是它与客户端之间不具备持续连接. 当用户在浏览器上进行操作时,可以请求服务器上的api:但是反过来不可以:服务端发生了一件事,无法将这个事 ...
- 【TOJ 1545】Hurdles of 110m(动态规划)
描述 In the year 2008, the 29th Olympic Games will be held in Beijing. This will signify the prosperit ...
- oracle12c管理作业资源的一种方式
数据库:12.1.0.2,rac,cdb模式 笔者负责移动两个12.1.0.2的cdb集群,一个在aix上,一个在linux上,不幸的是,它们都是混合型,数据有100多T. 由于其它部门交付的时候,已 ...
- 前端pc版的简单适配
我们都知道对于前端pc版本的适配是一个难题,大部分都是做的媒体查询.但是有时间公司不要媒体查询 就是需要不管多大的屏幕都是满屏显示.我就在考虑为啥不用rem给pc端做个适配. 我是基于设计图是1920 ...