携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情
封装一个echarts图表保存为图片得方法，前期需求是用标题作为图片文件名，后期又要在下载得图片上加入标题，但是页面渲染时图表上不可以。
简单得方法就是：把原始图表中把title得text 赋空字符串，在点击下载按钮调用时，将它的值改变。注意：记得下载后清空。
// 保存为图片时添加标题
title: {
text: '',
show: true,
textStyle: {
fontSize: 'normal',
fontStyle: 'normal',
fontWeight: 'normal'
},
left: '50%',
top: '0'
},
saveImg(idName, chartTitleName) {
var idName = echarts.init(document.getElementById(idName))
// 获取当前图表title中得text内容
// var text = idName.getOption().title[0].text
// console.log('当前title内容', text)
idName.setOption({
title: {
text: chartTitleName
}
})
// console.log('修改后得option内容', idName)
// 加一个延迟渲染，确保下载得是修改后得图片
setTimeout(function () {
var picInfo = idName.getDataURL({
type: 'png',
pixelRatio: 1.5, //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
backgroundColor: '#fff'
}) //获取到的是一串base64信息
const elink = document.createElement('a')
// 下载后得图片名称
elink.download = chartTitleName
elink.style.display = 'none'
elink.href = picInfo
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
// 下载成功后清空title 避免在页面中显示
idName.setOption({
title: {
text: ''
}
})
}, 400)
}
.getOption()获取图表相关属性内容，.setOption({}) 更改图表相关属性内容
