Apache Echarts - 使用循环创建系列答案

【问题标题】：Apache Echarts - create series with a loopApache Echarts - 使用循环创建系列
【发布时间】：2020-12-06 23:47:39
【问题描述】：

这里的所有示例 (https://echarts.apache.org/examples/) 都有硬编码的“系列”对象：

 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]);
}

这可能吗？

【问题讨论】：

标签： echarts

【解决方案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>

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

【讨论】：

完美。谢谢。