正文

如何使用echarts实现点击图例切换多种图形展示

/0 浏览量
0509

在 ECharts 中，通过图例点击可以控制图表中对应系列的显示与隐藏。以下是如何使用 ECharts 实现点击图例切换多种图形展示的详细步骤：

1. 准备工作

首先，确保你的 HTML 文件中引入了 ECharts 的 JavaScript 文件。可以从 ECharts 的官网下载或者使用 CDN 链接。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>

2. 创建图表容器

在 HTML 中添加一个用于显示图表的容器元素。

<div id="main" style="width: 600px;height:400px;"></div>

3. 初始化图表

在 JavaScript 中初始化一个 ECharts 实例，并设置图表的配置项。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['系列1', '系列2']
    },
    series: [
        {
            name: '系列1',
            type: 'line',
            data: [120, 200, 150, 80, 70, 110, 130]
        },
        {
            name: '系列2',
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130]
        }
    ]
};

myChart.setOption(option);

4. 监听图例点击事件

通过监听 legendselectchanged 事件，可以在用户点击图例时切换系列的显示状态。

myChart.on('legendselectchanged', function (params) {
    // 获取当前点击的图例数据
    var selected = params.name;
    // 获取当前图表的配置项
    var option = myChart.getOption();
    // 遍历 series，根据图例名称切换显示状态
    option.series.forEach(function (series) {
        if (series.name === selected) {
            series.visible = !series.visible;
        }
    });
    // 重新设置图表的配置项
    myChart.setOption(option);
});

5. 完整示例

以下是一个完整的示例，包含了 HTML 和 JavaScript 代码。

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['系列1', '系列2']
        },
        series: [
            {
                name: '系列1',
                type: 'line',
                data: [120, 200, 150, 80, 70, 110, 130]
            },
            {
                name: '系列2',
                type: 'bar',
                data: [120, 200, 150, 80, 70, 110, 130]
            }
        ]
    };

    myChart.setOption(option);

    myChart.on('legendselectchanged', function (params) {
        var selected = params.name;
        var option = myChart.getOption();
        option.series.forEach(function (series) {
            if (series.name === selected) {
                series.visible = !series.visible;
            }
        });
        myChart.setOption(option);
    });
</script>
</body>
</html>

通过以上步骤，你可以在 ECharts 中实现点击图例切换多种图形展示的功能。这样用户就可以根据自己的需求查看不同的图表类型了。

-- 展开阅读全文 --