Vue中使用Echarts之自定義柱狀圖的樣式

以使用頻率較高的顏色開始走起~！

一.自定義顏色

如果系列沒有設置顏色，則會依次循環從該列表中取顏色作爲系列顏色。
官方文檔給出的默認顏色列表爲:

[’#c23531’,’#2f4554’, ‘#61a0a8’, ‘#d48265’, ‘#91c7ae’,’#749f83’, ‘#ca8622’, ‘#bda29a’,’#6e7074’, ‘#546570’, ‘#c4ccd3’]

但實際上默認取的是上述列表中的第一項’#c23531’，所以問題來了，說好的顏色循環呢？？？
這是因爲，顏色循環針對的是不同的度量(圖例代表的統計量)，有幾種度量，就會循環幾種顏色，以下圖爲例，只有一個度量-銷量，所以默認只取了一種顏色。

對於顏色的設置，可以設置全局的顏色，也可以設置各個系列自己專屬的顏色。

直接在Option中設置color的值，即表現爲全局的顏色；
在Option的series配置項中設置color的值，即爲對應系列專屬的顏色；

1.設置全局顏色

以上圖示例爲起點，現在只需再增加幾個度量，設置全局顏色時就可以指定需要循環顯示的顏色啦~

第一步，增加圖例

legend: {
                data:['銷量','支出','收入']
            },

第二步, 增加度量數據

 series: [{
                name: '銷量',
                type: 'bar',
                data: [30, 20, 36, 40, 50, 60],
        
            },
            {
                name: '支出',
                type: 'bar',
                data: [200, 310, 120, 320, 200, 100],
               
            },
            {
                name: '收入',
                type: 'bar',
                data: [100, 200, 600, 300, 400, 800],
               
            }
            ]

此處要注意: series中每個數據項都要寫name(每個數據項對應的圖例名稱),否則會影響圖例的展示

第三步,設置全局顏色

color: ['#66FF99','#FFFF00','#FF00FF']

效果如圖;-)

2.設置各個系列的顏色

各個系列對應的樣式分爲普通樣式和高亮樣式(鼠標懸浮到圖形元素上時圖形顏色)

兩種樣式都在option配置項裏的series中設置。

配置項寫法因Echarts的版本而有所差異；

Echarts4.0+以上的版本的寫法爲:

series: {
        // 普通樣式
        itemStyle: 
            color: 'red'
        },
        // 高亮樣式
        emphasis: {
            itemStyle: {
                color: 'blue'
            }
        }
    }

在Echarts4以前，普通樣式的寫法：

series: {
        // 普通樣式
        itemStyle: 
             normal: {
                color: 'red'
            },
        }
    }

對於版本差異，官方給出的建議是:“這種寫法仍然被兼容，但是不再推薦”

通過對系列的普通樣式的顏色設置，就算只有一種度量數據，也照樣可以愉快的對每個柱子設置不同的顏色。比如實現如下效果：

關鍵步驟: itemStyle裏自定義一個顏色列表，然後根據數組下標循環顏色就好了~(在這裏遵循Echarts4.0+的語法寫)

series: {
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
                itemStyle: {
                  color: function(params) {
                    let colorList = ['#00FFFF','#C0C0C0','#FFFF00','#66FF99','#000000','#FF0000']
                    return colorList[params.dataIndex]
                  }
                }
            },

對於高亮樣式也是一樣的道理啦~如果不特意指定高亮時的顏色，各系列的顏色會默認與普通樣式一致。

高亮樣式的寫法:

 series: {
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
                itemStyle: {
                  color: function(params) {
                    let colorList = ['#00FFFF','#C0C0C0','#FFFF00','#66FF99','#000000','#FF0000']
                    return colorList[params.dataIndex]
                  }
                },
                emphasis: {
                   itemStyle: {
                  
              
                }
              }
             },

源碼傳送門

未完待續;-)(｀･ω･´)