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,
        },
    };