ECharts保存背景透明PNG图片

  |   0 评论   |   185 浏览

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 不行,背景无法透明。我查了下官方说明,应该是为空的时候取的白色,如下。

image.png

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

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

导出的图表图片是一个 base64 的 URL,可以设置为Imagesrc

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": ""
                }
            ]
        }
    ]
}

评论

发表评论