最近在使用echart開發(fā)圖標(biāo)，api里面雖然有些設(shè)置，但是如果想讓柱狀圖每個柱的顏色都不相同，簡單的通過color設(shè)置是沒有作用的，這里，就要用到其他的方式了

下面只是列舉下我認(rèn)為比較常用的，其他的比較簡單，就不說了

xAxis : [{type : 'category', // name:'額度',
　　　　　　　　//這是設(shè)置的false，就不不顯示下方的x軸，默認(rèn)是true的show: false,
　　　　　　　　//這里呢，就是每個柱的name了，根據(jù)實際情況下就好了，我就先寫這三個data : ['最多','平均','最少'],axisLabel: {
　　　　　　　　　　　　　//這個是傾斜角度，也是考慮到文字過多的時候，方式覆蓋采用傾斜 // rotate: 30,
　　　　　　　　　　　　//這里是考慮到x軸文件過多的時候設(shè)置的，如果文字太多，默認(rèn)是間隔顯示，設(shè)置為0，標(biāo)示全部顯示，當(dāng)然，如果x軸都不顯示，那也就沒有意義了interval :0}}],yAxis : [{type : 'value',name:'數(shù)量',
　　　　　　　　　　//下面的就很簡單了，最小是多少，最大是多少，默認(rèn)一次增加多少min: 0,max: 30,interval: 6,
　　　　　　　　　　//下面是顯示格式化，一般來說還是用的上的axisLabel: {formatter: '{value} 包'}}],series : [{name: '數(shù)量',type: 'bar',itemStyle: {normal: {
　　　　　　　　　　　　　　//好，這里就是重頭戲了，定義一個list，然后根據(jù)所以取得不同的值，這樣就實現(xiàn)了，color: function(params) {// build a color map as your need.var colorList = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B','#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD','#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'];return colorList[params.dataIndex]},
　　　　　　　　　　　　　　//以下為是否顯示，顯示位置和顯示格式的設(shè)置了label: {show: true,position: 'top', // formatter: '{c}'formatter: '\n{c}'}}},
　　　　　　　　　　//設(shè)置柱的寬度，要是數(shù)據(jù)太少，柱子太寬不美觀~
　　　　　　　　　　barWidth:70,data: [28,15,9,4,7,8,23,11,17]}]

效果就是這樣啦

轉(zhuǎn)載于:https://www.cnblogs.com/kang543418095/p/5964397.html

總結(jié)

以上是生活随笔為你收集整理的echarts 柱状图 ，颜色和显示设置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。