1. 程式人生 > >echarts 柱狀圖、餅圖指定顏色

echarts 柱狀圖、餅圖指定顏色

1、在option變數裡面設定調色盤顏色列表,不設定的話預設是如下顏色

全域性調色盤 option.color 獲取顏色

['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
option = {
   color: ['red', 'green', 'yellow', 'blueviolet']
}

2、柱狀圖設定每個柱子的顏色

series: [{
    name: '',
    type: 'bar',
    //配置樣式
    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)'
        }
    },
}]