echarts柱狀圖每根柱子設定顏色
阿新 • • 發佈:2020-11-19
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, }, };