React ECharts设置magicType默认选中：解决折线图标未高亮问题

一、将默认图表类型设为柱状图 #

要让图表默认显示柱状图并同步工具箱图标选中状态，需要修改两处配置：

• 把 series 的类型设为 'bar'
• 在 toolbox.feature.magicType 中添加 selected 属性，指定 bar: true

修改后的代码示例：

toolbox: {
    feature: {
        restore: {
            show: true
        },
        magicType: {
            show: true,
            type: ['line', 'bar'],
            selected: {
                bar: true
            }
        },
    }
},
series: [
    {
        type: 'bar',
        // 其他系列配置项...
    }
]

二、让折线图默认选中图标高亮 #

默认折线图但图标未高亮，是因为ECharts不会自动根据当前系列类型同步工具箱图标的选中状态，需要手动指定 selected 配置：

• 保持 series 的类型为 'line'
• 在 toolbox.feature.magicType 中添加 selected 属性，指定 line: true

修改后的代码示例：

toolbox: {
    feature: {
        restore: {
            show: true
        },
        magicType: {
            show: true,
            type: ['line', 'bar'],
            selected: {
                line: true
            }
        },
    }
},
series: [
    {
        type: 'line',
        // 其他系列配置项...
    }
]

内容的提问来源于stack exchange，提问作者ThatBrianDude