ECharts堆叠柱状图图例联动数据总和动态显示指南

2023-11-06 09:35:53

在数据可视化领域，ECharts 是一个强大的工具，它提供了丰富的图表类型和灵活的配置选项。堆叠柱状图是其中一种常用的图表类型，它可以将多个数据系列叠加在同一张图表中，从而比较不同数据系列之间的关系。本文将详细介绍如何在 ECharts 堆叠柱状图中实现图例联动数据总和的动态显示。

一、创建ECharts实例

首先，我们需要创建一个 ECharts 实例，并指定图表的容器。以下是一个简单的示例：

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

二、配置堆叠柱状图选项

接下来，我们需要配置堆叠柱状图的选项。这包括设置提示框、图例、x轴、y轴以及数据系列等。以下是一个示例配置：

var option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['数据系列1', '数据系列2', '数据系列3']
    },
    xAxis: {
        data: ['类目1', '类目2', '类目3', '类目4', '类目5']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '数据系列1',
        type: 'bar',
        stack: '总量',
        data: [120, 132, 101, 134, 90]
    }, {
        name: '数据系列2',
        type: 'bar',
        stack: '总量',
        data: [220, 182, 191, 234, 290]
    }, {
        name: '数据系列3',
        type: 'bar',
        stack: '总量',
        data: [150, 232, 201, 154, 190]
    }]
};

三、绑定图例的legendselectchanged事件

为了实现图例联动数据总和的动态显示，我们需要监听图例的 legendselectchanged 事件。当用户点击图例时，该事件会被触发，我们可以在事件处理函数中计算选中的数据系列的总和，并更新图表标题。

以下是事件处理函数的示例代码：

myChart.on('legendselectchanged', function (params) {
    // 计算选中的数据系列的总和
    var sum = 0;
    for (var i = 0; i < params.selected.length; i++) {
        var seriesIndex = myChart.getOption().series.findIndex(function (s) { return s.name === params.selected[i]; });
        sum += myChart.getOption().series[seriesIndex].data.reduce(function (a, b) { return a + b; });
    }

    // 更新图表标题中的数据总和
    myChart.setOption({
        title: {
            text: '数据总和：' + sum
        }
    });
});

四、渲染图表

最后，我们需要使用 setOption 方法来渲染图表。以下是完整的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
</head>
<body>
    <div id="myChart" style="width: 600px; height: 400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('myChart'));

        var option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['数据系列1', '数据系列2', '数据系列3']
            },
            xAxis: {
                data: ['类目1', '类目2', '类目3', '类目4', '类目5']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '数据系列1',
                type: 'bar',
                stack: '总量',
                data: [120, 132, 101, 134, 90]
            }, {
                name: '数据系列2',
                type: 'bar',
                stack: '总量',
                data: [220, 182, 191, 234, 290]
            }, {
                name: '数据系列3',
                type: 'bar',
                stack: '总量',
                data: [150, 232, 201, 154, 190]
            }]
        };

        myChart.on('legendselectchanged', function (params) {
            var sum = 0;
            for (var i = 0; i < params.selected.length; i++) {
                var seriesIndex = myChart.getOption().series.findIndex(function (s) { return s.name === params.selected[i]; });
                sum += myChart.getOption().series[seriesIndex].data.reduce(function (a, b) { return a + b; });
            }

            myChart.setOption({
                title: {
                    text: '数据总和：' + sum
                }
            });
        });

        myChart.setOption(option);
    </script>
</body>
</html>