前言

折线图最近碰到蛮多的，后台却不给力，每每给我的数据非拿来即用。没办法，只得请教前台大佬了。下面请看一组数据：

{
    "data": [
      {
        "periodId": "202101",
        "type": "curr_year",
        "value": 13.45
      },
      {
        "periodId": "202201",
        "type": "next_year",
        "value": 12.7
      },
      {
        "periodId": "202102",
        "type": "curr_year",
        "value": 10
      },
      {
        "periodId": "202202",
        "type": "next_year",
        "value": 24.91
      },
      {
        "periodId": "202203",
        "type": "next_year",
        "value": 10.88
      } 
    ]
}

要求：展示今年和明年两条数据线，一共12个月的，如果接口没给，就置空。

代码实现

<template>
  <div id="main" style="width: 500px; height: 300px"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      lineData: [
        {
          periodId: "202101",
          type: "curr_year",
          value: 13.45,
        },
        {
          periodId: "202201",
          type: "next_year",
          value: 12.7,
        },
        {
          periodId: "202102",
          type: "curr_year",
          value: 10,
        },
        {
          periodId: "202202",
          type: "next_year",
          value: 24.91,
        },
        {
          periodId: "202203",
          type: "next_year",
          value: 10.88,
        },
      ],
    };
  },
  mounted() {
    // 1.获取月份数组(x轴)
    let mounthArr = Array.from(new Array(12).keys());
    mounthArr = mounthArr.map((_, i) => {
      return i + 1 + "月";
    });

    // 2.分别获取今年和明年对应的月份值(y轴,两条线)
    let currYear = "";
    let nextYear = "";
    let nextYearData = Array.from(new Array(12).keys());
    nextYearData = nextYearData.map(() => "");
    let currYearData = [...nextYearData];
    this.lineData.forEach((item) => {
      const year = item.periodId.slice(0, 4);
      // index
      const month = Number(item.periodId.slice(-2)) - 1;
      const val = item.value;
      if (item.type === "curr_year") {
        currYear = year;
        currYearData[month] = val;
      } else {
        nextYear = year;
        nextYearData[month] = val;
      }
    });

    // 3.渲染折线图
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      title: {
        show: false,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        show: true,
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: mounthArr,
          axisLine: {
            show: true
          },
          axisTick: {
            show: true
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLine: {
            show: true
          },
          axisTick: {
            show: false
          },
          nameRotate: -90
        },
      ],
      series: [
        {
          name: currYear + "年趋势图",
          type: "line",
          emphasis: {
            focus: "series",
          },
          data: currYearData,
        },
        {
          name: nextYear + "年趋势图",
          type: "line",
          emphasis: {
            focus: "series",
          },
          data: nextYearData,
        },
      ],
    };

    option && myChart.setOption(option);
  },
};
</script>

页面效果