正文

教你一招：轻松将echarts图表导出为PDF，不再为打印和分享烦恼

/0 浏览量
1105

在数据可视化领域，ECharts 是一款非常受欢迎的图表库，它可以帮助我们轻松地创建各种图表，如柱状图、折线图、饼图等。然而，在使用 ECharts 制作图表时，我们可能会遇到需要将图表导出为 PDF 格式以便打印或分享的情况。今天，就让我来教大家一招，轻松将 ECharts 图表导出为 PDF。

前提条件

在开始之前，请确保你的项目中已经引入了 ECharts 库。以下是 ECharts 的基本引入方式：

<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

步骤一：创建 ECharts 实例

首先，我们需要在 HTML 中创建一个用于渲染图表的容器。然后，使用 ECharts 初始化一个图表实例。

<!-- 创建图表容器 -->
<div id="main" style="width: 600px;height:400px;"></div>

<!-- 初始化 ECharts 实例 -->
<script>
  var myChart = echarts.init(document.getElementById('main'));
</script>

步骤二：配置图表

接下来，配置图表的选项。这里以一个简单的柱状图为例：

// 配置图表选项
var option = {
  title: {
    text: 'ECharts 柱状图示例'
  },
  tooltip: {},
  legend: {
    data:['销量']
  },
  xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

步骤三：使用 html2canvas 和 jsPDF 导出为 PDF

为了将 ECharts 图表导出为 PDF，我们需要借助 html2canvas 和 jsPDF 这两个库。以下是具体的实现步骤：

  1. 引入 html2canvas 和 jsPDF 库：
<!-- 引入 html2canvas -->
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

<!-- 引入 jsPDF -->
<script src="https://cdn.bootcdn.net/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
  1. 在 ECharts 实例创建后，获取图表容器的 HTML 结构，并使用 html2canvas 将其转换为图片。
// 将图表转换为图片
html2canvas(document.getElementById('main')).then(function(canvas) {
  // 将图片转换为DataURL
  var dataURL = canvas.toDataURL('image/png');
  // 创建 PDF 文档
  var pdf = new jspdf.jsPDF();
  // 将图片添加到 PDF 文档中
  pdf.addImage(dataURL, 'PNG', 0, 0);
  // 保存 PDF 文档
  pdf.save('ECharts 图表.pdf');
});

总结

通过以上步骤，我们就可以轻松地将 ECharts 图表导出为 PDF 格式。这样，你就可以方便地打印或分享了。希望这篇文章能帮助你解决困扰，祝你使用愉快！

-- 展开阅读全文 --