正文

教你轻松导出echarts图表为PDF：快速转换技巧与案例分析

/0 浏览量
0904

在数据可视化领域，ECharts以其丰富的图表类型和灵活的配置选项，成为了开发者和数据分析师的热门选择。而有时候，我们可能需要将ECharts图表导出为PDF格式，以便于分享或打印。本文将为你介绍如何轻松将ECharts图表导出为PDF，并提供一些实用的技巧和案例分析。

一、ECharts导出为PDF的基本方法

要将ECharts图表导出为PDF，首先需要引入一个叫做html2canvas的库，它可以将网页内容转换为canvas，进而转换为图片，最后再由图片生成PDF。以下是一个简单的示例：

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

// 初始化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);

// 使用html2canvas进行导出
html2canvas(document.getElementById('main')).then(function(canvas) {
    var contentWidth = canvas.width;
    var contentHeight = canvas.height;

    // 一页pdf显示html页面生成的canvas内容，可设置每页允许的最大高度
    var pageHeight = contentWidth / 595 * 841;
    // 未生成的内容的高度
    var leftHeight = contentHeight;
    // 页面偏移
    var position = 0;

    // html2canvas只支持在canvas上绘制一次，如果出现上面的问题，可以通过重新渲染canvas来解决这个问题
    var pdf = new jsPDF({
        orientation: 'portrait', // 纵向
        unit: 'mm', // 单位
        format: [595, 841] // A4大小
    });

    // 可以使用this.addImage()方法向pdf中添加图片
    while(leftHeight > 0) {
        // 页面的实际高度
        var pageContentHeight = leftHeight < pageHeight ? leftHeight : pageHeight;
        // 获取这个高度对应的canvas内容
        var imgData = canvas.toDataURL('image/jpeg', 1.0);
        pdf.addImage(imgData, 'JPEG', 15, position, contentWidth, pageContentHeight);
        leftHeight -= pageContentHeight;
        position += pageContentHeight;
    }

    pdf.save('example.pdf');
});

二、快速转换技巧

  1. 调整导出尺寸：通过调整pdf.addImage()方法中的参数，可以控制导出的PDF尺寸。例如，将format参数改为[841, 595]，可以生成横向的PDF文档。

  2. 优化图片质量：在canvas.toDataURL()方法中，可以通过调整第二个参数的值来控制图片质量。值越小，图片质量越低，但文件大小也越小。

  3. 异步加载：由于html2canvas和jsPDF都是异步操作，建议在将图表添加到DOM中后，再进行导出操作，以确保图表已经渲染完成。

三、案例分析

以下是一个使用ECharts绘制饼图，并将其导出为PDF的案例分析：

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

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '饼图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: '50%',
        data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
        ],
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

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

// 使用html2canvas进行导出
html2canvas(document.getElementById('main')).then(function(canvas) {
    var pdf = new jsPDF({
        orientation: 'portrait',
        unit: 'mm',
        format: [595, 841]
    });

    pdf.addImage(canvas.toDataURL('image/jpeg', 1.0), 'JPEG', 15, 15, 560, 400);
    pdf.save('example.pdf');
});

通过以上示例，我们可以轻松地将ECharts图表导出为PDF格式。在实际应用中，可以根据需求调整图表样式、导出尺寸和图片质量等参数，以获得最佳的导出效果。

-- 展开阅读全文 --