echart在X軸下方添加字

 使用Echart做統計圖表,這個方便快捷還高大上

官方網址 https://www.echartsjs.com/

按照文檔,很快就做出了一個柱圖表

在X軸下方,要顯示出對應日期是星期幾(上圖最下方,用紅框的部分),這個問題查了很長時間的API,終於找到了一個疑似能解決這個問題的配置項.

這個配置項markLine, 位置在: https://www.echartsjs.com/option.html#series-bar.markLine 

不清楚這個配置項是為了實現哪些功能而制造的,但是解決了目前這個要求

具體配置如下:

markLine: 
{
    data: 
    [
      [  
          // 0柱子位置繪畫 起點
          {
            name: `周一`, xAxis: 0, y: canvaHeight,
            lineStyle: { opacity: 0, color: '#69707F' }
          },
          // 終點
          { xAxis: 0, y: canvaHeight }
      ],
      [  
          // 1柱子位置繪畫 起點
          {
            name: `周二`, xAxis: 1, y: canvaHeight,
            lineStyle: { opacity: 0, color: '#69707F' }
          },
          // 終點
          { xAxis: 1, y: canvaHeight }
      ],
    ],
    // 不要動畫
    animation: false
}

配置項的簡要說明:

markLine最重要的data屬性,指定了繪畫的內容和畫的坐標位置,

data是一個數組,

每一數組項里面的內容是兩個對象,其中0位表示起點數據,1位表示終點數據,這兩個對象說明了繪畫的起點和終點

// data中的一項
[
    {
      name: `周一`,// 要顯示的文字或內容
      xAxis: 0,// X坐標,0表示第1個柱子位置
      y: canvaHeight,// y坐標,y表示相對於圖表容器的Y坐標,TOP值,這里根據實際調整一下,讓它正好處於X軸下方
      lineStyle: { opacity: 0, color:'#69707F'}// 畫線的樣式,opacity表示,不需要畫標線,只要文字就行
    },
    {
      // 結束點的坐標
      xAxis: 0,// 還是0,這里表示就是畫在X軸的正下方
      y: canvaHeight
    }
]

 

另外,有個要注意的地方是,繪畫出的內容會跳動,這其實是它的動畫效果,由於設定的起止點為同一個點,所以它會原地閃動.將動畫取消就不閃動了

{

　　 animation: false

}

 

也許這個問題有更簡單的解決辦法 ,但是找了很久的配置項,

卻沒有找到一個能直接在對應X軸下方,再顯示一排內容的配置項,此種方法解決了.

 

---

 

以下是其它需求解決方案

* echartDOM容器和CANVAS之間有距離,這個距離使用這個grid屬性可以指定,

 

 var option = {
      grid: {
        left: '15px',// 這個離左邊距離
        right:'15px'// 這個離右邊距離
      }
.........

 

 * 讓指定的柱子居中屏幕

 為什么要實現這個功能呢,還是上面那個柱子圖,如果需要將當天日期,例如12號這一天的柱子,顯示在屏幕中央,有什么辦法?

上面的例子是其實是做了一個橫着滾動的DIV,里面才是echart的DIV.

<div class="echart-wapper" style="overflow-x:auto;overflow-y:hidden">

      <div class="echart-box"></div>

</div>

 

 12號,這個柱子顯示在中央了..

原理是設置外層DIV的scrollLeft這個值 ,讓它滾動到正好 12號柱子的位置.

那么計算出12號柱子的位置就是關鍵了,柱子圖的寬度可以預先設定好,

{

      barWidth:1800px;

}

 

這個值由柱子數和每柱子寬度得出,例如要顯示30個柱子,每個柱子分配60px,那么就是1800px;

柱子圖canvas與DIV之間的距離,可以設置為左 右,各 30px,就是每個柱子的一半長度 60px/2

這樣設定后,就能計算出第12根柱子離DIV左邊的距離了,就是 12*60px.這是個公式,可以得出N柱子離DIV左邊的距離.

 

最后計算出滾動條的scrollLeft的值:這個有點復雜 

div在不滾動時,能夠顯示出最多X根柱子, X = 屏幕寬度 / 60px 

如果讓第N個柱子顯示在中央,那么 X/2根柱子,是不需要滾動的, 2 就是屏幕的1/2

由於N柱離左邊的距離是N*60px,所以DIV的scrollLeft的值就是

 

(N - window.innerWidth / 2 / 60px) * 60px

也就是第N柱子,離左邊的距離,減去不需要滾動的柱子數/2.

如果不希望柱子圖貼屏幕的邊,而是希望有一定的距離;  例如在滾動DIV上設置了  padding:0 15px;

那么上面的公式要再減去這個15px.

 

FUCK! 這個卑鄙的功能想了很久才整理好思路,沒想到算法這么簡單.

 

* 如果調整了canvasDOM 的寬度,那么如何重繪圖表?

這個問題使用api就可以解決,地址在這里  https://echarts.baidu.com/api.html#echartsInstance.resize

官網原話

有時候圖表會放在多個標簽頁里，那些初始隱藏的標簽在初始化圖表的時候因為獲取不到容器的實際高寬，可能會繪制失敗，因此在切換到該標簽頁時需要手動調用 resize 方法獲取正確的高寬並且刷新畫布，或者在 opts 中顯示指定圖表高寬。

chart.resize({width:'這里設置新圖表的寬度就可以了'})

 

---

 

echart高大上,功能齊全,這也造成了,配置項很多,太復雜了.文檔界面看起來也不甚清楚,如果有配置項和相應圖表效果對照就好很多了...^_^