Apache Echarts - create series with a loop - echarts

Question

All of the examples here (https://echarts.apache.org/examples/) have hardcoded 'series' objects:
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]
}]
I would like to create these dynamically. Something like this:
for(x=0; x < myData.length; x++){
createSeries(myData[x]);
}
Is that possible?

Answer 1

Sure. Just pass generator to series attribute:
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. For change series in runtime use myChart.setOption({series: seriesData})