正文

学会ECharts图表导出PDF，轻松实现数据可视化成果分享

/0 浏览量
0815

在数据可视化的世界里，ECharts无疑是一款备受欢迎的图表库。它可以帮助我们轻松地将数据转换成直观的图表，从而更好地理解数据背后的信息。然而，有时候我们不仅需要展示这些图表，还希望将它们保存下来，以便于分享和后续的查阅。今天，我们就来学习如何使用ECharts将图表导出为PDF格式，让你的数据可视化成果更加生动。

一、ECharts简介

ECharts是由百度团队开发的一个使用JavaScript实现的开源可视化库。它提供了一系列丰富的图表类型，包括折线图、柱状图、饼图、地图等，可以满足大部分数据可视化的需求。ECharts不仅易于使用，而且性能优越，支持多种交互操作。

二、导出PDF的基本原理

ECharts本身并不支持直接导出为PDF格式。因此，我们需要借助其他工具来实现这一功能。常见的方案包括：

  1. 使用ECharts的print功能：ECharts提供了print功能，可以将图表打印到指定的DOM元素中。然后，我们可以使用浏览器的打印功能，将打印内容导出为PDF。
  2. 使用第三方库：如html2canvas和jsPDF等，这些库可以将HTML内容转换为canvas，再将canvas内容导出为PDF。

三、使用ECharts的print功能导出PDF

以下是一个简单的示例，展示如何使用ECharts的print功能将图表导出为PDF：

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
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);

// 导出PDF
function exportPDF() {
    var canvas = myChart.getDom();
    var printDom = document.createElement('div');
    printDom.appendChild(canvas);
    var printContent = printDom.innerHTML;
    var printWindow = window.open('', 'printWindow');
    printWindow.document.write(printContent);
    printWindow.document.close();
    printWindow.focus();
    printWindow.print();
    printWindow.onafterprint = function() {
        printWindow.close();
    };
}

四、使用第三方库导出PDF

如果你希望更加灵活地控制导出PDF的过程，可以使用第三方库如html2canvas和jsPDF。以下是一个简单的示例：

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    // ... (与上面示例相同)
};

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

// 使用html2canvas和jsPDF导出PDF
function exportPDF() {
    html2canvas(myChart.getDom()).then(function(canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        // 一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89;
        // 未生成的内容的高度
        var leftHeight = contentHeight;
        // 页面的偏移
        var position = 0;
        //html页面生成的canvas放在一个div下，可以通过修改div的样式来定位canvas
        var htmlContent = '<div id="printBody" style="width: ' + contentWidth + 'px; height: ' + leftHeight + 'px;"></div>';
        var pdf = new jsPDF('', 'pt', 'a4');
        while(leftHeight > 0) {
            // html页面生成的canvas在这个div下，调整以下div样式
            var page = pdf.addPage();
            pdf.addImage(canvas.toDataURL('image/jpeg'), 'JPEG', 20, 20, contentWidth, pageHeight);
            leftHeight -= pageHeight;
            position += pageHeight;
            if(leftHeight > 0) {
                //避免添加空白页
                htmlContent += '<div style="width: ' + contentWidth + 'px; min-height: ' + leftHeight + 'px; height: auto;"></div>';
            }
        }
        document.body.innerHTML = htmlContent;
        window.print();
    });
}

五、总结

通过以上学习，我们了解了如何使用ECharts和第三方库将图表导出为PDF格式。这不仅可以帮助我们更好地分享和保存数据可视化成果，还可以让我们的工作更加高效。希望这篇文章能对你有所帮助！

-- 展开阅读全文 --