博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ECharts图表实战经验1:如何设置图表同序列不同数据点的独立颜色值
阅读量:6615 次
发布时间:2019-06-24

本文共 4672 字,大约阅读时间需要 15 分钟。

最近有不少朋友在追问这样一个问题:我单序列的柱状图,我想让每一个根柱子的颜色都不一样,应该如何做?

针对这个问题,其实我只想说你压根没有认真看完或者查找ECharts官方的示例,官方能够找到的示例有:

1、

2、

那么你看完过后是否能够明白其中的道理呢?数据点的属性首先是通过itemStyle节点进行控制的,我们要控制数据点的颜色,自然我们就需要设置color,另外根据ECharts的API介绍,color是支持Function函数的。

我们首先来看看这样一个例子:

示例一:根据数据点所在序号从一个颜色数组内拿拿取对应颜色值

我们首先设置一个颜色数组,最好比序列内的数据点个数要大或者相等,结合itemStylecolor的函数根据当前数据点在当前序列内所处的顺序序号去颜色数组内自动匹配颜色。

代码如下所示:

option = {    title : {        text: '某地区蒸发量和降水量',        subtext: '纯属虚构'    },    tooltip : {        trigger: 'axis'    },    legend: {        data:['蒸发量']    },    toolbox: {        show : true,        feature : {            mark : {show: true},            dataView : {show: true, readOnly: false},            magicType : {show: true, type: ['line', 'bar']},            restore : {show: true},            saveAsImage : {show: true}        }    },    calculable : true,    xAxis : [        {            type : 'category',            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']        }    ],    yAxis : [        {            type : 'value'        }    ],    series : [        {            name:'蒸发量',            type:'bar',            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],           itemStyle: {                normal: {                    color: function(params) {                        // build a color map as your need.                        var colorList = [                          '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',                           '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'                        ];                        return colorList[params.dataIndex]                    }                }            }        }    ]};

 

效果是不是很炫?!

 

示例二:通过配置数据点的颜色扩展属性来达到控制不同数据点的颜色

我们最想实现的应该是我们自己能够设置每一个数据点的颜色值,而非通过设置颜色数组的形式,那么我们应该如何做呢?

1、我们需要改写series的data格式,之前是一个一维数据类型的数组,先走我们需要将至变成一个对象类型的一维数组,如下所示;

 
data:[{              value:2.0,              color:"red"            }, 4.9, 7.0, {              value:23.2,              color:"green"            }, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
 

某些数据点我设置了其color属性,也就是我要用所配置的颜色来渲染柱子。

2、为了没有配置颜色属性的数据点的颜色显示有所归属(因为我们通过params找不到当前序列的颜色,所以我们最好自己给其series设置一个颜色属性。如下所示:

{            name:'蒸发量',            type:'bar',            color:"#ff7f50",            data:[{              value:2.0,              color:"red"            }, 4.9, 7.0, {              value:23.2,              color:"green"            }, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],            itemStyle: {                normal: {                  color: function(params) {                                        if(params.series.data[params.dataIndex] != null && params.series.data[params.dataIndex].color != undefined)                    {                       return params.series.data[params.dataIndex].color;                    }else                    {                      return params.series.color;                    }                  }                }            }        }

最后我们就可以通过改写itemStyle内color的function函数规则来返回数据点对象所配置的颜色以及序列所配置的颜色。

当数据点对象尚未配置颜色color属性时,我们就返回当前序列所配置的color即可。

示例代码的option配置如下所示:

option = {    title : {        text: '某地区蒸发量和降水量',        subtext: '纯属虚构'    },    tooltip : {        trigger: 'axis'    },    legend: {        data:['蒸发量']    },    toolbox: {        show : true,        feature : {            mark : {show: true},            dataView : {show: true, readOnly: false},            magicType : {show: true, type: ['line', 'bar']},            restore : {show: true},            saveAsImage : {show: true}        }    },    calculable : true,    xAxis : [        {            type : 'category',            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']        }    ],    yAxis : [        {            type : 'value'        }    ],    series : [        {            name:'蒸发量',            type:'bar',            color:"#ff7f50",            data:[{              value:2.0,              color:"red"            }, 4.9, 7.0, {              value:23.2,              color:"green"            }, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],            itemStyle: {                normal: {                  color: function(params) {                                        if(params.series.data[params.dataIndex] != null && params.series.data[params.dataIndex].color != undefined)                    {                       return params.series.data[params.dataIndex].color;                    }else                    {                      return params.series.color;                    }                  }                }            }        }    ]};

转载地址:http://bqhso.baihongyu.com/

你可能感兴趣的文章
DevExpress v17.2新版亮点——CodeRush篇(一)
查看>>
Oracle之备份还原
查看>>
Linux 操作命令 cat
查看>>
王硕的微博
查看>>
jQuery EasyUI 重写datagrid的datetimebox编辑类型
查看>>
python基础之函数
查看>>
mysql大数据量使用limit分页,随着页码的增大,查询效率越低下
查看>>
用户组权限和ACL访问控制列表
查看>>
G盘设备未就绪数据怎么找到
查看>>
Linux-软链接、硬链接
查看>>
有趣的角度:《权力的游戏》少儿不宜数据盘点
查看>>
【api】Java在线api地址
查看>>
使用 haproxy 搭建 web 群集
查看>>
过滤空行的几种方法
查看>>
Java:银行利率
查看>>
php单文件上传和多文件上传
查看>>
直击东京产交会,弘瑞(HORI)在国际舞台展示3D打印魅力
查看>>
自定义容器
查看>>
什么是堆排序,浅而易懂的对话告诉你!
查看>>
Android即时通讯服务,类似QQ的聊天工具,源码分享
查看>>