.net圖表之ECharts隨筆08-bar柱狀圖

DoKey713發表於2018-12-10

之前一直都是跟著修改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:設定柱狀圖形的寬度

相關文章