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

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

echarts快速上手可參考官網:數組

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

在做柱形圖時,若是須要給每一個柱子設置不一樣顏色,參考如下說明:spa

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, }, };
相關文章
相關標籤/搜索