学习使用JS实现Echarts的图表保存为图片功能：saveAsImage和getDataURL

news2024/12/25 10:32:22

学习使用JS实现Echarts的图表保存为图片功能

- 接口getDataURL
- - 实现思路

需求分析

实际项目开发过程中经常会有图表展示功能，同时为了满足用户需要，会附带着图表导出功能，主要形式就是保存为图片。在Echarts中本身就提供这种配置项，使用起来简单方便。但是，需求分析师要求必须有一个图表导出功能按钮，以便与整体样式风格相搭，对于这种要求。。。
开发准备

通过查看Echarts网站，可以很快找到其自带的toolbox配置项，在feature里面有一个saveAsImage,效果大概是下图：

在这里插入图片描述
关键代码

option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {}
                }
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };

接口getDataURL

另外Echarts提供一个接口getDataURL,通过它可以导出图表图片，返回一个 base64 的 URL

实现思路

通过getDataURL()获取图片的base64编码字符；
字符解码，并转换成Blob对象；
通过Blob对象创建URL对象；
利用触发下载操作；

具体代码：

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
    <title>JS实现Echarts的图表保存为图片功能</title>
</head>

<body style="height: 100%; margin: 0">
    <input type="button" value="导出" onclick="saveAsImage()"/>
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            // toolbox: {
            //     show: true,
            //     feature: {
            //         saveAsImage: {}
            //     }
            // },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
        console.log(myChart.getDataURL());
        //base64转blob
        function base64ToBlob(code) {
            let parts = code.split(';base64,');
            let contentType = parts[0].split(':')[1];
            let raw = window.atob(parts[1]);
            let rawLength = raw.length;

            let uInt8Array = new Uint8Array(rawLength);

            for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], { type: contentType });
        }
        function saveAsImage() {
            let content = myChart.getDataURL();

            let aLink = document.createElement('a');
            let blob = this.base64ToBlob(content);

            let evt = document.createEvent("HTMLEvents");
            evt.initEvent("click", true, true);
            aLink.download = "line.png";
            aLink.href = URL.createObjectURL(blob);
            aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
        }
    </script>
</body>

</html>