前端开发必备技能知识笔记-Echarts图表的导出

Echarts的工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。但是如果我要自定义按钮实现导出图表的功能呢，如果用工具栏就不是很好满足需求。

浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。
ECharts 从初始一直使用 Canvas 绘制图表。而 ECharts v4.0 发布了 SVG 渲染器，从而提供了一种新的选择。只须在初始化一个图表实例时，设置 renderer 参数 为 'canvas' 或 'svg' 即可指定渲染器，比较方便。

由此可见，我们用Echarts生成的是Canvas或者是SVG，所以Echarts工具栏导出图片功能的原理就是下载Canvas,所以只要获得Canvas的DOM对象，然后直接下载就行。

    /*
     * @author 花姐夫
     * @date 2022/2/17 14:11
     * @param canvas：canvas的DOM对象
     * @param fileName：导出的图片的名称
     * @param imageType：导出图片的类型 png/jpg
     */
    exportChart(canvas, fileName = '导出', imageType = 'png') {
        if (canvas) {
            fileName = `${fileName}.${imageType}`;
            canvas.toBlob((blob) => {
                const rUrl = window.URL.createObjectURL(blob);
                const link = document.createElement('a'); // 创建a标签
                link.href = rUrl;
                link.download = fileName; // 重命名文件
                link.click();
                URL.revokeObjectURL(rUrl); // 释放内存

                this.$notification.success({ message: `导出“${fileName}”`, description: '' });
            });
        }
    }

效果如下：

Echarts图表

导出的图片