Echarts使用笔记1: 在vue-cli2中使用Echarts

一、安装Echarts插件

在已经建好的脚手架的终端中输入

        错误输入：npm install echarts --save
        正确输入：npm install echarts@4.9.0 --save

下面演示错误输入带来的问题，以及解决办法（不想看可以直接跳到第二步）：

ps：解决上面错误 "export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’

#第一步卸载之前安装的echars版本
npm uninstall echarts --Save

#第二步输入指定版本号安装
npm install echarts@4.9.0 --save

二、在main.js中引入插件

在main.js中加入下面代码：

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

三、在组件静态获取数据并渲染echarts图表

案例如下：

<template>
  <div>
    <div ref="chart" style="width:100%;height:376px"></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  mounted() {
    this.getEchartData();
  },
  methods: {
    getEchartData() {
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        const 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",
            },
          ],
        };
        myChart.setOption(option);
        //当窗口发送变化的时候，改变图表的大小
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      //防止多次触发窗口发送变化
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
};
</script>

四、echarts图表自适应容器大小

案例如下：

代码分析：重点将在上面用mounted（）调用echarts方法改成了watch监听调用，因为created（）中获取数据是异步加载的，我们此时要等数据加载完成，才可以绘图。用watch去监听，当数据改变完成后绘图。

<template>
  <div>
    <div ref="chart" style="width:100%;height:376px"></div>
  </div>
</template>

<script>
import { getEchartsData } from "../network/charts";

export default {
  name: "HelloWorld",
  data() {
    return {
      option: null,
    };
  },
  created() {
    //获取图表数据
    this.getEchartsData();
  },
  watch: {
    //构建图表
    option() {
      this.$nextTick(() => {
        this.getEchartData();
      });
    },
  },
  methods: {
    /**
     * 发送网络请求
     */
    getEchartsData() {
      getEchartsData()
        .then((res) => {
          const yValue = res.data.yValue;
          this.option = {
            xAxis: {
              type: "category",
              data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: Array.from(yValue),
                type: "bar",
              },
            ],
          };
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //构建图表
    getEchartData() {
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart, "dark");
        myChart.setOption(this.option);

        //当窗口发送变化的时候，改变图表的大小
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      //防止多次触发窗口发送变化
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
};
</script>

下一节