vue+echarts堆叠图实现及接口数据渲染

大屏项目，需求是做一个堆叠图，后端接口返回的数据比较拉跨，需要进行二次加工才能使用，以下是实现过程

设计图：

接口返回的数据：

存在的问题：

1. 仅返回数量不为零的字段，count为零则不返回。比如下图中“2022-06”的smsItems数据中有5项，而“2022-07”的中只有3项，也就是说仅从“2022-06”或者“2022-07”中无法得到全部的分类信息，只有将它们综合遍历之后才能保证获取到全部的类别
2. 堆叠图每一个类别是一组数据，而接口返回的数据是以时间为单位划分的，所以需要对接口中的数据进行处理

定义optionData用于存储图表所需的数据

let optionData = {
   
      months: [], //接口返回了哪些月份的数据
      legends: [],//接口返回了哪些类别的数据，
      dataList: [] //按照legends中的类别顺序存储每一类的数据
    }

如果每个月份的数据中有一个names字段记录了该月有哪些类型的数据，那当我们想要获取所有类别信息的时候，只要将每个月的类型合到一起就可以了
那么，我们就先来做第一步，用names字段记录该月有哪些数据类型

    //统计每个月份的类别
    let getItemNames = () => {
   
    //第一层循环用于遍历，每个月的数据
      for(let key in dataList){
   
        let item = dataList[key].smsItems
        let names = []
        //第二层循环用于遍历该月的各信息服务类别数据
        for(let i in item){
   
        //将类别添加到names数组中
          names.push(item[i].name)
        }
        //将names添加到原数组中
        dataList[key].names = names
      }
      return dataList
    }

现在的原始数组中已经存在每一月份的类别数组，我们遍历每一月份，将每个月的names合到一起就可以得到所有的类别，还可以在遍历的过程中将月份保存下来，用作图表x轴的数据

    //获取所有的标签名和月份