如何在vue中使用echart，以及使用的事项

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

 

 

 

 

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

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

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

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

例子：

<div ref="chart" style="width:100%;height:376px"></div>

 

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

 

   mounted(){
    this.getEchartData()  
    },


   methods: {
    getEchartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = th