使用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軸下方,再顯示一排內容的配置項,此種方法解決了.

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

echart在X軸下方添加字