echarts怎么在vue-cli脚手架里使用

1.引入并配置挂载好echarts

终端安装echarts和axios命令：

npm i echarts

 main.js引入并挂载：

import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts;

2.从echarts官网示例随便找一个图，比如我找的基础柱状图

在methods里创建一个show方法存放阴影部分的代码，在template部分再给一个#main的div给好宽高样式，并把echarts改成this.$echarts，然后把this.show()写到mounted里，就出来啦！（配置好路由）

<template>
  <div id="main" style="width:800px; height:600px; border: 1px solid red"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    show() {
      var chartDom = document.getElementById("main");
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.show();
  },
};
</script>

<style>
</style>