动态修改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>