在vue中使用echats的详细步骤及注意事项

前言

1、官方地址：echats官方网站
2、官方api文档地址：官方api文档地址
3、社区：echats社区，可以找到很多案例

社区中我也写了一些案例，不过以复杂图例居多，普通图例很少写

一、安装echats

// 使用npm
npm install echarts --save

// 使用淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -save

二、引入echats

如果使用频率较少可使用局部引入，这样会节省资源；如使用频率很高，为了省事可以使用全局引入；看项目具体需求决定引入方式。

1、局部引入

在需要使用的.vue文件中引入

import echarts from "echarts";

引入方法不止这一种，这种未必一定可以使用，受项目具体设置影响，比如eslint等。
如果无法使用可以尝试用以下方式引入：

import * as echarts from "echarts";

使用

this.chart = echarts.init(this.$refs.mineEchats);

2、全局引入

在main.js中引入并注册

const echarts = require("echarts");
Vue.prototype.$echarts = echarts;

使用

this.chart = this.$echarts.init(this.$refs.mineEchats);

三、使用echats

不具体一步一步介绍了，以柱状图举例，写个demo，每个 api 的含义我尽量注释下，刚开始接触可能不太熟悉，写多了就会发现，还是不太熟悉。
echats的 api 很多种，有些并不是通用的，有的有坐标系，有的无坐标系，柱状图属于常用的那种，很多 api 都重复，更多具体的 api 得看echats官方文档了。

<template>
  <div class="echats">
    <p>柱状图demo</p>
    <div class="mineEchats" ref="mineEchats"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "",
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      this.chart = echarts.init(this.$refs.mineEchats);
      const option = {
        // 是否开启渲染动画
        calculable: true,
        // 距离dom四周的距离
        grid: {
          top: "25%",
          left: "10%",
          right: "10%",
          bottom: "5%",
          containLabel: true
        },
        // 图例组件，用来显示不同系列的标记
        legend: {
          data: ["午餐消费金额", "晚餐消费金额"],
          align: "left",
          right: "3%",
          top: "5%",
          itemGap: 30,
          icon: "circle",
          itemWidth: 12, // 图例图形宽度
          itemHeight: 12, // 图例图形高度
          textStyle: {
            color: "#333",
            fontSize: 14
          }
        },
        // 鼠标移上去显示悬浮信息
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow" // 默认为直线,可选为：'line' | 'shadow'
          }
        },
        // x轴坐标系
        xAxis: [
          {
            type: "category", // 默认显示类目名
            boundaryGap: true, // 坐标轴两端是否留白
            nameTextStyle: {
              color: "#333",
              fontSize: 14
            },
            // 坐标轴轴线相关设置
            axisLine: {
              lineStyle: {
                color: "#979797",
                type: "dotted" // solid、dashed、dotted（实线、虚线、圆点虚线）
              }
            },
            // 坐标轴刻度标签相关设置
            axisLabel: {
              interval: "auto",
              color: "#333",
              padding: [5, 0, 0, 0],
              rotate: 0
            },
            // 坐标轴刻度相关设置
            axisTick: {
              show: false
            },
            data: ["周一", "周二", "周三", "周四", "周五"]
          }
        ],
        // y轴坐标系
        yAxis: [
          {
            type: "value",
            name: "午餐消费金额（元）",
            nameTextStyle: {
              color: "#333",
              fontSize: 14
            },
            axisLine: {
              lineStyle: {
                color: "#979797",
                type: "dotted" // solid、dashed、dotted（实线、虚线、圆点虚线）
              }
            },
            // 坐标轴在grid区域的分隔线
            splitLine: {
              show: true,
              lineStyle: {
                color: "#979797",
                type: "dotted" // solid、dashed、dotted（实线、虚线、圆点虚线）
              }
            },
            axisLabel: {
              color: "#333"
            },
            axisTick: {
              show: false
            }
          },
          {
            type: "value",
            name: "用餐次数",
            nameTextStyle: {
              color: "#333",
              fontSize: 14
            },
            axisLine: {
              lineStyle: {
                color: "#979797",
                type: "dotted" // solid、dashed、dotted
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              interval: "auto",
              color: "#333"
            },
            axisTick: {
              show: false
            }
          }
        ],
        // 专门用来放数据和设置图表类型等属性
        series: [
          {
            name: "午餐消费金额",
            type: "bar", // 图表类型
            barWidth: 10,
            data: [20, 30, 15, 24, 18]
          },
          {
            name: "晚餐消费金额",
            type: "bar",
            barWidth: 10,
            data: [15, 23, 28, 12, 22]
          }
        ],
        color: ["#2197FC", "#A6D5FE"]
      };
      this.chart.setOption(option);
    }
  }
};
</script>
<style lang="scss" scoped>
.echats {
  p {
    margin-left: 20px;
    font-size: 18px;
    font-weight: bold;
  }
  .mineEchats {
    width: 600px;
    height: 300px;
  }
}
</style>

注意事项：
1、echats的绘制必须在dom渲染完成之后才能进行，所以调用方法不可以放在created里面;
2、echats提供了 Title 的 api ，但不建议使用，因为在没有数据时无法显示标题，会造成页面显示空白；
3、如果需要echats自动刷新且有连续变化的动画，则不可以在echats绘制完成后销毁图例；
4、如echats只渲染一次，则最好在绘制完成后销毁图例，避免重新进入页面时重新渲染dom（此案例并没有添加销毁图例的代码，可以自行百度）；
5、echats可自定义的程度很高，很多看似无法实现的功能大多都可以通过自定义实现。

四、效果

图例详解