今天在学习使用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图中，各区块颜色的调整的更多相关文章

  1. 前端 | 使用 ECharts 绘制关系图

    0 需求 做的项目需要画一个关系图,主要需求如下: 需要展示6种对象之间的关系:数据机构 数据 合约 模型 计算机构 应用 支持突出显示6种对象中的某一种的所有对象 支持Top x子图功能.top x ...

  2. WPF仿百度Echarts人口迁移图

    GitHub地址:https://github.com/ptddqr/wpf-echarts-map/tree/master 关于大名鼎鼎的百度Echarts我就不多说了 不了解的朋友直接看官方的例子 ...

  3. Echarts line折线图使用(vue)

    实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/ ...

  4. 练习UML类图中的类的表示

    第一部分:UML类图(class diagram) 类图用来展现一组类.类的特性以及其类相互之间的关系,一个类图由一组类以及它们之间的关系构成,类图用来对系统的领域概念以及静态结构进行建模. 在软件模 ...

  5. 关于echarts生成雷达图的一些参数介绍

    export const industryFactorOption = { title: { text: '雷达图', textStyle: { color: 'rgba(221,221,221,1) ...

  6. 利用echarts自定义环形图

    一.代码 app.title = '通讯盒各版本用户占比'; option = { backgroundColor: '#0f0f31', title: { show:true, x:"le ...

  7. 由echarts想到的js中的时间类型

    在工作中使用echarts时,偶然发现折线图中对时间类型变量的用法: now前面的+号何解? now = new Date(+now + oneDay); 后来查阅资料,看到一篇博客,解释如下:这是对 ...

  8. FUNMVP:几张图看懂区块链技术到底是什么？(转载)

    几张图看懂区块链技术到底是什么? 本文转载自:http://www.cnblogs.com/behindman/p/8873191.html “区块链”的概念可以说是异常火爆,好像互联网金融峰会上没人 ...

  9. echarts实现环形图

    前端框架使用的angular,使用echarts实现环形图 1. item.component.html <div id="box1" class="pie&quo ...

随机推荐

  1. 如何使用代码获得一个function module的Where Used List

    如果要获得一个function module的Where Used List,我们通常用的办法是使用ABAP workbench里提供的功能. where used list显示结果如下: 但我接到一 ...

  2. 【安卓】imageView.scaleType取centerCrop后,再用padding时显示异常?

    imgView.setCropToPadding(true);就可以         

  3. Visual Studio 发布 Windows Service小记

    第一步:新建一个Window服务 第二步:添加安装程序 第三步,配置属性信息(Account选择LocalService) 第四步,在 OnStart和OnStop方法中写上你要干的事情吧.我这里用Q ...

  4. .NET MVC伪静态

    说明:MVC中的伪静态跟我们的WebForm里面的伪静态不一样(详情:配置伪静态(URL重写)) 由于我们的MVC中存在路由,所以我们不必去处理每个访问的页面进行重写,我们完全可以再配置一个路由让他显 ...

  5. 几个常用的 Git 高级命令

    Git 是一款开源优秀的版本管理工具,它最初由 Linus Torvalds 等人开发,用于管理 Linux Kernel 的版本研发.相关的书籍和教程网上琳琅满目,它们多数都详细的介绍其基本的使用和 ...

  6. element组件dialog关闭时Message消息提示抖动问题

    在页面内容较多,出现滚动条时使用element组件里的dialog组件,当关闭dialog组件的同时弹出Message消息提示时,Message会抖动一下. 在页面有滚动条的情况先打开dialog时, ...

  7. flask笔记(一)

    1.第一个flask项目 # 首先你要安装flask这个模块 pip install flask # 安装好了之后,直接新建一个py文件,开始写最简单的flask项目了 from flask impo ...

  8. windows平台下获取网卡MAC地址、硬盘序列号、主板序列号、CPU ID、BIOS序列号

    转自http://blog.csdn.net/jhqin/article/details/5548656,如有侵权,请联系本人删除,谢谢!! 头文件:WMI_DeviceQuery.h /* ---- ...

  9. Linux入门-第四周

    1.查找/var目录下不属于root.lp.gdm的所有文件 find命令:实时查找工具,通过指定路径完成文件查找,其特点查找速度略慢,可以精确查找,实时查找,可以只搜索用户具备读取和执行权限的目录 ...

  10. 分别使用原生js和jQuery添加/删除元素的class属性

    一.原生js添加/删除元素的class属性: <!-- span元素原有class = "test" --> <span class="test&quo ...