echarts 如何给柱形图的每个柱子设置不同颜色
总结下这几日用 echarts 库作基本图形遇到的一些问题。
echarts 快速上手可参考官网:
http://echarts.baidu.com/tutorial.html#5+%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B+ECharts
在作柱形图时,如果需要给每个柱子设置不同颜色,参考以下说明:
var option = {
xAxis: {
data: \["苹果","小米","华为","其他"\]
},
yAxis: {
splitLine:{ show:false} //改设置不显示坐标区域内的y轴分割线
},
series: \[{
name: '手机品牌',
type: 'bar',
data: \[19, 15, 40, 32\], //设置柱子的宽度
barWidth : 30, //配置样式
itemStyle: { //通常情况下:
normal:{
//每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组 color: function (params){
var colorList = \['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)'\];
return colorList\[params.dataIndex\]; }
}, //鼠标悬停时:
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)' }
},
}\],
//控制边距
grid: {
left: '0%',
right:'10%',
containLabel: true,
},
};