ECharts 图表导出与分享
ECharts 是一个强大的数据可视化库，除了在网页上展示交互式图表外，有时我们也需要将这些图表导出为图片或 PDF，以便分享或报告使用。本文将介绍如何将 ECharts 图表导出为图片、PDF 等格式，以及如何在社交媒体或网页中分享这些图表。
一、图表导出
1. 导出为图片
ECharts 提供了简单的方法来将图表导出为图片。可以通过 getDataURL 方法获取图表的图片 URL，并将其下载到本地。
示例代码
// 创建 ECharts 实例
const myChart = echarts.init(document.getElementById('main'));
// 设置图表的基本配置
const option = {
title: {
text: 'ECharts 导出示例',
},
tooltip: {},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E'],
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10],
}],
};
// 使用设置的配置项和数据显示图表
myChart.setOption(option);
// 导出图表为图片
document.getElementById('exportBtn').onclick = function () {
const url = myChart.getDataURL({
type: 'png', // 图片格式，可以是 png 或 jpeg
pixelRatio: 2, // 像素比例
backgroundColor: '#fff', // 背景色
});
const link = document.createElement('a');
link.href = url;
link.download = 'echarts-chart.png'; // 下载文件名
link.click();
};
说明
getDataURL方法可以接收一个对象参数，配置导出的图片类型、像素比例和背景颜色等。- 使用
<a>标签创建下载链接，触发下载操作。
2. 导出为 PDF
虽然 ECharts 本身不直接支持导出为 PDF，但可以借助其他库（如 jsPDF）将图表导出为 PDF 文件。
示例代码
// 引入 jsPDF
const { jsPDF } = window.jspdf;
// 导出图表为 PDF
document.getElementById('exportPdfBtn').onclick = function () {
const pdf = new jsPDF('l', 'mm', 'a4'); // 创建 PDF 对象
const imgData = myChart.getDataURL({
type: 'png',
pixelRatio: 2,
});
pdf.addImage(imgData, 'PNG', 10, 10, 280, 150); // 添加图表图片到 PDF
pdf.save('echarts-chart.pdf'); // 下载 PDF 文件
};
说明
- 需要确保在项目中引入
jsPDF库。 - 使用
addImage方法将 ECharts 图表的图片添加到 PDF，并保存为文件。
二、图表分享
1. 分享到社交媒体
在网页中，可以通过生成分享链接或分享按钮将图表分享到社交媒体。
示例代码
<!-- 分享按钮 -->
<button id="shareBtn">分享图表</button>
document.getElementById('shareBtn').onclick = function () {
const url = myChart.getDataURL({
type: 'png',
pixelRatio: 2,
});
// 生成分享链接，假设使用微信分享
const shareUrl = `https://www.example.com/share?image=${encodeURIComponent(url)}`;
// 在此处可以使用微信JS-SDK等分享SDK实现分享
window.open(shareUrl, '_blank'); // 打开分享链接
};
2. 在网页中嵌入图表
可以通过直接嵌入图表到网页中，来分享图表。
示例代码
<!-- 其他网页中引用 ECharts 图表 -->
<div id="sharedChart" style="width: 600px; height: 400px;"></div>
<script>
// 初始化 ECharts 图表
const sharedChart = echarts.init(document.getElementById('sharedChart'));
sharedChart.setOption(option); // 使用相同的配置
</script>
三、综合示例
下面是一个完整的示例代码，包括图表的创建、导出以及分享功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 导出与分享示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
<button id="exportBtn">导出为图片</button>
<button id="exportPdfBtn">导出为 PDF</button>
<button id="shareBtn">分享图表</button>
<script>
const myChart = echarts.init(document.getElementById('main'));
const option = {
title: {
text: 'ECharts 导出与分享示例',
},
tooltip: {},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E'],
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10],
}],
};
myChart.setOption(option);
document.getElementById('exportBtn').onclick = function () {
const url = myChart.getDataURL({
type: 'png',
pixelRatio: 2,
backgroundColor: '#fff',
});
const link = document.createElement('a');
link.href = url;
link.download = 'echarts-chart.png';
link.click();
};
document.getElementById('exportPdfBtn').onclick = function () {
const pdf = new jsPDF('l', 'mm', 'a4');
const imgData = myChart.getDataURL({
type: 'png',
pixelRatio: 2,
});
pdf.addImage(imgData, 'PNG', 10, 10, 280, 150);
pdf.save('echarts-chart.pdf');
};
document.getElementById('shareBtn').onclick = function () {
const url = myChart.getDataURL({
type: 'png',
pixelRatio: 2,
});
const shareUrl = `https://www.example.com/share?image=${encodeURIComponent(url)}`;
window.open(shareUrl, '_blank');
};
</script>
</body>
</html>
四、总结
本文介绍了如何将 ECharts 图表导出为图片和 PDF，并分享至社交媒体或嵌入网页中。通过简单的代码示例，您可以轻松实现这些功能，为您的数据可视化提供更多的灵活性与分享可能。希望这些内容能够帮助您更好地利用 ECharts 进行数据展示与分享！