vue中EXharts的使用步骤

1. 安装Echats
   npm install echarts --save
   // 监听echarts的盒子宽
   npm install element-resize-detector

2.项目入口文件main.js中引入Echarts

// 引入echarts
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;
//  监听宽度 (包裹echarts的盒子)
import elementResizeDetectorMaker from 'element-resize-detector'

3.在需要用的组件中引入

var echarts = require('echarts');
var elementResizeDetectorMaker = require("element-resize-detector");
//全局引入会将所的echarts图表打包，导致体积过大，最好还是按需引入

4.页面写入

//html
<div id="charts"></div>

//js
export default {
  mounted() {
    // ECharts图表
    var myChart = echarts.init(document.getElementById("charts"));
    myChart.setOption({
      title: {
        text: "某地区蒸发量和降水量",
        subtext: "纯属虚构",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["蒸发量", "降水量"],
      },
      toolbox: {
        show: true,
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ["line", "bar"] },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      calculable: true,
      xAxis: [
        {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "蒸发量",
          type: "bar",
          data: [
            2.0,
            4.9,
            7.0,
            23.2,
            25.6,
            76.7,
            135.6,
            162.2,
            32.6,
            20.0,
            6.4,
            3.3,
          ],
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" },
            ],
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }],
          },
        },
        {
          name: "降水量",
          type: "bar",
          data: [
            2.6,
            5.9,
            9.0,
            26.4,
            28.7,
            70.7,
            175.6,
            182.2,
            48.7,
            18.8,
            6.0,
            2.3,
          ],
          markPoint: {
            data: [
              { name: "年最高", value: 182.2, xAxis: 7, yAxis: 183 },
              { name: "年最低", value: 2.3, xAxis: 11, yAxis: 3 },
            ],
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }],
          },
        },
      ],
    });
    var that = this;
      let erd = elementResizeDetectorMaker();
      erd.listenTo(document.getElementById("charts"), function (element) {
        that.$nextTick(function () {
          myChart.resize(); //变化重新渲染图
        });
      });
  }
 }

效果图