echarts图表导出图片在导出的图片上添加文字
时间: 2025-06-27 11:16:49 浏览: 7
### 实现 ECharts 图表导出并添加文字
为了实现在 ECharts 导出的图片中添加文字,可以采用两种主要方法:
#### 方法一:Canvas 上绘制文本
通过 JavaScript 的 Canvas API,在导出之前先获取到 canvas 对象,并在其上面绘制所需的文字。
```javascript
function downloadWithText() {
let mycanvas = document.getElementsByTagName('canvas')[0];
// 获取上下文对象用于绘图操作
const ctx = mycanvas.getContext('2d');
// 设置字体样式
ctx.font = 'bold 18px Arial';
// 填充颜色
ctx.fillStyle = '#FF0000';
// 绘制文本 (text, x, y)
ctx.fillText('这是附加的文字', 50, 50);
// 将画布转换成 base64 编码的数据 URL 形式的图像数据
let image = mycanvas.toDataURL("image/png");
// 创建 a 标签实现文件下载功能
let $a = document.createElement('a');
$a.setAttribute("href", image);
$a.setAttribute("download", "echarts_with_text.png");
$a.click();
}
```
这种方法简单易懂,适合于只需要简单的静态文本叠加场景[^1]。
#### 方法二:使用 HTML-to-Image 库
如果需要更复杂的布局控制或支持更多样化的HTML/CSS特性,则可以选择借助 html-to-image 这样的第三方库来完成任务。这种方式允许创建包含富文本和其他复杂结构的内容作为背景层覆盖在原始图表之上再一起截图保存下来。
安装 `html-to-image`:
```bash
npm install --save html-to-image
```
具体应用如下所示:
```javascript
import { toPng } from 'html-to-image';
// ...其他代码...
toPng(document.getElementById('chart-container'), {
filter: function(element) {
return !element.classList.contains('ignore-for-screenshot');
}
}).then(function(dataUrl) {
var link = document.createElement('a');
link.download = 'exported-chart-with-text.png';
link.href = dataUrl;
link.click();
});
```
在此基础上可以在页面内构建一个额外容器放置想要显示的文字说明部分,并确保其位置正好位于目标图形上方即可达到预期效果。
这两种方式都可以有效地满足需求,选择哪一种取决于具体的业务逻辑和个人偏好等因素考虑。
阅读全文
相关推荐















