在vue中使用echarts 图形问题

在vue中使用echarts 图形问题

在vue中使用 ECharts

（1）安装

npm install echarts --save

使用此种方式，安装的是最新的，在使用的过程中容易出现错误Error in mounted hook: "TypeError: Cannot read property 'init' of undefined"

解决方法：安装低版本的echarts可以解决，可能是新版本还不够稳定，建议还是安装旧的版本

npm install echarts@4.8.0 --save

（2）引入 ECharts
在main.js中引入echarts

// 引入echarts
import echarts from 'echarts'

常用的echarts使用：

//页面  
<div class="chartbox">
      <div
        ref="chart"
        style="flex:1; height: 300px;"
      ></div>  //先给一个固定大小的盒子
      <div
        ref="chart2"
        style="flex:1; height: 300px;"
      ></div>
      <div
        ref="chart3"
        style="flex:1; height: 300px;"
      ></div>
</div>

//css
.chartbox{
  display: flex;
}

mounted() {
    this.getEchartData();
    this.getEchartData2();
    this.getEchartData3();
  },
methods: {
   getEchartData() {
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        const option = {
			//此处根据具体的样式来填写
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
        this.$on("hook:destroyed", () => {
          window.removeEventListener("resize", function () {
            myChart.resize();
          });
        });
      }
  },
  getEchartData2() {....}
  getEchartData3() {....}
}