vue-echart dispatchAction tooltip輪播

使用的版本是vue6.0，用之前記得要npm i @vue/composition-api

 

事情是這樣的，有個需求說，圖表的提示框要輪播地顯示各個數據，查閱echart官網后，有了以下代碼：

html：

<v-chart ref="line" :option="option2" autoresize/>

js：

在Vue.methods下添加：

//折線圖定時展示提示框
lineChartPlayTip(){
  let line = this.$refs.line
  let lineXLength = this.option2.series[0].data.length
  let lineMark = 0
  this.timerForChar2 = setInterval(()=>{
    if (lineMark >= lineXLength) {
      lineMark = 0
    }
    line.dispatchAction({
      type: 'showTip',
      seriesIndex: 3,
      dataIndex:lineMark,
    })
    lineMark++
  },1000)
}

然后在mounted中調用即可。

現在來解釋一下代碼：

1.可以看到，我在html中給它添加了ref，以供Vue去調用這個charts的事件API

2.然后使用dispatchAction來觸發showTip事件，這里要注意，如果你想以series的數據來展示，那么seriesIndex和dataIndex就一定要填。或者只填name即可。如果要以x和y坐標來觸發的話，那你就得自己用js來計算具體的坐標了（這種一般是用在那種地圖數據，一般的折線圖，餅圖什么的，用不到這樣的觸發方式）

附上官網的參數說明和我的成品圖：

https://echarts.apache.org/zh/api.html#echartsInstance.dispatchAction

https://echarts.apache.org/zh/api.html#action.tooltip.showTip