在vue中使用echart,以及踩坑点

1.安装echarts依赖   npm install echarts --save

2.在main.js中全局中引用

因为echarts 也不能通过 Vue.use() 进行全局调用，通常是在要使用echart的文件直接引入或者在main.js中引入，

import echarts from 'echarts'

3.在main.js中修改原型链，挂载到原型链之后就可以这样初始化。this.$echarts.init 

Vue.prototype.$echarts = echarts

4.在需要用到echart的地方先设置一个div的id、宽高，

例子：

<div ref="chart" style="width:90%;height:400px"></div>

5.然后我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中。 

mounted(){
    this.getEchartData()  
    },


   methods: {
    getEchartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {...}
        myChart.clear() // 一定要清除下
        myChart.setOption(option)
        // 自适应大小
        window.addEventListener("resize", function() {
          myChart.resize()
        })
      }
       this.$on('hook:destroyed',()=>{
         window.removeEventListener("resize", function() {
          myChart.resize();
        });
        })
    }
  }

其中const option = { }就是我们需要引进echart图表的代码，需要什么例子可以在官方例子https://www.echartsjs.com/examples/里面找。

6. echart的容器必须使用px。不能使用百分比，但是可以计算自适应

// 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
function resizeCharts () {
  myChart.style.width = chartBox.style.width + 'px'
  myChart.style.height = chartBox.style.height + 'px'
}
// 设置容器高宽
resizeCharts()

不再建议使用document.getElementById的方式获取元素的id,而是建议使用ref来代替。这样的话就会避免Echarts的图形容器还未生成就对其进行了初始化，产生如下的错误。

Uncaught TypeError:Cannot read property 'getAttribut' of null

        at Object.getAttribut