1.安装echarts

这里需要注意版本

npm install echarts --save

或者

npm install echarts -S

如果按照上述方法安装会报错，可以试试指定版本号

npm install echarts@4.9.0

2.项目中main.js

import echarts from 'echarts'

Vue.prototype.$echarts = echarts   注：将echarts定义为全局 $echarts为变量名

3.创建dom

<div
              id="zhuzhuangtu"
              style="width: 600px; height: 400px"
            ></div>

4.引入echarts

5.在mounted函数绘制echarts,这里使用的是官网是的柱状图案例。

 

<script>
import echarts from "echarts";
export default {
  name: "Dashboard",
  mounted() {
    var myChart = echarts.init(document.getElementById("zhuzhuangtu"));
    var option = {
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>

因为我们在main.j中配置echarts为全局变量，使用时可以不用在import，将代码中echarts.init()修改为this.$echarts.init()

<script>
export default {
  name: "Dashboard",
  mounted() {
    var myChart = this.$echarts.init(document.getElementById("zhuzhuangtu"));
    var option = {
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>