ECharts关联图表saveAsImage仅下载单张图表的实现方法

问题场景 #

将两个ECharts图表通过group关联后，点击任意一个图表的saveAsImage按钮会同时下载两张图表，希望保留分组的联动效果（如图例同步选择、数据缩放同步）的同时，恢复为仅下载当前点击的单张图表。

原代码示例：

const chart1 = echarts.init(document.getElementById('chart1'));
const option1 = {
  title: {
    text: 'Chart 1',
    left: 'center',
  },
  grid: {
    show: true,
    top: 30,
    backgroundColor: '#F5F5F5',
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Grapes', 'Bananas', 'Apples'],
    bottom: 0,
  },
  xAxis: {
    data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
  },
  yAxis: {},
  series: [
    {
      name: 'Apples',
      type: 'line',
      data: [10, 35, 20, 13, 12, 18, 41]
    },
    {
      name: 'Bananas',
      type: 'line',
      data: [20, 11, 10, 9, 8, 8, 1]
    }
  ],
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  }
};

const chart2 = echarts.init(document.getElementById('chart2'));
const option2 = {
  title: {
    text: 'Chart 2',
    left: 'center',
  },
  grid: {
    show: true,
    top: 30,
    backgroundColor: '#F5F5F5',
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Grapes', 'Bananas', 'Apples'],
    bottom: 0,
  },
  xAxis: {
    data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
  },
  yAxis: [{}],
  series: [
    {
      name: 'Apples',
      type: 'line',
      data: [25, 5, 17, 11, 33, 32, 2]
    },
    {
      name: 'Bananas',
      type: 'line',
      data: [1, 3, 2, 6, 7, 8, 11]
    }
  ],
  dataZoom: [],
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  }
};

chart1.setOption(option1);
chart2.setOption(option2);
chart1.group = 'group1';
chart2.group = 'group1';
echarts.connect('group1');

解决方案 #

方法1：指定分组同步的事件类型（推荐） #

ECharts的echarts.connect方法支持第二个参数，可指定需要同步的事件类型，默认会同步所有事件（包括saveAsImage的触发）。我们只需保留需要联动的事件，排除saveAsImage相关逻辑即可：

修改最后一行的echarts.connect调用：

// 仅同步图例选择、数据缩放等需要联动的事件，不包含saveAsImage
echarts.connect('group1', {
  link: [
    'legendselectchanged',
    'legendselected',
    'legendunselected',
    'datazoom',
    'datarangeselected',
    'timelinechanged',
    'timelineplaychanged'
  ]
});

配置后，分组图表依然会同步图例选择、数据缩放等操作，但点击saveAsImage时只会下载当前点击的单张图表。

方法2：自定义saveAsImage的点击事件 #

如果需要更灵活的控制（比如定制下载文件名、图片清晰度），可以给每个图表的saveAsImage配置自定义点击回调，直接调用当前图表的getDataURL生成图片并下载，绕过分组同步逻辑：

修改两个图表option中的toolbox.feature.saveAsImage配置（以chart1为例，chart2做相同修改）：

toolbox: {
  feature: {
    saveAsImage: {
      onclick: function() {
        // 获取当前触发点击的图表实例
        const currentChart = this.chart;
        // 生成当前图表的图片链接，可自定义像素比、背景色
        const imgUrl = currentChart.getDataURL({
          pixelRatio: 2,
          backgroundColor: '#ffffff'
        });
        // 创建a标签触发下载
        const downloadLink = document.createElement('a');
        downloadLink.href = imgUrl;
        downloadLink.download = `${currentChart.getOption().title.text}.png`;
        downloadLink.click();
      }
    }
  }
}

这种方式完全自定义了保存图片的行为，不受分组同步的影响，适合有个性化需求的场景。

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