src/components/charts/lineChart.vue

<template>
  <div class="chart" :id="id"></div>
</template>
<script>
export default {
  name: "lineChart",
  props: {
    id: String,
    params: Array,
    xAxis: Array,
    colors: Array,
    formatterYAxis: true
  },
  watch: {
    params: {
      handler: function (val) {
        if (val.length) {
          this.initData();
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  created() { },
  mounted() {
    this.initData();
  },
  methods: {
    setOption() {
      const that = this;
      const options = {
        color: this.colors || ["#9772ff", "#79cd91", "#72b8ff"],
        backgroundColor: "#fff",
        tooltip: {
          trigger: "item",
          confine: true,
        },
        legend: {
          show: true,
          top: 0,
          right: 20,
          itemHeight: 15,
          icon: "circle"
        },
        xAxis: {
          type: "category",
          data: this.xAxis,
          axisLine: { show: true, lineStyle: { color: "#e2e2e2" } },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#333",
            interval: 0,
            width: Math.ceil(600 / this.xAxis.length),
            overflow: "breakAll"
          },
        },
        yAxis: {
          type: "value",
          axisLine: { show: false },
          splitLine: {
            show: true,
          },
          axisLabel: {
            color: "#666",
            formatter: function (name) {
              return that.formatterYAxis ? `${name} %` : name
            },
          },
        },
        grid: {
          top: 36,
          left: 20,
          right: 20,
          bottom: 10,
          containLabel: true,
        },
        series: that.params.map((item) => {
          return {
            name: item.name,
            type: "line",
            symbol: "circle",
            symbolSize: "6",
            lineStyle: {
              width: 1,
            },
            data: item.value,
          };
        }),
      };
      return options;
    },
    initData() {
      if (!this.chart) {
        const div = document.getElementById(this.id);
        this.chart = this.$echarts.init(div);
      }
      const options = this.setOption();
      this.chart?.clear();
      this.chart.setOption(options, true);
      this.chart.off("click");
      this.chart.on("click", "series", (params) => {
        // this.$emit("clickPieChart", params);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.chart {
  height: 100%;
}
</style>