動態修改series數據（折線圖）

項目需求：顯示某四個物體三年里每月的數值變化，必須用折線圖！！！！

解題思路：柱狀圖中有一個和這個需求類似的存在，如下圖：

 

只不過需求里要求使用折線圖，而且是以月份為x軸來畫echarts圖

實現過程：

ps：數據是測試數據，項目里將這部分摘出來作為一個子組件來使用了，由於測試時沒有接口的原因導致拆分的話有點小問題，為了省（tai）事（lan），所以就扔一個vue文件里了。

1、折線圖series部分編寫

這個需求最多是同時存在12條折線，一開始的時候我是打算直接往series里寫12個“{}“來着，但是感覺太麻煩了，而且后期維護起來也不是很方便，所以就從網上找了一個動態添加series的方法，代碼如下：

 // 動態添加series
    Getseries(data) {
      this.Newseries = [];
      if (data.length) {
        data.forEach((item) => {
          this.Newseries.push({
            type: "line",
            data: item.data,
            name: item.name,
            id: item.year + "年" + item.name,
          });
        });
      } else {
        this.Newseries = [];
      }
      this.drawLine("FristId");
    },

2、畫echarts圖

 //折線圖開始------------------------------------------------------------
    drawLine(id) {
      this.MsgLcharts = echarts.init(document.getElementById(id));
      this.MsgLcharts.setOption({
        title: {},
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let str = "";
            params.forEach((item) => {
              str += item.marker + item.seriesId + ":" + item.value + "<br/>";
            });
            return str;
          },
        },
        legend: {
          top: "7%",
          left: "13%",
          textStyle: {
            fontSize: 15,
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          splitLine: { show: false },
          type: "category",
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#fff", //左邊線的顏色
              width: "2", //坐標線的寬度
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff", //坐標值得具體的顏色
            },
          },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
          splitLine: { show: false },
          axisLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#fff", //左邊線的顏色
              width: "2", //坐標線的寬度
            },
          },
          axisTick: {
            show: true, //y軸刻度
          },
          axisLabel: {
            textStyle: {
              color: "#fff", //坐標值得具體的顏色
            },
          },
        },
        series: this.Newseries,
      });
      window.onresize = this.MsgLcharts.resize;
    },

效果：

 

完整代碼：

<template>
  <div class="TestEP">
    <div id="FristId" class="HistogramStyle"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";

export default {
  components: {},
  data() {
    return {
      MsgLcharts: "",
      Newseries: [],
      EchartsList: [
        {
          name: "測試用例一",
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          year: "2017",
        },
        {
          name: "測試用例二",
          data: [11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22],
          year: "2017",
        },
        {
          name: "測試用例三",
          data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 101, 120],
          year: "2017",
        },
        {
          name: "測試用例一",
          data: [41, 32, 53, 74, 85, 96, 117, 48, 29, 30, 151, 102],
          year: "2018",
        },
        {
          name: "測試用例二",
          data: [11, 12, 13, 14, 15, 19, 17, 18, 19, 20, 21, 22],
          year: "2018",
        },
        {
          name: "測試用例三",
          data: [12, 14, 15, 16, 95, 14, 15, 56, 65, 45, 78, 52],
          year: "2018",
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.Getseries(this.EchartsList);
    });
  },
  methods: {
    // 動態添加series
    Getseries(data) {
      this.Newseries = [];
      if (data.length) {
        data.forEach((item) => {
          this.Newseries.push({
            type: "line",
            data: item.data,
            name: item.name,
            id: item.year + "年" + item.name,
          });
        });
      } else {
        this.Newseries = [];
      }
      this.drawLine("FristId");
    },
    //折線圖開始------------------------------------------------------------
    drawLine(id) {
      this.MsgLcharts = echarts.init(document.getElementById(id));
      this.MsgLcharts.setOption({
        title: {},
        tooltip: {
          position: function (pos, params, dom, rect, size) {
            // 鼠標在左側時 tooltip 顯示到右側，鼠標在右側時 tooltip 顯示到左側。
            var obj = { bottom: 10 };
            obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 5;
            return obj;
          },
          trigger: "axis",
          formatter: function (params) {
            let str = "";
            params.forEach((item) => {
              str += item.marker + item.seriesId + ":" + item.value + "<br/>";
            });
            return str;
          },
        },
        legend: {
          top: "7%",
          left: "13%",
          textStyle: {
            fontSize: 15,
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          splitLine: { show: false },
          type: "category",
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#fff", //左邊線的顏色
              width: "2", //坐標線的寬度
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff", //坐標值得具體的顏色
            },
          },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
          splitLine: { show: false },
          axisLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#fff", //左邊線的顏色
              width: "2", //坐標線的寬度
            },
          },
          axisTick: {
            show: true, //y軸刻度
          },
          axisLabel: {
            textStyle: {
              color: "#fff", //坐標值得具體的顏色
            },
          },
        },
        series: this.Newseries,
      });
      window.onresize = this.MsgLcharts.resize;
    },
  },
};
</script>
<style lang="less" scoped>
.TestEP {
  width: 100%;
  height: 50%;
  background-color: rgb(12, 65, 65);
}
.HistogramStyle {
  top: 25%;
  left: 27%;
  width: 541px;
  height: 243px;
}
</style>