快捷導(dǎo)航

vue echarts實(shí)現(xiàn)綁定事件和解綁事件

更新時(shí)間：2024年06月12日 10:52:46 作者：weixin_46412709

這篇文章主要介紹了vue echarts實(shí)現(xiàn)綁定事件和解綁事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue echarts綁定事件和解綁事件

// echarts 官網(wǎng)里面 action 和 events 都是觸發(fā)事件的一些行為，默認(rèn)事件和自定義事件

var mYcharts = echarts.init(dom)
// 綁定事件
mYcharts.on('click', function (arg) {
	// 里面會(huì)有默認(rèn)形參
	console.log(arg)
})

mYcharts.off('click') // 解綁 click 事件

vue使用echarts中遇到的問(wèn)題及解決

最近在做demo的過(guò)程中用到了echarts，在過(guò)程中也踩了好多坑，所以專(zhuān)門(mén)記錄一下遇到的問(wèn)題及解決方案。

遇到的問(wèn)題

安裝完echarts依賴(lài)后表格示例無(wú)法顯示
示例圖標(biāo)顯示后格式異常
再次進(jìn)入業(yè)務(wù)事件后提示dom已加載并展示異常

解決方案

安裝完echarts依賴(lài)后表格示例無(wú)法顯示

解決方案：這種問(wèn)題一般會(huì)是兩種情況：

一是版本不對(duì)應(yīng)的問(wèn)題，npm install echarts --save默認(rèn)的是最新的版本(5.1x)，直接安裝最新版本的echarts可能會(huì)出現(xiàn)上述問(wèn)題，所以需要降低版本安裝echarts。
二是安裝echarts后未成功掛載到vue上。

我是第二種情況，解決代碼如下

// 安裝echarts依賴(lài)
npm install echarts --save

// 在main.js文件中添加
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts 

// 實(shí)際業(yè)務(wù)處理文件中使用echarts
<div ref="xxxx" />

this.$echarts.init(this.$refs.xxxx).setOption({
 ...
})

示例圖標(biāo)顯示后格式異常

解決方案: 我當(dāng)時(shí)出現(xiàn)的情況是示例只在很窄的區(qū)域展示，所以要給對(duì)應(yīng)的dom-div設(shè)置寬高，解決如下

<div ref="xxxx" style="width: 45vh; height: 300px" />

再次進(jìn)入業(yè)務(wù)事件后提示dom已加載并展示異常

解決方案: 這個(gè)問(wèn)題確實(shí)有點(diǎn)惡心，當(dāng)我再次調(diào)用對(duì)應(yīng)的echarts時(shí)，控制臺(tái)會(huì)報(bào)dom已加載的警告，并且頁(yè)面的示例圖表會(huì)展示異常，解決方法是每次重新調(diào)用echarts時(shí)都需要先判斷是否dom上已經(jīng)存在，若存在則需要銷(xiāo)毀對(duì)應(yīng)的dom結(jié)構(gòu)，這樣處理過(guò)后就不會(huì)再有上述提示警告并且echarts圖表能夠正常展示，解決代碼如下：

// 關(guān)鍵代碼
	let myChart = this.$echarts.getInstanceByDom(
      this.$refs.xxxx
    )
    if (myChart == null) {
	  myChart = this.$echarts.init(this.$refs.xxxx).setOption({
        ...
      })
    }

// 舉例
    // 賬單類(lèi)型
    noteTypeBarEcharts() {
      const finalArr = this.sortArr(this.tableInfo)
      console.log('分類(lèi)后的數(shù)組', finalArr)
      // 檢測(cè)是否已經(jīng)存在echarts實(shí)例，如果不存在，則不再去初始化
      let myChart = this.$echarts.getInstanceByDom(
        this.$refs.barSecond
      )
      if (myChart == null) {
        myChart = this.$echarts.init(this.$refs.barSecond).setOption({
          title: {
            text: '賬單類(lèi)型',
            subtext: '(單位/元)',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: ':{c} (vvxyksv9kd%)'
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: finalArr
            }
          ]
        })
      }
    }

至此，我們就可以在vue項(xiàng)目中隨意使用echarts啦