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

  • Z时代
  • 2024-02-08
  • 分类：IT

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

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

回答：

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

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

也可以使用这样的形式

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'
    }
  }
]

回答：

定义一个数组，
这个数组里放一些线的配置
这个数组弄个七八种不同的线的颜色

然后根据实际的数据条数
来从这个数组中依次拿配置
放入你画红线的地方即可

以上是 Echarts中联动和共享数据集图表中折线如何以循环的方式展示？ 的全部内容， 来源链接： utcz.com/p/933137.html

回到顶部