今天在学习使用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. ZJOI2019Day2余姚中学游记(4.23~4.26)

    前言 \(Day2\),又是一场噩梦. 前段时间去做了挺多十二省联考和\(HNOI2019\)的题目,还订正掉了\(Day1\)的\(T1\)和\(T2\)(\(T3\)动态\(DP\)完全不想订正啊 ...

  2. python序列化_json,pickle,shelve模块

    序列化 序列化是指把内存里的数据类型转变成字符串,以使其能存储到硬盘或通过网络传输到远程,因为硬盘或网络传输时只能接受bytes 把内存数据 转成字符,叫序列化 把字符 转成内存数据,叫反序列化 模块 ...

  3. Extjs treePanel 加载等待框

    beforeload : { fn : function (store, operation, eOpts){ loadMask = new Ext.LoadMask(Ext.get(this.get ...

  4. 字段中有空的时候 进行逻辑运算,mysql 与 oracle 处理函数IFNULL() 与 nvl() ,选取NULL 值 。

    mySQL数据库: SELECT id_p,IFNULL(math,0)+IFNULL(english,0) 总分 from mytest_brian1 Oracle 数据库: select  id_ ...

  5. javascript 六种基本数据类型转换

    javascript 六种基本数据类型转换 1.显式转换 通过手动进行类型转换,Javascript提供了以下转型函数: 转换为数值类型:Number(mix).parseInt(string,rad ...

  6. xcode7--iOS开发---将app打包发布至app store

    时隔3个月再次接触应用打包,又是一顿折腾 说说这次的感受吧: 变得是打包时间减少到4小时(其中大部分时间还是xcode7或者是iOS9的原因),不变的是还是一如既往的坑!! 好了,废话不多说,下面讲讲 ...

  7. xcode 快捷键大全、XCode常用快捷键图文介绍

    其实就是设置里面的快捷键变成了文字版,刚开始用Xcode是不是发现以前熟悉的开发环境的快捷键都不能用了?怎么快捷运行,停止,编辑等等.都不一样了.快速的掌握这些快捷键,能提供开发的效率. 其实快捷键在 ...

  8. Webpack4 学习笔记八 开发环境和生产环境配置

    webpack resolve属性 webpack 区分开发环境和生产环境 webpack resolve属性 该选项的作用是设置模块如何被解析. resolve.alias: 设置别名, 在vue中 ...

  9. 5820. 【NOIP提高A组模拟2018.8.16】 非法输入(模拟,字符串)

    5820. [NOIP提高A组模拟2018.8.16] 非法输入 (File IO): input:aplusb.in output:aplusb.out Time Limits: 1000 ms   ...

  10. jzoj100029. 【NOIP2017提高A组模拟7.8】陪审团(贪心,排序)

    Description 陪审团制度历来是司法研究中的一个热议话题,由于陪审团的成员组成会对案件最终的结果产生巨大的影响,诉讼双方往往围绕陪审团由哪些人组成这一议题激烈争夺. 小 W 提出了一个甲乙双方 ...