echarts盒须图颜色填充

在使用echarts中的boxplot时，我们常常有将特定盒子换成不同颜色标记出来的需求，series中的color会默认从option.color中按顺序获取，默认颜色：['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
在最新版本的echarts中color控件不支持回调函数，我们无法通过回调函数自定义我们想要给盒子设置的颜色：

color_my =['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
color:function(params){return color_my[params.value];
}

这种方法我们无法使用，echarts给了我们新的方法：
支持colorBy：
‘series’：按照系列分配调色盘中的颜色，同一系列中的所有数据都是用相同的颜色；
‘data’：按照数据项分配调色盘中的颜色，每个数据项都使用不同的颜色。
当我们使用

colorBy:'data'
color:color1

color1的颜色数我们设定与盒子数相同，在特定盒子处我们给特定的颜色，这样我们就会将给特定盒子特定颜色，比如：

我们给定的红色和黄色的盒子是我们想要重点突出观察的盒子。series里面的color只会改变线的颜色。
但如果我们想要给盒子内部填充颜色，我们需要使用itemStyle，我们要注意itemStyle对应每一个series，也就是说，itemStyle里面的color既不支持回调函数，也不支持colorBy，我们只能：

itemStyle:{color:'red'  //或者'#91cc75'，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'
}

这样会将所有的盒子填充为红色：

如果我们想要给特定盒子填充颜色，我们需要给每条数据设置itemStyle，并将数据改为对象类型：

var data =  [{value:[850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],itemStyle:{color:'red'}},{value:[960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],itemStyle:{color:'blue'}},{value:[880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],itemStyle:{color:'green'}},{value:[890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],itemStyle:{color:'black'}},{value:[890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870],itemStyle:{color:'yellow'}}]

同时，我们无法使用transform，我们在series中添加：

series:{data:data  //上面定义的类型数组
}

（此时颜色会对应上，但图表显示会有问题，待找到正确方法）

echarts盒须图颜色填充相关推荐

echarts 盒须图配置
下载依赖包地址 cv工程师: <!DOCTYPE html> <html><head><meta charset="utf-8">& ...
Echarts -盒须图的使用说明
画盒须图需要dataTool.js !function(e,t){"object"==typeof exports&&"object"==typ ...
盒须图 python_什么是盒须图？
盒须图 python What the heck is a box and whisker chart, and why would you need one? Well, I'm not a sta ...
漏刻有时数据可视化Echarts组件开发(27)：盒须图(箱线图)前后端php交互的实战案例
Boxplot 中文可以称为『箱形图』.『盒须图』.『盒式图』.『盒状图』.『箱线图』,是一种用作显示一组数据分散情况资料的统计图.它能显示出一组数据的最大值.最小值.中位数.下四分位数及上四分位数. ...
更改echarts中盒须图横坐标
echarts的盒须图研究了一下,不知道有啥方便的方法,使用了一个笨办法解决更改x坐标,使用switch echarts中原始盒须图: var text = ['1年以上', '2年以上', '3年以 ...
Tableau:如何添加参考线、趋势线、参考区间、分布区间、盒须图?
序言 Tableau中的"分析"栏提供了很多功能(如下图),这些功能可以向Tableau的工作表添加各种辅助线和辅助区间.通过对其进行归类,可以将这些辅助线.辅助区间分为:参考 ...
matplotlib之pyplot模块——绘制箱线图（盒须图）boxplot()（二）演示外观参数、返回值
当前有效matplotlib版本为:3.4.1. 概述 boxplot()函数的作用是绘制箱线图(箱线图.盒须图.箱图). 箱线图是由一个箱体和一对箱须所组成的统计图形.箱体是由第一四分位数.中位数( ...
D3 二维图表的绘制系列（二十六）盒须图
上一篇: 中国地图下一篇: 日历热力图代码结构和初始化画布的Chart对象介绍,请先看这里本图完整的源码地址:这里 1 图表效果 2 数据 {"data": [{" ...
数据分散情况的统计图-盒须图
数据可视化分析时还常常需要观察数据的分布状态,或者查看某一个个体在整体的表现如何,这都需要用到统计分布图,盒须图就是其中的一种. 盒须图它可以用来反映一组或者多组数据的分布情况,因形状像长着胡须的盒子 ...

echarts盒须图颜色填充

echarts盒须图颜色填充相关推荐

最新文章

热门文章