js map循环总是得到最后一个item的值？

站长

2024年07月02日 09:11 · 阅读数 6

处理多个饼状图的option 但是return 出去的option 都是数组中最后一个数据的值也不知道问题出在什么地方

 
let option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: '65%',  //图例距离左的距离
    y: 'center',  //图例上下居中
    textStyle: {
      color: "#fff"
    },
    // data: ['事件一 名称', '事件二 名称', '事件三 名称', '事件四 名称'],
    data: []
  },
  label: {
    show: true
  },
  grid: {
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
  },
  series: [

    {
      // name: '访问来源',
      type: 'pie',
      radius: ['100%', '70%'],
      center: ['40%', '50%'],
      avoidLabelOverlap: false,

      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold'
        }
      },
      // labelLine:{  
      //       normal:{  
      //            length:15,       // 指示线长度
      //            lineStyle: {
      //               color: "#595959"  // 指示线颜色
      //            }
      //       },
      //  },
      //  label: {
      //       normal: {
      //            textStyle: {
      //                  color: '#595959',    // 提示文字颜色
      //                  fontSize: 18        // 提示文字大小
      //            } 
      //      }
      //  },
      // data: [
      //   { value: 335, name: '事件一 名称' },
      //   { value: 310, name: '事件二 名称' },
      //   { value: 234, name: '事件三 名称' },
      //   { value: 135, name: '事件四 名称' }
      // ]
      data: []
    }
  ]
};

export default function (data) {
  console.log("list", data)
  let pieData = []
  let list = []
  if (data !== undefined) {
    data.map(item => {
      item.name = item.key;
      item.value = Number(item.value)
      pieData.push(item.key);
      console.log("pie", pieData)
      let obj = {}
      obj.value = item.value;
      obj.name = item.name;
      list.push(obj)

    });
  
  }

  
  option.series[0].data = list;

  option.legend.data = pieData;

  console.log("出去之前", option)
  return option
}

1个回答

test

2024-07-02

export default function (data) {
  console.log("list", data)
  let pieData = []
  let list = []
  if (data !== undefined) {
    data.map(item => {
      item.name = item.key;
      item.value = Number(item.value)
      pieData.push(item.key);
      console.log("pie", pieData)
      let obj = {}
      obj.value = item.value;
      obj.name = item.name;
      list.push(obj)
    });
  }

  // 新建一个新的 option 对象
  let newOption = JSON.parse(JSON.stringify(option));
  
  newOption.series[0].data = list;
  newOption.legend.data = pieData;

  console.log("出去之前", newOption)
  return newOption
}

用箭头函数和对象解构：

export default function (data = []) {
  const pieData = data.map(item => item.key);
  const list = data.map(item => ({
    name: item.key,
    value: Number(item.value)
  }));

  return {
    ...option,
    legend: {
      ...option.legend,
      data: pieData
    },
    series: option.series.map(series => ({
      ...series,
      data: list
    }))
  };
}

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容