echartjs實現cross十星輔助線實現示例詳解

Posted on by

前言

項目是金融項目，就像支付寶基金的走勢圖一樣。但圖表庫使用的是 echart 而不是 antv 的 f2，要問為什麼不直接用 f2 ？問就是因為項目歷史包袱。

背景

瞭解過 echart 的都知道，官方提供瞭十星輔助線，隻要設置 axisPointer 的 type 為cross 即可實現類似股票走勢圖的十星線，縱軸吸附最近的點，橫軸跟隨鼠標或手勢的觸點位置，如下圖

功能沒問題，但是若作為基金產品，老板要求要對標支付寶，要達到如下圖的效果

但既然對標阿裡，為什麼不用 antv ？我也問過。但從風險和成本的角度看，反正最終是老板不讓。

既然不能切 antv，上面的 cross 又不能滿足老板的要求，那麼就要老老實實研究 echart 怎麼實現瞭。

方案的過程就不詳細說瞭，反正最後靈光一現，考慮到可以用 type 為 line 的 axisPointer 和 markline 來達到瞭老板的需求。

具體實現

1、開啟 tooltip，並將 tooltip 的 trigger 設置為 axis。

2、xAxis 中設置 axisPointer，這裡設置 snap 為 true，保證縱向輔助線吸附。

3、series 中設置 markline，默認的 markline 會自帶起點和箭頭，為瞭做十星，這裡需要將起點和箭頭通過將 symbol 設置為 none 來取消，默認 markline 的顯示會有動畫，而十星沒有，所以還要將 animation 設置為 false 來禁止 markline 的緩動展示動畫

4、完成以上步驟將會得到一個跟隨手勢的縱線和固定位置的橫線（markline），若要達到完美的十星，這裡需要配置一個能跟隨手勢的橫線，那麼這裡需要通過獲取縱線吸附後的點來重設 markline 的位置，我這裡在 tooltip 的 formatter 中進行處理，因為這裡能拿到我要的點（目前沒找到其他好的辦法，有知道的也可以提供下想法）

5、這樣看起來就基本完成瞭，但是考慮到移動端，手勢離開圖表坐標系時，axisPointer 會自動消失，但是按照我們的實現，markline 不會跟隨消失，這時候我們就需要通過監聽點擊的位置來再次控制 markline 的展示瞭

大致的配置如下

// 5 這裡設置異步是因為 demo 的代碼是部分代碼，執行的時候可能myChart 還沒渲染完成，真實處理的時候若 chart 已經渲染完成的話無需異步處理
setTimeout(()=>{
  var _componentsViews = myChart._componentsViews;
  var  view = _componentsViews.find(item => item.type === 'grid') || {};
  debugger
  var  rect = view.__model.coordinateSystem._rect;
  var  rectObj = {
    x: rect.x,
    x1: rect.x + rect.width,
    y: rect.y,
    y1: rect.y + rect.height
  };
  // 設置監聽
  myChart._zr.on('mouseup', (e) => {
    var { offsetX, offsetY } = e;
    // // 點擊圖表之外時markline消失
    if (offsetX < rectObj.x || offsetX > rectObj.x1 || offsetY < rectObj.y || offsetY > rectObj.y1) {
      chart.setOption({
        series: [{
          markLine: {
            data: [],
            label: {
              show: false
            }
          }
        }]
      });
    }
  });
}, 1000)
...
option = {
    tooltip: {
        // 1
        trigger: "axis",
        // 4
        formatter(arg) {
          // 這裡需要異步處理以下，否則無法設置成功
          setTimeout(function() {
            myChart.setOption({
                series: [{
                  markLine: {
                    data: [{
                      yAxis: arg[0].value[1],
                      label: {
                        show: true
                      }
                    }]
                  }
                }]
            })
          }, 0);
        }
        ...
    },
    xAxis: {
        // 2
        axisPointer: {
          snap: true,
          label: {
            show: true,
            backgroundColor: "#0000ff",
            color: '#fff',
            ...
          },
          lineStyle: {
            color: '#0000ff'
          },
          ...
        },
     },
     yAxis: {
         ...
     },
     series: [
        {
          name: '模擬數據2',
          type: 'line',
          ...
          // 3
          markLine: {
            symbol: 'none',
            silent: true,
            data: [
              {
                yAxis: 0,
                label: {
                  show:false
                }
              }
            ],
            label: {
              show: true,
              position: 'start',
              backgroundColor: '#0000ff',
              color: '#ffffff',
              padding: 2
            },
            lineStyle: {
              color: '#0000ff'
            },
            animation: false
          },
        }
    ]
}

以上，類支付寶的走勢圖十星就完成瞭，年度 kpi 達成 (•̀ᴗ• )？

有需要的可以參考已實現的 demo，也不知道官方會保存多久，且看且珍惜。

以上就是echartjs實現cross十星輔助線實現示例詳解的詳細內容，更多關於echartjs cross十星輔助線的資料請關註WalkonNet其它相關文章！

推薦閱讀：