1. 程式人生 > 實用技巧 >echarts柱狀圖每根柱子設定顏色

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