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

}