vue中引入不了echarts?

html

<div id="main_left" style="width: 635px;height:400px;"></div>

main.js

import echarts from 'echarts';
Vue.prototype.$echarts = echarts; // 在原型注入echarts

js

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 地類面積統(tǒng)計
    landClassAcreagea() {
      console.log('echarts',this.$echarts);
      
      /* 柱狀圖->左 */
      var myChart = this.$echarts.init(document.getElementById("main_left"));
      // 指定圖表的配置項(xiàng)和數(shù)據(jù)
      var option = {
        title: {
          text: "面積",
          textStyle: {
            fontWeight: "normal",
            color: "#fff", // 標(biāo)題顏色
            fontSize: 14
          }
        },
        tooltip: {
          // 鼠標(biāo)移動柱狀圖是提示文字
          show: true
        },
        legend: {
          // data: ['面積'],
          textStyle: {
            fontSize: 12
          }
        },
        // 橫坐標(biāo)
        xAxis: {
          data: ["灌木", "森林", "森林", "樹木", "小樹", "大樹", "紅樹"],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#094060"
            }
          }
        },
        // 縱坐標(biāo)
        yAxis: {
          // 設(shè)置坐標(biāo)軸字體顏色
          axisLine: {
            lineStyle: {
              color: "#094060"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff"
            }
          },
          splitLine: {
            lineStyle: {
              color: ["#07405c"]
            }
          }
        },
        //配置樣式
        itemStyle: {
          //通常情況下：
          normal: {
            //每個柱子的顏色即為colorList數(shù)組里的每一項(xiàng)，如果柱子數(shù)目多于colorList的長度，則柱子顏色循環(huán)使用該數(shù)組
            color: function(params) {
              var colorList = ["#0166ff"];
              return colorList[params.dataIndex % colorList.length];
            }
          },
          //鼠標(biāo)懸停時：
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        },
        series: [
          {
            // name: '面積',
            type: "bar",
            barWidth: 13, // 設(shè)置柱的寬度
            data: [5000, 8000, 3000, 4500, 3200, 2800, 3800]
          }
        ]
      };

      // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表
      myChart.setOption(option);
    }
  },
  mounted() {
    this.landClassAcreagea();
  }
};
</script>

瀏覽器顯示的效果, 有寬高, 但是每沒有顯示canvas

在landClassAcreagea()中可以在控制臺打印出echarts, 但是渲染不出來

console.log('echarts',this.$echarts);