我的开源
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方法来获取联动的所有图片。以下为测试效果：
{
"backgroundColor": "rgba(128, 128, 128, 0)",
"title": [
{
"text": "99.2%",
"subtext": "续签率",
"left": "center",
"top": "40%",
"textStyle": {
"color": "#fff",
"fontSize": 30
},
"subtextStyle": {
"color": "#ff",
"fontSize": 20,
"top": "center"
},
"itemGap": -4
},
{
"text": "离职228",
"subtext": "同比下降30.5%",
"left": "center",
"top": "60%",
"textStyle": {
"color": "#fff",
"fontSize": 20
},
"subtextStyle": {
"color": "#ff",
"fontSize": 14,
"top": "center"
},
"itemGap": 4
}
],
"toolbox": {
"show": true,
"orient": "vertical",
"x": "right",
"y": "center",
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": true
},
"magicType": {
"show": false,
"type": [
"line",
"bar",
"stack",
"tiled"
]
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"xAxis": {
"splitLine": {
"show": false
},
"axisLabel": {
"show": false
},
"axisLine": {
"show": false
}
},
"yAxis": {
"splitLine": {
"show": false
},
"axisLabel": {
"show": false
},
"axisLine": {
"show": false
}
},
"series": [
{
"type": "pie",
"radius": [
"0",
"47%"
],
"center": [
"50%",
"50%"
],
"z": 0,
"itemStyle": {
"normal": {
"color": "rgba(47, 69, 84, 1)",
"label": {
"show": false
},
"labelLine": {
"show": false
}
}
},
"label": {
"normal": {
"position": "center"
}
},
"data": [
100
]
},
{
"type": "pie",
"clockWise": true,
"radius": [
"60%",
"55%"
],
"data": [
{
"value": 99.2,
"itemStyle": {
"normal": {
"borderWidth": 10,
"color": "rgba(97, 160, 168, 1)",
"label": {
"show": false
},
"labelLine": {
"show": false
}
}
}
},
{
"name": "gap",
"value": 0.7999999999999972,
"itemStyle": {
"normal": {
"label": {
"show": false
},
"labelLine": {
"show": false
},
"color": "rgba(0, 0, 0, 0)",
"borderColor": "rgba(0, 0, 0, 0)",
"borderWidth": 0
}
}
}
]
},
{
"type": "gauge",
"radius": "67%",
"startAngle": 225,
"endAngle": -134.8,
"z": 4,
"axisTick": {
"show": true,
"lineStyle": {
"width": 2,
"color": "rgba(97, 160, 168, 1)"
}
},
"splitLine": {
"length": 16,
"lineStyle": {
"width": 2,
"color": "rgba(97, 160, 168, 1)"
}
},
"axisLabel": {
"color": "rgba(255,255,255,0)",
"fontSize": 12
},
"pointer": {
"show": false
},
"axisLine": {
"lineStyle": {
"opacity": 0
}
},
"detail": {
"show": false
},
"data": [
{
"value": 0,
"name": ""
}
]
}
]
}