1. 程式人生 > >ECharts柱狀圖顏色設定

ECharts柱狀圖顏色設定

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)'
                }
            }
        }
    ]
};