折线图--自己记录

效果：

option代码为：

 lineChart: null,
      lineChartOptions: {
        color: ["#29adfe", "#ffc833", "#f55833"],
        grid: {
          left: 20,
          right: 20,
          bottom: 10,
          top: 40,
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: 0,
          textStyle: {
            color: "#e1e4ea",
          },
          data: ["年度计划", "时间速度", "年日均销量"],
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "#215d8b",
            },
          },
          axisTick: {
            inside: true,
            lineStyle: {
              color: "#215d8b",
            },
          },
          axisLabel: {
            color: "#ccdef3",
          },
          data: [],
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "#215d8b",
            },
          },
          axisTick: null,
          splitLine: {
            lineStyle: {
              color: "#205787",
              type: "dashed",
            },
          },
          axisLabel: {
            color: "#ccdef3",
          },
        },
        series: [
          {
            name: "年度计划",
            type: "line",
            data: [],
          },
          {
            name: "时间速度",
            type: "line",
            showSymbol: false,
            lineStyle: {
              type: "dashed",
            },
            data: [],
          },
          {
            name: "年日均销量",
            type: "line",
            lineStyle: {
              type: "dotted",
            },
            data: [],
          },
        ],
      },

方法使用：

mounted() {
    this.initLineChart();
    this.setLineChart();
    window.addEventListener("resize", this.resize);
  },
  beforeDestroy() {
    window.removeEventListener("reisze", this.resize);
  },
  methods: {
    resize() {
      this.lineChart?.resize();
    },
    initLineChart() {
      this.lineChart = echarts.init(this.$refs["line"]);
      this.lineChart.setOption(this.lineChartOptions);
    },
    setLineChart() {
      this.lineChartOptions.xAxis.data = new Array(12)
        .fill("")
        .map((item, index) => index + 1 + "月");
      const data = new Array(12).fill(1630);
      this.lineChartOptions.series[0].data = data.map((item) =>
        Math.abs(item - Math.floor(Math.random() * 400 + 100))
      );
      this.lineChartOptions.series[1].data = data.map(() => 1300);
      this.lineChartOptions.series[2].data = data.map((item) =>
        Math.abs(item - Math.floor(Math.random() * 500 + 100))
      );
      this.lineChart.setOption(this.lineChartOptions);
    },
  },

随机生成的数据，仅作参考，自己记录便于以后直接拿来使用