echarts如何給柱形圖的每個柱子設置不同顏色


總結下這幾日用echarts庫作基本圖形遇到的一些問題。

echarts快速上手可參考官網:

http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

在作柱形圖時,如果需要給每個柱子設置不同顏色,參考以下說明:

復制代碼
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, }, };


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM