vue封装echarts折线图

<template>
  <div class="chartBox">
    <div
      v-if="!isNoData"
      ref="lineChart"
      v-resize="resizeCharts"
      class="chart"
    ></div>
    <EmptyData v-if="isNoData"></EmptyData>
  </div>
</template>
<script>
import * as echarts from "echarts";
import EmptyData from "_com_c/EmptyData";

export default {
  name: "LineChart",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    axis: {
      type: Array,
      default() {
        return [];
      },
    },
    colorType: {
      type: String,
      default: "1",
    },
    areaStyle: {
      type: Boolean,
      default: true,
    },
    unit: {
      type: String,
      default: "",
    },
    smooth: {
      type: Boolean,
      default: false,
    },
    symbolSize: {
      type: Number,
      default: 8,
    },
    legend: {
      type: Boolean,
      default: false,
    },
    isShowLineSty: {
      type: Boolean,
      default: false,
    },
    isShowUnit: {
      type: Boolean,
      default: false,
    },
    legendData: {
      type: Array,
      default() {
        return [];
      },
    },
    rotate: {
      type: Number,
      default: 0,
    },
    minInterval: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      charts: null,
    };
  },
  computed: {
    isNoData() {
      let flag = true; // 默认无数据
      const series = this.data;
      if (series.length > 0) {
        flag = false;
      }
      return flag;
    },
  },
  components: {
    EmptyData,
  },
  methods: {
    resizeCharts() {
      this.charts.resize();
    },
    initCharts() {
      this.$nextTick(() => {
        this.charts = echarts.init(this.$refs.lineChart);
        this.charts.clear();
        this.updateOption();
      });
    },
    updateOption() {
      this.resizeCharts();
      const option = this.getOption();
      this.charts.setOption(option);
    },
    getOption() {
      const option = {
        grid: {
          top: "30",
          bottom: "50",
          left: "70",
          right: "20",
        },
        tooltip: {
          textStyle: {
            color: "#fff",
          },
          borderWidth: 0,
          trigger: "axis",
          // formatter: (data) => {
          //   const total = data
          //     .map((item) => {
          //       return item.value;
          //     })
          //     .reduce((total, num) => {
          //       return total + num;
          //     });
          //   let str = "";
          //   if (data.length > 0) {
          //     str = `<div style="font-weight: bold; margin-bottom: 5px">${data[0].name}</div>`;
          //   }
          //   data.forEach((item) => {
          //     const num = ((item.value / total) * 100).toFixed(2);
          //     str += `<div style="display: flex; font-size: 12px"><div style="width: 80px;">${item.seriesName}：</div><div style="width: 60px;">${item.value}${this.unit}</div> </div>`;
          //   });
          //   return `<div style="padding: 5px">${str}</div>`;
          // },
        },
        legend: {
          show: this.legend,
          bottom: "-6",
          type: "scroll",
          itemGap: 40, //间距
        },
        xAxis: {
          type: "category",

          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            interval: 0, //横轴信息全部显示
            rotate: this.rotate,
            textStyle: {
              color: "#666",
            },
          },
          data: this.axis,
        },
        yAxis: {
          name: this.isShowUnit ? "单位：个" : "单位：台",
          nameTextStyle: { // y轴name的样式调整
            padding: [0, 50, 0, 0] // 加上padding可以调整其位置
          },
          type: "value",
          min: function (value) {
            return value.min;
          },

          // max: function (value) {
          //   return value.max;
          // },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "#ddd",
              type: "dashed", //设置背景网格线为虚线
              // type: "solid", //设置背景网格线为实线

            },
          },
          axisLabel: {
            textStyle: {
              color: "#666",
            },
          },
          rotate: {
            type: Number,
            default: 0,
          },
        },
        series: this.data.map((item, i) => {
          const lineSty1 = {
            name: item.name,
            data: item.data,
            type: "line",
            // symbol: "none",//不显示拐点
            showSymbol: false, //鼠标滑过显示拐点
            symbolSize: this.symbolSize, //拐点大小
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0.1,
                      color: "#FCCC80", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(252,204,128, 0.3)", // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: "rgba(252,204,128, 0.1)", // 0% 处的颜色
                    },
                    {
                      offset: 0.9,
                      color: "rgba(0,0,0, 0.0)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
          };
          const lineSty2 = {
            name: item.name,
            data: item.data,
            showSymbol: false,
            type: "line",
            // stack: "Total",
          };

          return this.isShowLineSty ? lineSty1 : lineSty2;
        }),
      };
      if (this.colorType === "1") {
        option.color = ["#61D391", "#FFA907"];
      } else if (this.colorType === "2") {
        option.color = ["#FCCC80"];
      }

      return option;
    },
  },
  mounted() {
    if (this.data.length > 0) {
      this.initCharts();
    }
  },
  beforeDestroy() {
    this.charts && this.charts.dispose();
    this.charts = null;
  },
  watch: {
    // handler immediate deep
    data: {
      handler(val) {
        if (val.length > 0) {
          this.initCharts();
        }
      },
      deep: true,
    },
    axis: {
      handler() {
        this.initCharts();
      },
      deep: true,
    },
    colorType: {
      handler() {
        this.initCharts();
      },
      deep: true,
    },
  },
};
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 100%;
}

.chartBox {
  width: 100%;
  height: 100%;
}
</style>

暂无数据，引入的时候注意路径

<template>
  <div class="empty-data">
    <div class="data-empty">
      <div class="data-empty-cont">
        <div class="data-empty-icon">
          <slot name="icon">
            <common-icon type="_icon_em" :size="36" />
          </slot>
        </div>
        <div class="data-empty-text">
          <slot name="text">
            <i></i>
            <span>{{text}}</span>
            <i></i>
          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EmptyData',
  props: {
    text: {
      type: String,
      default: '暂时没有数据哦'
    }
  },
  data () {
    return {}
  },
  computed: {},
  methods: {},
  mounted () {
  },
  beforeDestroy () {
  },
  watch: {
    // handler immediate deep
  },
  components: {}
}
</script>

<style scoped lang="less">
.empty-data {
  height: 100%;
  padding: 20px;
}
</style>

引入之后，记得加高度，否则图出不来