VUE封装Echarts图表组件

建立一个echarts的文件夹并创建一个base-echarts.vue文件 

<template>
  <div :id="elId" style="height: 100%; width: 100%" />
</template>

<script>
import * as echarts from "echarts";
import { merge, debounce } from "lodash";
// 引入公共样式
import baseOption from "./echartsOption.js";

export default {
  name: "BaseEcharts",
  data() {
    return {
      elId: "",
      vOption: {
        series: [],
      },
    };
  },
  props: {
    optionData: Object,
  },
  computed: {
    // 合并配置对象
    option() {
      return merge({}, baseOption, this.vOption, this.optionData);
    },
  },
  created() {
    this.elId = this.uuid();
  },
  mounted() {
    // 实例化echarts对象
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  watch: {
    optionData: {
      deep: true,
      handler: function () {
        this.$nextTick(() => {
          this.initChart();
        });
      },
    },
  },
  methods: {
    // 生成唯一uuid做为唯一标识符
    uuid() {
      return "xxxx-xxxx-xxxx-xxxx-xxxx".replace(
        /[xy]/g,
        function (c) {
          var r = (Math.random() * 16) | 0,
            v = c == "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        }
      );
    },
    // 绘图
    initChart() {
      if (!document.getElementById(this.elId)) return;
      if (this.chart != null && this.chart != "" && this.chart != undefined) {
        this.chart.dispose(); //销毁
      }
      this.chart = echarts.init(document.getElementById(this.elId));
      this.chart.setOption(this.option);
      const that = this;
      window.addEventListener(
        "resize",
        debounce(() => {
          // 引入debounce，防止频繁更改浏览页尺寸出现页面抖动
          if (that.chart) {
            that.chart.resize();
          }
        }, 100)
      );
    },
  },
};
</script>

创建一个echartsOption.js的文件设置option

export default {
    color: [
        "#0067E1",
        "#0CC1FF",
        "#00D1B3",
        "#85E814",
        "#FFA082",
    ],
    tooltip: {},
    legend: {
        orient: 'horizontal',
        type: 'scroll',
        pageIconSize: 12,
        pageIconColor: '#aaa',
        pageIconInactiveColor: '#2f4554',
        pageTextStyle: {
            color: '#999999'
        },
        itemWidth: 20,
        itemHeight: 12,
        top: 0,
        textStyle: {
            color: '#999999'
        },
    },
    grid: {
        top: "13%",
        left: "3%",
        right: "10%",
        bottom: "2%",
        containLabel: true,
    },
    xAxis: [{
        axisLine: {
            lineStyle: {
                color: "rgba(65, 97, 128, 0.15)",
                // type: "dashed",
            },
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            interval: 0,
            color: "#rgba(0, 0, 0, 0.25)",
            textStyle: {
                fontSize: 10,
            }
        },
        nameTextStyle: {
            color: '#999999',
            fontSize: 10,
        },
    }, ],
    yAxis: [{
        axisLabel: {
            color: "#rgba(0, 0, 0, 0.25)",
            textStyle: {
                fontSize: 11,
            },
        },
        axisLine: {
            lineStyle: {
                color: "rgba(65, 97, 128, 0.15)",
            },
        },
        splitLine: {
            lineStyle: {
                color: "rgba(65, 97, 128, 0.15)",
            },
        },
        axisTick: {
            show: false,
        },
        nameTextStyle: {
            color: '#999999',
            fontSize: 10,
            padding: [0, 20, 0, 0]
        },
        minInterval: 1
    }, ],
};

页面引入

<template>
  <div class="echartsWrap">
    <BaseEcharts :optionData="chartData"></BaseEcharts>
  </div>
</template>
<script>
import BaseEcharts from "@/components/base-echarts";
export default {
  components: { BaseEcharts },
  data() {
    return {
      chartData: {
        title: {
          show: true,
          text: "报表",
          left: "center",
        },
        grid: {
          bottom: 30,
        },
        legend: {
          show: true,
          top: "bottom",
        },
        xAxis: [
          {
            type: "time",
            axisLabel: {
              formatter: "{MMM}{dd}",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            type: "line",
            markLine: {
              symbol: ["none", "none"], //去掉箭头
              itemStyle: {
                normal: {
                  lineStyle: {
                    type: "solid",
                    color: "black",
                  },
                  label: {
                    show: true,
                    position: "middle",
                  },
                },
              },
              data: [
                {
                  xAxis: "2021-6-20", //这里设置false是隐藏不了的，可以设置为-1
                },
                {
                  xAxis: "2021-10-15", //这里设置false是隐藏不了的，可以设置为-1
                },
              ],
            },
          },
          {
            name: "123",
            type: "line",
            data: [
              { value: ["2021-1-1", 12] },
              { value: ["2021-3-2", 40] },
              { value: ["2021-6-3", 150] },
              { value: ["2021-9-5", 80] },
              { value: ["2021-10-7", 230] },
              { value: ["2021-11-8", 350] },
              { value: ["2021-12-9", 220] },
            ],
          },
          {
            name: "456",
            type: "line",
            data: [
              { value: ["2021-2-1", 80] },
              { value: ["2021-2-27", 60] },
              { value: ["2021-3-6", 200] },
              { value: ["2021-7-5", 110] },
              { value: ["2021-8-7", 80] },
              { value: ["2021-10-8", 230] },
              { value: ["2021-12-9", 180] },
            ],
          },
        ],
      },
    };
  },
};
</script>
<style lang="scss" scoped>
.echartsWrap {
  height: 300px;
}
</style>