Echarts出图必备-秘传图表导出宝典！这几种方式你必须知道！

2023-10-15 21:18:08

Echarts 图表导出图像指南：探索三种简单方法

Echarts 是一个功能强大的数据可视化库，因其创建交互式和引人注目的图表而广受欢迎。除了其核心特性外，Echarts 还提供导出图表为图像的能力，让你可以轻松地保存和分享你的可视化结果。

在本文中，我们将深入了解三种将 Echarts 图表导出为图像的简单方法：

1. 使用 Echarts API

Echarts 提供了一个简单的 API，可让你轻松地导出图表为图像。该 API 提供对导出图像格式、质量和尺寸的完全控制。

// 创建 Echarts 实例
var myChart = echarts.init(document.getElementById('main'));

// 设置图表选项
myChart.setOption(option);

// 导出图表为 PNG 格式
myChart.exportImage({
  type: 'png',
  quality: 1,
  width: 500,
  height: 500
});

2. 使用 Echarts 扩展插件

Echarts 社区提供了各种扩展插件来增强核心功能。其中一个这样的插件是 echarts-extension-canvas，它允许你将图表导出为图像并提供对图像设置的更多控制。

// 导入扩展插件
import echarts from 'echarts';
import CanvasExtension from 'echarts-extension-canvas';
echarts.use(CanvasExtension);

// 创建 Echarts 实例
var myChart = echarts.init(document.getElementById('main'));

// 设置图表选项
myChart.setOption(option);

// 导出图表为 PNG 格式
myChart.exportImage({
  type: 'png',
  quality: 1,
  width: 500,
  height: 500
});

3. 使用第三方库

除了 Echarts API 和扩展插件外，你还可以使用第三方库来导出 Echarts 图表为图像。一个流行的选择是 html2canvas，它允许你将任何 HTML 元素（包括 Echarts 图表）转换为图像。

// 导入第三方库
import echarts from 'echarts';
import html2canvas from 'html2canvas';

// 创建 Echarts 实例
var myChart = echarts.init(document.getElementById('main'));

// 设置图表选项
myChart.setOption(option);

// 导出图表为 PNG 格式
html2canvas(document.getElementById('main')).then(function(canvas) {
  var img = canvas.toDataURL('image/png');
  window.location.href = img;
});