如何在echarts-for-react中导出指定分辨率的饼图？

方案1：直接通过ECharts API生成指定分辨率的导出图（优先推荐） #

不需要额外渲染隐藏图表，利用ECharts原生的getDataURL方法，直接指定导出的宽高和分辨率参数即可生成符合要求的图片。

实现步骤： #

1. 通过ref获取echarts-for-react的实例
2. 调用getDataURL时配置目标宽高（1920x1080），同时可设置背景色和清晰度参数
3. 自行实现下载逻辑，替代默认工具栏的保存按钮（或自定义工具栏按钮事件）

代码示例： #

import React, { useRef } from 'react';
import ReactECharts from 'echarts-for-react';

const PieChart = () => {
  const chartRef = useRef(null);

  // 自定义高分辨率导出函数
  const exportHighResChart = () => {
    const myChart = chartRef.current?.getEchartsInstance();
    if (!myChart) return;

    // 配置导出参数：指定1920x1080尺寸、白色背景、2倍清晰度
    const dataURL = myChart.getDataURL({
      type: 'png',
      width: 1920,
      height: 1080,
      backgroundColor: '#fff',
      pixelRatio: 2
    });

    // 创建下载链接并触发下载
    const link = document.createElement('a');
    link.download = 'high-res-pie-chart.png';
    link.href = dataURL;
    link.click();
  };

  // 饼图配置项
  const chartOption = {
    tooltip: { trigger: 'item' },
    toolbox: {
      feature: {
        // 替换默认保存按钮为自定义导出逻辑
        saveAsImage: {
          onclick: exportHighResChart
        }
      }
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['40%', '70%'],
        data: [
          { value: 1048, name: '搜索引擎' },
          { value: 735, name: '直接访问' },
          { value: 580, name: '邮件营销' },
          { value: 484, name: '联盟广告' },
          { value: 300, name: '视频广告' }
        ]
      }
    ]
  };

  return (
    <ReactECharts ref={chartRef} option={chartOption} />
  );
};

export default PieChart;

方案2：为隐藏图表添加白色背景（临时方案优化） #

如果坚持使用渲染隐藏图表的方式，只需在图表配置或容器样式中设置白色背景，即可解决导出背景透明的问题：

实现方式二选一： #

1. 在echarts配置项中添加背景色：

const hiddenChartOption = {
  ...yourOriginalOption,
  backgroundColor: '#fff' // 直接设置白色背景
};

2. 在隐藏图表的容器样式中设置背景色：

<ReactECharts
  ref={hiddenChartRef}
  option={yourOriginalOption}
  style={{
    width: '1920px',
    height: '1080px',
    position: 'absolute',
    left: '-9999px',
    backgroundColor: '#fff' // 容器设置白色背景
  }}
/>

之后调用getDataURL或getImage方法导出时，图片背景即为白色。

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