快捷導(dǎo)航

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

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

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

vue echarts綁定事件和解綁事件

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

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

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

vue使用echarts中遇到的問題及解決

最近在做demo的過程中用到了echarts，在過程中也踩了好多坑，所以專門記錄一下遇到的問題及解決方案。

遇到的問題

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

解決方案

安裝完echarts依賴后表格示例無法顯示

解決方案：這種問題一般會是兩種情況：

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

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

// 安裝echarts依賴
npm install echarts --save

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

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

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

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

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

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

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

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

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

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

至此，我們就可以在vue項目中隨意使用echarts啦