echarts热力背景图_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