js 数组遍历echarts 图表

Question

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
listContent: Array(2)
    0: {id: 1, content: "数量", resultCount: 5个}
    1: {id: 2, content: "数量2", resultCount: 6个}
    length: 2
    __proto__: Array(0)
type: 1
typeName: "图表1"
__proto__: Object
1: {type: 2, typeName: "图表2", listContent: Array(3)}
2: {type: 3, typeName: "图表3", listContent: Array(4)}
3: {type: 4, typeName: "图表4", listContent: Array(3)}

1. 后台返回10个数组，每个数组对应一个图表，上图有详细数据结构，我怎么遍历这个数组拿到值渲染出10个图表，

大佬们帮我看看
下面是我写的遍历的方法:

    if(info.staut == 0){
        一次性取10个图表就有错
        console.log(info.data) // 数组(length为10)
        info.data.forEach((i,index) => {
            this.disableCategoryRatoData[index] = []
            this.disableCategoryRatoType[index] = []
            this.allValuaPortName[index] = i.typeName
            i.listContent.forEach(tem => {
                console.log(index)
                this.disableCategoryRatoData[index].push(tem.resultCount)
                this.disableCategoryRatoType[index].push(tem.content)
            })
        })
        
        注释代码：是我取第5个图表渲染能成功
        // this.allValuaPortName= info.data[5].typeName
        // info.data[5].listContent.forEach(item => {
        //     this.disableCategoryRatoData.push(item.resultCount)
        //     this.disableCategoryRatoType.push(item.content)
        // });
    }

更新下： html代码部分
图表渲染是封装的，数据直接赋值上去就可以的，但要生成对应下标个数的disableCategoryRatoData数组赋值

<Bar :chartType="this.disableCategoryRatoType" :chartData="disableCategoryRatoData" :chartColor="disableCategoryRatoColor" :chartTitle="allValuaPortName"></Bar>

Answer 1

使用echarts展示，你是不是要这种数组？

    let arr = [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
      let some = arr.reduce((x,y)=>{
        y.resultCount = [], y.content = []
        y.listContent.map(i=>{
          y.content.push(i.content)
          y.resultCount.push(i.resultCount)
        })
        x.push(y)
        return x
      },[])
      console.log(some);
      //[{"type":1,"typeName":"图表1","listContent":[{"id":1,"content":"数量","resultCount":"5 个"},{"id":2,"content":"数量2","resultCount":"6 个"}],"resultCount":["5 个","6 个"],"content":["数量","数量2"]},{"type":2,"typeName":"图表2","listContent":[{"id":1,"content":"数量","resultCount":"7 个"},{"id":2,"content":"数量2","resultCount":"8 个"}],"resultCount":["7 个","8 个"],"content":["数量","数量2"]}]

补充，如何调用：

<Bar v-for="(item, index) in some" :key="index" :chartType="item.content" :chartData="item.resultCount" :chartColor="disableCategoryRatoColor" :chartTitle="item.typeName"></Bar>

这样不是更简单吗。。。

补充
resultCount要为数字类型

   let some = arr.reduce((x, y) => {
        y.resultCount = [], y.content = [], y.count = ""
        y.listContent.map((i,z,arr2) => {
          y.content.push(i.content)
          y.resultCount.push(i.resultCount)
          y.count=  y.resultCount.reduce((z,j)=> z+j)
        })
        x.push(y)
        return x
      }, [])
      console.log(JSON.stringify(some));
      
     // [{"type":1,"typeName":"图表1","listContent":[{"id":1,"content":"数量","resultCount":5},{"id":2,"content":"数量2","resultCount":6}],"resultCount":[5,6],"content":["数量","数量2"],"count":11},{"type":2,"typeName":"图表2","listContent":[{"id":1,"content":"数量","resultCount":7},{"id":2,"content":"数量2","resultCount":8}],"resultCount":[7,8],"content":["数量","数量2"],"count":15}]

Answer 2

报错信息能贴出来吗

Answer 3

我的思路是：

 this.disableCategoryRatoData[index].push(tem.resultCount)
 this.disableCategoryRatoType[index].push(tem.content)
 这里this.disableCategoryRatoData[index] 取下标index 是根据下标生成多少个disableCategoryRatoData数组，
 this.allValuaPortName[index] = i.typeName // 对应下标数量生成 allValuaPortName
 一般遍历中生成的disableCategoryRatoData数组和刚生成的数组 disableCategoryRatoData  // 此数组非彼数组
 不知道这样理解对吗？