欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

echartjs實現(xiàn)cross十星輔助線實現(xiàn)示例詳解

 更新時間:2022年12月11日 11:01:24   作者:九酒  
這篇文章主要為大家介紹了echartjs實現(xiàn)cross十星輔助線實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

前言

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

背景

了解過 echart 的都知道,官方提供了十星輔助線,只要設(shè)置 axisPointer 的 type 為cross 即可實現(xiàn)類似股票走勢圖的十星線,縱軸吸附最近的點,橫軸跟隨鼠標(biāo)或手勢的觸點位置,如下圖

功能沒問題,但是若作為基金產(chǎn)品,老板要求要對標(biāo)支付寶,要達到如下圖的效果

但既然對標(biāo)阿里,為什么不用 antv ?我也問過。但從風(fēng)險和成本的角度看,反正最終是老板不讓。

既然不能切 antv,上面的 cross 又不能滿足老板的要求,那么就要老老實實研究 echart 怎么實現(xiàn)了。

方案的過程就不詳細說了,反正最后靈光一現(xiàn),考慮到可以用 type 為 line 的 axisPointer 和 markline 來達到了老板的需求。

具體實現(xiàn)

1、開啟 tooltip,并將 tooltip 的 trigger 設(shè)置為 axis。

2、xAxis 中設(shè)置 axisPointer,這里設(shè)置 snap 為 true,保證縱向輔助線吸附。

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

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

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

大致的配置如下

// 5 這里設(shè)置異步是因為 demo 的代碼是部分代碼,執(zhí)行的時候可能myChart 還沒渲染完成,真實處理的時候若 chart 已經(jīng)渲染完成的話無需異步處理
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
  };
  // 設(shè)置監(jiān)聽
  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) {
          // 這里需要異步處理以下,否則無法設(shè)置成功
          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: '模擬數(shù)據(jù)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 達成 (•??• )?

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

以上就是echartjs實現(xiàn)cross十星輔助線實現(xiàn)示例詳解的詳細內(nèi)容,更多關(guān)于echartjs cross十星輔助線的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • JS代碼實現(xiàn)根據(jù)時間變換頁面背景效果

    JS代碼實現(xiàn)根據(jù)時間變換頁面背景效果

    這篇文章主要介紹了JS代碼實現(xiàn)根據(jù)時間變換頁面背景效果的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友一起看下吧
    2016-06-06
  • js如何判斷用戶是在PC端和還是移動端訪問

    js如何判斷用戶是在PC端和還是移動端訪問

    這篇文章主要介紹了js如何判斷用戶是在PC端和還是移動端訪問,需要的朋友可以參考下
    2014-04-04
  • Bootstrap4如何定制自己的顏色和風(fēng)格

    Bootstrap4如何定制自己的顏色和風(fēng)格

    這篇文章主要介紹了Bootstrap4如何定制自己的顏色和風(fēng)格,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-02
  • javascript 應(yīng)用小技巧方法匯總

    javascript 應(yīng)用小技巧方法匯總

    這篇文章主要介紹了javascript 應(yīng)用小技巧方法匯總的相關(guān)資料,需要的朋友可以參考下
    2015-07-07
  • javascript天然的迭代器

    javascript天然的迭代器

    有一個數(shù)n=5,不用for循環(huán),怎么返回[1,2,3,4,5]這樣一個數(shù)組
    2010-10-10
  • JavaScript中添加監(jiān)聽句柄的方式

    JavaScript中添加監(jiān)聽句柄的方式

    這篇文章主要介紹了JavaScript中添加監(jiān)聽句柄的方式,監(jiān)聽就是觸發(fā)某事件之后做出的響應(yīng),監(jiān)聽句柄是觸發(fā)某相應(yīng)的條件,下面關(guān)于添加監(jiān)聽句柄的方式的詳細內(nèi)容,需要的朋友可以參考一下,希望對你有所幫助
    2022-02-02
  • js原型鏈與繼承解析(初體驗)

    js原型鏈與繼承解析(初體驗)

    js原型鏈與繼承是js中的重點,所以我們通過以下三個例子來進行詳細的講解。一起跟隨小編過來看看吧,希望對大家有所幫助。
    2016-05-05
  • 基于mpvue小程序使用echarts畫折線圖的方法示例

    基于mpvue小程序使用echarts畫折線圖的方法示例

    這篇文章主要介紹了基于mpvue小程序使用echarts畫折線圖的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-04-04
  • 基于JS實現(xiàn)checkbox全選功能實例代碼

    基于JS實現(xiàn)checkbox全選功能實例代碼

    最近做了個項目其中有這樣的需求要求實現(xiàn)點擊全選選中所有菜單,再次點擊全選取消選中。下面小編給大家分享實現(xiàn)代碼,對js實現(xiàn)checkbox全選功能感興趣的朋友參考下吧
    2016-10-10
  • 20個JS簡寫技巧提升工作效率

    20個JS簡寫技巧提升工作效率

    這篇文章主要介紹了20個JS簡寫技巧提升工作效率,本文特點以言簡意賅為主,圍繞JS簡寫技巧的話題展開全文,具有一定的查看價值 ,需要的小伙伴可以參考一下
    2021-12-12

最新評論