ECharts图表实战经验1:如何设置图表同序列不同数据点的独立颜色值
在option中增加属性color,并指定几种颜色,此颜色将根据饼图的区域个数循环,代码段如下:
option = {
title : {
text: '全局指标状态分布图',
x:'left',
y:'top'
},
tooltip : {
show: true,
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
color:['red', 'green','yellow','blueviolet']
}
http://echarts.baidu.com/echarts2/doc/example/bar14.html
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]
},
label: {
show: true,
position: 'top',
formatter: '{b}\n{c}'
}
}
}
http://echarts.baidu.com/echarts2/doc/example/bar15.html
var colorList = [
'#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
'#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0'
];
var itemStyle = {
normal: {
color: function(params) {
if (params.dataIndex < 0) {
// for legend
return zrColor.lift(
colorList[colorList.length - 1], params.seriesIndex * 0.1
);
}
else {
// for bar
return zrColor.lift(
colorList[params.dataIndex], params.seriesIndex * 0.1
);
}
}
}
};
版权声明:本文为李维亮博主的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://www.liweiliang.com/701.html
- 上一篇: gulp使用教程
- 下一篇: js 批量定义和批量赋值差异
评论已关闭