之前一直都是跟著修改demo,感覺用得很吃力,現在結合上配置手冊就好很多了,其實說到底就是引數的配置,所以配置手冊尤為重要。
當然,這其中還是很多坑,希望可以找到對應的解決方案吧!!!
1. tooltip.formatter:設定滑鼠進入柱狀圖形時的顯示文字。
可以傳入一個函式,同時傳入引數params,此引數的name表示資料名,一整條柱狀圖形對應的座標軸類別名,value表示資料值。
也可以傳入字串,更方便,{a}表示系列名即series中的name,{b}表示資料名同函式中引數的name,{c}表示資料值
2. grid:設定整個座標軸的屬性。
show:設定是否顯示座標軸最外層邊框。這個grid的效果時有時無,暫時未找到原因。show:`true`,borderWidth:`0`——百度出來的這個配置有用~
width表示整個座標軸的寬度,grid.x表示座標軸距離父容器左側的距離
3. xAxis/yAxis
splitLine.show:設定與座標軸的平行網格線是否顯示
nameTextStyle.color:設定座標軸名稱的字型顏色
axisLabel.textStyle:設定座標軸刻度的文字樣式
axisLabel.textStyle.color:設定座標軸刻度的字型顏色,xAxis/yAxis.axisLabel.textStyle.fontSize:設定座標軸刻度的字型大小
axisLabel.formatter:設定座標軸刻度文字顯示格式,可以傳入一個函式,同時傳入引數params,此引數即是顯示字串
axisLabel.interval:設定座標軸刻度顯示數量形式,預設auto,即避免重疊顯示。設定為0即強制顯示全部刻度,不管是否重疊
注意:axisTick.interval在官方文件中也說可以設定,但是放在xAxis/yAxis中卻無效!!!
axisLine.symbol:設定為[`none`,`arrow`]可以顯示座標系箭頭
6. series:設定柱狀圖的資料與樣式
stack:設定多個柱狀圖形並排,stack相同的兩個柱狀圖形將顯示在一條直線上,屬於同一個系列
itemStyle.normal.barBorderRadius:設定柱狀圖形的四個邊角是否為弧形
itemStyle.normal.color:設定柱狀圖形的顏色
可以通過賦值為new echarts.graphic.LinearGradient()設定漸變顏色。親測有效。前面提到的all.js這個裡面是沒有這個方法的,只有min.js的才有
先說說前四個引數,簡稱左上右下,值一般是0或者1。左表示,從右到左漸變,上表示從下到上漸變,…以此類推。
第五個引數就是設定顏色的。這是一個列表,列表中每個元素表示一種漸變色。元素的引數:
offset表示顏色顯示位置,color表示顯示顏色
barWidth:設定柱狀圖形的寬度