如何将ECharts导出为图片或PDF文件？

发布于 2023-08-30 11:46:09

要将ECharts导出为图片或PDF文件，可以使用ECharts提供的echarts-gl库中的exportGL方法。以下是将图表导出为图片或PDF文件的步骤：

引入echarts-gl库：在使用ECharts的页面中，引入echarts-gl库。

<script src="https://cdn.jsdelivr.net/npm/echarts@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@latest"></script>

创建一个ECharts实例并配置图表：根据需求创建一个ECharts实例，并配置图表的相关选项。

var myChart = echarts.init(document.getElementById('chart'));
var option = {
  // 图表的配置项
  // ...
};
myChart.setOption(option);

添加导出按钮或触发导出事件：在页面中添加一个按钮或其他元素，用于触发导出操作。

<button onclick="exportChart()">导出图表</button>

编写导出函数：编写一个导出函数，该函数将调用ECharts的exportGL方法，将图表导出为指定的图片或PDF文件。

function exportChart() {
  myChart.exportGL({
    pixelRatio: 2, // 导出的图片或PDF的分辨率，默认为1
    name: 'chart_export', // 导出的文件名，默认为'echarts'
    type: 'png', // 导出文件的类型，可选值为'png'、'jpeg'、'pdf'、'svg'
    backgroundColor: '#fff' // 导出的图表的背景色，默认为透明
  });
}

完整示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ECharts示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl@latest"></script>
  </head>
  <body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <button onclick="exportChart()">导出图表</button>
    <script>
      var myChart = echarts.init(document.getElementById('chart'));

      var option = {
        // 图表的配置项
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'bar'
        }]
      };

      myChart.setOption(option);

      function exportChart() {
        myChart.exportGL({
          pixelRatio: 2,
          name: 'chart_export',
          type: 'png',
          backgroundColor: '#fff'
        });
      }
    </script>
  </body>
</html>

以上代码中，我们通过添加一个按钮来触发导出操作，然后编写了exportChart函数，在函数中调用myChart.exportGL()方法来导出图表。可以通过修改相关参数来控制导出文件的分辨率、文件名、文件类型以及背景色。

在浏览器中运行该示例，点击“导出图表”按钮后，图表将被导出为指定类型的图片或PDF文件。