导出图例中没有隐藏系列标签的图表

在图表库中，如ECharts或Highcharts，导出图表时有时会发现图例中的系列标签没有隐藏，即使在前端显示时已经设置了隐藏。这可能是由于导出功能使用了不同的配置或渲染机制导致的。

基础概念

图例（Legend）是图表中用于标识不同数据系列的元素，通常显示为一系列的标签和对应的颜色块。隐藏系列标签意味着在图例中不显示某个数据系列的名称。

类型与应用场景

静态隐藏：在图表初始化时就设置好哪些系列标签需要隐藏。
动态隐藏：根据用户的交互或其他条件动态改变显示哪些系列标签。

应用场景包括但不限于：

报表生成，需要导出的图表可能只需要展示部分关键数据系列。
数据可视化工具，用户可以根据需要自定义显示哪些系列。

可能的原因及解决方法

原因

导出配置未同步：导出时的配置可能与前端显示时的配置不一致。
渲染机制差异：导出功能可能使用了不同的渲染引擎或处理逻辑。

解决方法

以ECharts为例，可以通过以下步骤确保导出时隐藏特定的系列标签：

前端设置隐藏：在初始化图表时，设置legend的selected属性来控制哪些系列被选中显示。
前端设置隐藏：在初始化图表时，设置legend的selected属性来控制哪些系列被选中显示。
导出时同步配置：使用ECharts提供的导出功能时，确保传递相同的配置。
导出时同步配置：使用ECharts提供的导出功能时，确保传递相同的配置。
自定义导出逻辑：如果内置的导出功能不满足需求，可以考虑自定义导出逻辑，比如使用Canvas API手动绘制图表并导出。

示例代码

以下是一个完整的ECharts配置示例，展示了如何在前端隐藏系列并在导出时保持一致：

<!DOCTYPE html>
<html>
<head>
    <title>ECharts Example</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px; height:400px;"></div>
    <button onclick="exportChart()">Export</button>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            legend: {
                data: ['Series 1', 'Series 2'],
                selected: {
                    'Series 1': true,
                    'Series 2': false
                }
            },
            series: [
                { name: 'Series 1', type: 'line', data: [120, 200, 150, 80, 70, 110, 130] },
                { name: 'Series 2', type: 'bar', data: [60, 70, 90, 110, 120, 130, 150], show: false }
            ]
        };
        myChart.setOption(option);

        function exportChart() {
            myChart.getDataURL({
                type: 'png',
                pixelRatio: 2,
                backgroundColor: '#fff',
                legend: {
                    selected: {
                        'Series 1': true,
                        'Series 2': false
                    }
                }
            }).then(dataURL => {
                var link = document.createElement('a');
                link.href = dataURL;
                link.download = 'chart.png';
                link.click();
            });
        }
    </script>
</body>
</html>

通过上述方法，可以有效解决导出图表时图例中系列标签未隐藏的问题。