vue中引入不了echarts?

Question

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: {
    // 地类面积统计
    landClassAcreagea() {
      console.log('echarts',this.$echarts);
      
      /* 柱状图->左 */
      var myChart = this.$echarts.init(document.getElementById("main_left"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "面积",
          textStyle: {
            fontWeight: "normal",
            color: "#fff", // 标题颜色
            fontSize: 14
          }
        },
        tooltip: {
          // 鼠标移动柱状图是提示文字
          show: true
        },
        legend: {
          // data: ['面积'],
          textStyle: {
            fontSize: 12
          }
        },
        // 横坐标
        xAxis: {
          data: ["灌木", "森林", "森林", "树木", "小树", "大树", "红树"],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#094060"
            }
          }
        },
        // 纵坐标
        yAxis: {
          // 设置坐标轴字体颜色
          axisLine: {
            lineStyle: {
              color: "#094060"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff"
            }
          },
          splitLine: {
            lineStyle: {
              color: ["#07405c"]
            }
          }
        },
        //配置样式
        itemStyle: {
          //通常情况下：
          normal: {
            //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
            color: function(params) {
              var colorList = ["#0166ff"];
              return colorList[params.dataIndex % colorList.length];
            }
          },
          //鼠标悬停时：
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        },
        series: [
          {
            // name: '面积',
            type: "bar",
            barWidth: 13, // 设置柱的宽度
            data: [5000, 8000, 3000, 4500, 3200, 2800, 3800]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option);
    }
  },
  mounted() {
    this.landClassAcreagea();
  }
};
</script>

浏览器显示的效果, 有宽高, 但是每没有显示canvas

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

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

Answer 1

一般是在main.js中引入，并注册到vue原型上，使用时在mounted周期内进行初始化操作。

data(){
    return {
        myChart: null
    }
},
mounted() {
    //下面的methods要使用的时候直接用this.myChart就能获取到了
    this.myChart = this.$echarts.init(document.getElementById("main_left"));
}