javascriptecharts

In ECHARTS how to setOptions for a specific serie (selecting it by name name)


I got some series in a ECHARTS graph.

Now talking about the y axis it's like this

yAxis: [
    {
        scale: true,
        splitArea: { show: true, },
    },
    {
        scale: true,
        gridIndex: 0,
        splitNumber: 2,
        axisLabel: { show: false, },
        axisLine: { show: false, },
        axisTick: { show: true, },
        splitLine: { show: false, },
        max: 8,
    },
    { scale: true, splitArea: { show: true, }, },
]

and series are like this

series: [
    {
        name: 'A',
        type: 'line',
        lineStyle: { width: 4, },
        showSymbol: false,
    },
    {
        name: 'B',
        type: 'line',
    },
    {
        name: 'serie_x',
        type: 'line',
        xAxisIndex: 0,
        yAxisIndex: 0,
        data: dynamicCalculator(),
        smooth: true,
        large: true,
    },
]

Now, if I want to change series symbolSize the command is setOption.

But if I do like this to change exactly serie_x

chart.setOption({
    series: [{
        name : 'serie_x',
        symbolSize: isChecked ? 5 : 1,
    }]

the first serier seems to change name, so the command has to be

chart.setOption({},{},{
    series: [{
        name : 'serie_x',
        symbolSize: isChecked ? 5 : 1,
    }]

adding 2 empty elements before the serie needed.

Now see the problem. The real question:

If there's a dynamic number of series how to setOption on the serie where the name it's serie_x??


Solution

  • series.name is not guaranteed to be unique, but series.id is. So you can target a specific series by "id" instead of "name" and update its data without worrying how many other series exist. Example