echarts在vue-cli项目中的使用详解(vue2)

1.在使用vue-cli搭建完基的项目之后，使用【npm安装echarts】安装命令行如下：

npm install echarts --save

2.安装完之后，在mian.js里引入如下代码：

// 引入echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.在要使用的vue文件中，给定一个盒子固定大小比如：

   <div id="myChart" :style="{width: '500px', height: '500px'}"></div>

这里的div大小要写在行内使用【:style="{width: '【xxx大小】px', height: '【xxx大小】px'}"】的格式，不然没有效果。

4.在echarts官网中选择你要展示的图标，比如我选择柱形图

复制的代码放到：methods{}方法中

 methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        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",
          },
        ],
      });
    },
  },

在【mounted(){}】方法中调用【methods】中所定义的图表方法：

 mounted() {
    this.drawLine();
  },

最终效果：

 完成！！！