vue项目中使用echarts，报错Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined

错误代码图片

解决思路：

原因：是因为下载的echarts为最新版本，很多时候使用的echarts示例都是不支持的，因此在项目运行时会报错。

问题处理：

首先：需要卸载掉项目安装的最新版本echarts

//卸载代码指令
npm uninstall echarts

然后：安装指定的并且稳定的echarts版本号，可以百度搜索，这里我推荐安装echarts4.8.0版本的

//安装echarts4.8.0版本
npm install echarts@4.8.0 --save

---

1、首先确保安装echarts以及引用无误

2、main.js，在项目的入口文件引入

// 引入 ECharts
import echarts from "echarts";
Vue.prototype.$echarts = echarts;

3、components，在项目的组件文件新建一个echart.vue文件（相当于子组件），方便父组件进行引用和提高复用性，我这里有个案例：

<template>  
    <div class="echart" id="echart-line" :style="{float:'left',width: '100%', height: '230px'}"></div>   
</template>

<script>

import echarts from  "echarts";

export default {
   
    methods:{

    initChart(name,xData,yData) {
     
        let getchart = echarts.init(document.getElementById('echart-line'));
        var  option = {
             
              tooltip: {
                  trigger: 'axis'
              },
              legend: {
                  data: [name],
                  bottom:'0%'
              },
              grid: { //调整图表上下左右位置
                  top:'10%',
                  left: '3%',
                  right: '8%',
                  bottom: '11%',
                  containLabel: true
              },
             
              xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: xData
              },
              yAxis: {
                  type: 'value'
              },
              series: [
                  {
                      name: name,
                      type: 'line',
                      stack: '总量',
                      data: yData
                  },
              ]
          };

        getchart.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          getchart.resize();
      });
    },

  }

}
</script>

4、父组件我这里在views文件目录下新建home文件夹，用于存放home.vue

<template>
    <div class="home">             
        <ChartLine ref="chart_line_one"/>              
    </div>
 </template>
 
 <script>
 import ChartLine from '../../components/echart.vue'
 
 export default{
     data(){
         return{
           name:'张雪',
           xData: ['2020-02', '2020-03', '2020-04', '2020-05'],
           yData: [30, 132, 80, 134],
         }
     },
     mounted () {
        const {name,xData,yData} = this
        console.log(this.$refs)
        this.$refs.chart_line_one.initChart(name,xData,yData)
     },
     components: {
        ChartLine,
     }
 }
 </script>
 

5、这是运行结果