vue使用echarts基本原理以及报错提示undefined(reading init)的解决过程

// echarts

import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts

    <!-- 折线图 -->
    <div id="main2" class="echarts" style="width:100%;height:300px;"></div>

// echarts图
    getmain2() {
      let myChart = this.$echarts.init(document.getElementById("main2"));
      let option = {
        xAxis: {
          type: "category",
          name: '年、月',
          data: this.echarttable.months,
        },
        legend: {},
        toolbox: { //工具栏
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            // restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        tooltip: {
          trigger: "axis" //显示当前列的所有信息
        },
        yAxis: {
          type: "value",
          name: '通过率%',
          axisLabel: {
            formatter: '{value} %', // 设置纵坐标显示百分比形式
          },
        },
        series: [
          //数据   五条折线数据  line 折线
          {
            name: '海口市公安局秀英分局(百分比)',
            data: this.echarttable.xiuying,
            type: "line"
          },
          {
            name: '海口市公安局龙华分局(百分比)',
            data: this.echarttable.longhua,
            type: "line"
          },
          {
            name: '海口市公安局美兰分局(百分比)',
            data: this.echarttable.meilan,
            type: "line"
          },
          {
            name: '海口市公安局琼山分局(百分比)',
            data: this.echarttable.qiongshan,
            type: "line"
          },
          {
            name: '海口市公安局开发区分局(百分比)',
            data: this.echarttable.kaifaqu,
            type: "line"
          }
        ]
      };
      // 注册echarts的option
      myChart.setOption(option);
    },

let myChart = this.$echarts.init(document.getElementById("main2"));

 // 注册echarts的option
      myChart.setOption(option);

let option = {
        内容在上面
}