Apache Echarts - 使用循环创建系列

Question

此处的所有示例 (https://echarts.apache.org/examples/) 都已硬编码 'series' 个对象：

 series: [
    {
        name: 'Forest',
        type: 'bar',
        data: [320, 332, 301, 334, 390]
    },
    {
        name: 'Steppe',
        type: 'bar',
        data: [220, 182, 191, 234, 290]
    },
    {
        name: 'Desert',
        type: 'bar',
        data: [150, 232, 201, 154, 190]
    }]

我想动态创建这些。像这样：

for(x=0; x < myData.length; x++){
    createSeries(myData[x]);
}

这可能吗？

Answer 1

当然可以。只需将生成器传递给系列属性：

var seriesData = ['Forest', 'Steppe', 'Desert'].map(name => {
  return {
    name: name,
    type: 'bar',
    data: Array.from({length: 6}, () => Math.floor(Math.random() * 100)),
  }
})

var option = {
  //[...]
  series: seriesData
  //[...]
}

  var myChart = echarts.init(document.getElementById('main'));
  var seriesData = ['Forest', 'Steppe', 'Desert'].map(name => {
    return {
        name: name,
      type: 'bar',
      data: Array.from({length: 6}, () => Math.floor(Math.random() * 100)),
    }
  })
  
  var option = {
      title: {
          text: 'ECharts'
      },
      tooltip: {},
      legend: {
          data:['Label']
      },
      xAxis: {
          data: ["Category1","Category2","Category3","Category4","Category5","Category6"]
      },
      yAxis: {},
      series: seriesData
  };

  myChart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

P.S。对于运行时的更改系列，请使用 myChart.setOption({series: seriesData})

Apache Echarts - 使用循环创建系列

Apache Echarts - create series with a loop

echarts