vue + echarts 使用中需要注意的問題

1.首先在main.js中引入（全局引入）

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

 

2.初始化圖表

this.chart = this.$echarts.init(document.getElementById(id))

this.$nextTick(() => {

     this.chart.resize()  //圖表自適應

})

 

const options = {}

this.chart.setOption(options)

window.addEventListener('resize', () => { // 監聽瀏覽器的縮放 圖表自適應

        if (this.chart1) { // 用if判斷 后台不會報錯

          this.chart1.resize()

        }

  })

 

3. 設置字體大小在圖表中的自適應問題

 fontSize(res) {

      let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth

      if (!clientWidth) return

      let fontSize = 100 * (clientWidth / 1920)

      return res * fontSize

   }

fontSize: this.fontSize(0.24), //具體在echarts中的引用

 

// vue生命周期函數 銷毀前

beforeDestroy() {

if (!this.chart) {

      return

    }

    window.removeEventListener('resize', this.chart)

    this.chart.dispose()

    this.chart = null

}