vue中获取的数据，相同项的值相加并且展示到 echarts折线图上

假设一个场景，张三、李四、王五三个人分别在十一号、十二号、十三号出去玩，他们每天都预算消费100，可是实际消费的有时候多了，有时候少了，这么一来就会有超出消费的价钱。这个场景需要我们用echats折线图展示出来，横坐标为日期，每个日期的值为三个人加起来实际消费、计划消费、超出消费

data:[
        {date:"20221211",name:"张三",sjprice:"100",jhprice:"100",cqprice:"0"},
        {date:"20221211",name:"李四",sjprice:"150",jhprice:"100",cqprice:"50"},
        {date:"20221211",name:"王五",sjprice:"200",jhprice:"100",cqprice:"100"},
        {date:"20221212",name:"张三",sjprice:"80",jhprice:"100",cqprice:"-20"},
        {date:"20221212",name:"李四",sjprice:"70",jhprice:"100",cqprice:"-30"},
        {date:"20221212",name:"王五",sjprice:"120",jhprice:"100",cqprice:"20"},
        {date:"20221213",name:"张三",sjprice:"200",jhprice:"100",cqprice:"100"},
        {date:"20221213",name:"李四",sjprice:"300",jhprice:"100",cqprice:"200"},
        {date:"20221213",name:"王五",sjprice:"400",jhprice:"100",cqprice:"300"}
    ]

首先横坐标显示日期，如果直接渲染的话，每个日期会有三个，所以我们要做的操作有截取、去重

1、循环，这个把所有的日期先push到一个数组中

for(let i=0;i<res.data.length;i++) {
    this.echartsX.push(res.data[i].date)
}

2、去重，截取，获取日期的最后两位

var arr = []
this.echartsX.forEach((item)=>{
    arr.push(item)
})
//去重
arr = new Set(arr)
arr2.forEach((item)=>{
    this.echartsX.push(item.slice(-2))   //先截取每一个日期，后push
})

接下来就是值相加，我这里用的比较老的方法，for循环嵌套，思路：肯定是得判断日期如果相等的话，让三人的实际消费相加，计划消费相加，超出消费相加，既然要判断，那么if跟for肯定是必不可少的，数据当中有三个人在同一天日期，那么我们就需要写三个for循环，如果是两个的话，那么就写两个for。上代码

for(let i = 0 ; i < res.data.length ; i++) {
    this.echartsX.push(res.data[i].date)
    for(let j = i + 1 ; j < res.data.length ; j++) {
        for(let k = j + 1 ; j < res.data.length ; j++) {
            //这里有几个循环，写几个判断条件
            //如果是两个条件的话，直接判断，如果是多个的话一定要分别判断然后加&&，不可以多个条件直接用==来连接，如果是这样的话，这个判断就不成立，下面就不执行（亲身体验过，弄了好长时间，这还是自己一点一点试出来的），一定要切记
            if((res.data[i].date == res.data[j].date) && (res.data[k].date == res.data[j].date))
            this.echatsSj = res.data[i].sjprice + res.data[j].sjprice + res.data[k].sjprice
            this.echatsJh = res.data[i].jhprice + res.data[j].jhprice + res.data[k].jhprice
            this.echatsCq = res.data[i].cqprice + res.data[j].cqprice + res.data[k].cqprice
        }
    }
}

给大家看看效果，上面这个数据是我自己写的，跟效果图数据不一样，但是样式一样，因为这个效果图是昨天刚做好的，代码都是跟公司有关的，所以不方便放出来，自己就写了个格式一样的数据

 将自己新学到的经验分享给大家，虽然不是很难，但是可能会卡很长时间，亲身体验，这个方法也很好理解，就是三个for循环，分别判断就好了，希望可以帮助到大家