Apache Echarts-使用循环创建系列

问题描述

此处的所有示例（https://echarts.apache.org/examples/）都有硬编码的“系列”对象：

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

我想动态创建它们。像这样：

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

有可能吗？

解决方法

好的。只需将生成器传递给series属性：

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','Desert'].map(name => {
    return {
        name: name,}
  })
  
  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})

echarts echarts