ECharts 保存背景透明 PNG 图片

ECharts 前端生成图片后，截图或采用 toolbox 的 saveAsImage 保存的图片存在背景，或为白色背景，下面即为如何保存为背景透明图片的方法。

方法一、可以直接在配置项中将 backgroundColor 设置为 rgba(128, 128, 128, 0)

var option={
    backgroundColor: 'rgba(128, 128, 128, 0)', // saveAsImage背景透明
    title: [],
    toolbox: {
        show: true,
        orient: 'vertical',
        x: 'right',
        y: 'center',
        feature: {
            restore: {
                show: true
            },
            saveAsImage: {
                show: true,
                pixelRatio: 2 // 保存图片的分辨率比例，可以设置为大于 1 的值
            }
        }
    }
}
​

当然，也有说设置 backgroundColor 为空的，backgroundColor: ''，但经过测试，我的 4.2 版本的 ECharts 不行，背景无法透明。我查了下官方说明，应该是为空的时候取的白色，如下。

如果你不想改变图片的背景颜色，比如已经设置了大展展示效果，不想更改暗色背景，也可以使用下面的方法二

方法二、使用 ECharts 实例的方法 getDataURL

导出的图表图片是一个 base64 的 URL，可以设置为 Image 的 src

var src = myChart.getDataURL({
    pixelRatio: 2,  
    backgroundColor:  'rgba(128, 128, 128, 0)'  
});  
​

其中方法 getDataURL 的参数如下：

(opts: {
    type: string, // 导出的格式，可选 png, jpeg
    pixelRatio: number,  // 导出的图片分辨率比例，默认为 1。
    backgroundColor: string,  // 导出的图片背景色，默认使用 option 里的 backgroundColor
    excludeComponents: Array.<string>// 忽略组件的列表，例如要忽略 toolbox 就是 ['toolbox']
})
​

如果有联动图片，也可以使用 getConnectedDataURL 方法来获取联动的所有图片。以下为测试效果：