echarts magicType ,允许切换line或者bar 单独配置和展示数据

528 阅读1分钟

您正在使用ECharts并配置了`magicType`组件,该组件允许您在`line``bar`之间切换图表类型。
当用户点击这两个类型进行切换时,触发的事件是`magictypechanged`。


如果您希望在不同图表类型之间使用不同的数据,可以在事件监听中根据需求更新数据。
以下是一段示例代码:

```javascript
// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));

// 配置图表
var option = {
    ...,
    toolbox: {
        show: true,
        feature: {
            magicType: {show: true, type ['line', 'bar']}
        }
    }
};

// 设置初始化图表
myChart.setOption(option);

// 为magictypechanged事件添加监听
myChart.on('magictypechanged', function (params) {
    // params.type 可以获取当前选择的图表类型,例如 'line' 或 'bar'
    if (params.type === 'line') {
        // 设置Line图表所需的数据和配置
        var lineOption = {
            ...
        };
        myChart.setOption(lineOption);
    } else if (params.type === 'bar') {
        // 设置Bar图表所需的数据和配置
        var barOption = {
            ...
        };
        myChart.setOption(barOption);
    }
});

只需将lineOptionbarOption替换为适当的配置,即可根据所选的图表类型更新图表。注意更新option时使用 myChart.setOption(lineOption) 而非 myChart.setOption(lineOption, true),这是因为我们不想完全覆盖原始选项,而只是更新特定部分。