Echarts中联动和共享数据集图表中折线如何以循环的方式展示?

作者站长头像
站长
· 阅读数 15

由于返回的条数不固定,如何以循环的方式渲染折线

Echarts中联动和共享数据集图表中折线如何以循环的方式展示?Echarts中联动和共享数据集图表中折线如何以循环的方式展示?

回复
1个回答
avatar
test
2024-07-16

map或者 for 循环插入就行了。

比如说:answer image

也可以使用这样的形式

series: [
  ...new Array(remoteData.length -1).fill({
    type: 'line',
    smooth: true,
    seriesLayoutBy: 'row',
    emphasis: { focus: 'series' }
  }),
  {
    type: 'pie',
    id: 'pie',
    radius: '30%',
    center: ['50%', '25%'],
    emphasis: {
      focus: 'self'
    },
    label: {
      formatter: '{b}: {@2012} ({d}%)'
    },
    encode: {
      itemName: 'product',
      value: '2012',
      tooltip: '2012'
    }
  }
]

或者用 map 来组合,如果你想要自定义内部的属性

series: [
  // 这里的 data 需要是去掉表头row的
  ...chartsData.map(item=>({
    name: item.name // 赋值单个数据,
    type: 'line',
    smooth: true,
    seriesLayoutBy: 'row',
    emphasis: { focus: 'series' }
  })),
  {
    type: 'pie',
    id: 'pie',
    radius: '30%',
    center: ['50%', '25%'],
    emphasis: {
      focus: 'self'
    },
    label: {
      formatter: '{b}: {@2012} ({d}%)'
    },
    encode: {
      itemName: 'product',
      value: '2012',
      tooltip: '2012'
    }
  }
]
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容