Vue 封装Echarts折线图

1.当前页面引用echarts

import * as echarts from "echarts";

2.获取到折线图数据方法里，把值传到以下方法里

hanndlemonthSvgData(data) {  //data 为后台返回的数据
			let json = [],
				res = [];
			this.$_.deepClone(data, json);

            //MonthList为折线图x轴数据，例如['1','2','3']
		
            for (let i = 0; i < json.MonthList.length; i++) {
				let temp = {},
					currMonthValues = [];
            // StatisticsData为折线图数据，格式为
            [{Month: 1, Name: "a折线图", Data: "111"},
             {Month: 1, Name: "b折线图", Data: "222"},
             {Month: 2, Name: "a折线图", Data: "333"},
             {Month: 2, Name: "b折线图", Data: "444"}
            ]
              // 首先通过x轴坐标,对x轴数据进行循环,然后通过x轴每一个值,去找他所对应的数据，比如折线a在月的数据等等
				for (let j = 0; j < json.StatisticsData.length; j++) {
					if (json.MonthList[i] == json.StatisticsData[j].Month) {
						if (json.StatisticsData[j].Name == "a折线图") {
							let n = json.StatisticsData[j].Data;
							currMonthValues.push(n);
						}
						if (json.StatisticsData[j].Name == "b折线图") {
							let n = json.StatisticsData[j].Data;
							currMonthValues.push(n);
						}
						temp["month"] = json.MonthList[i];
						temp["grounpValues"] = currMonthValues;
					}
				}
				res.push(temp);
			}

			let monthlyScoreData = [],
				perCapitayYieldData = [],
				contributionData = [];
			for (let i = 0; i < res.length; i++) {
				let item = res[i].grounpValues;
				if (item) {
					for (let j = 0; j < item.length; j++) {
						//1,2 亦表示 a折线图,b折线图
						if (j == 0) {
							monthlyScoreData.push(item[j]);
							continue;
						}
						if (j == 1) {
							perCapitayYieldData.push(item[j]);
							continue;
						}
					}
				}
			}

			this.initEcharts({
				monthxAxis: data.MonthList,  x轴数据
				monthlyScore: monthlyScoreData,  a折线图数据
				perCapitayYield: perCapitayYieldData,  b折线图数据
			});
		},