ECharts柱状图颜色设置

版权声明:JiahaoZhang原创文章,转载请注明出处 https://blog.csdn.net/GrootBaby/article/details/81944633
option = {
    xAxis : [
        {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            barWidth: '60%',
            data:[200, 390, 334,],
            itemStyle:{
                //通常情况下:
                normal:{  
                    //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组中的颜色
                    color: function (params){
                        var colorList = [
                              '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                        return colorList[params.dataIndex];
                    },
                    // color: '#a453f7',  //设置所有柱状图颜色
                },
                //鼠标悬停时:
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

猜你喜欢

转载自blog.csdn.net/GrootBaby/article/details/81944633