1.在我的理解是由于echarts下载的图片不需要展示toolbox操作栏,因此图表会先将toolbox的dom先隐藏然后将图表区域合成一张图片实现下载
2.如何解决在点击下载图标时toolbox不隐藏又能下载成功呢?答案是替换原有的下载功能
toolbox: {//工具栏
right: '20',
y: '20',
itemGap: 14,
emphasis: { iconStyle: { color: '#20499E', borderColor: '#20499E', textPadding: 6, } },
itemSize: 15,
feature: {
dataView: { show: false, readOnly: false },//数据视图
mySave: {
show: true,
title: '下载图片',
icon: 'path://' + 'M0.576923077,8 C0.853065452,8 1.07692308,8.22385763 1.07692308,8.5 L1.076,13 L12.923,13 L12.9230769,8.5 C12.9230769,8.22385763 13.1469345,8 13.4230769,8 L13.5,8 C13.7761424,8 14,8.22385763 14,8.5 L13.999,13 L14,13 L14,14 L0,14 L0,8.5 C-3.38176876e-17,8.22385763 0.223857625,8 0.5,8 L0.576923077,8 Z M7.03846154,0 C7.31460391,-5.07265313e-17 7.53846154,0.223857625 7.53846154,0.5 L7.538,9.668 L10.3639972,6.6707477 C10.559826,6.46292938 10.9000058,6.44187063 11.1238102,6.62371165 C11.3227474,6.78534812 11.3627704,7.05289296 11.2316716,7.2563093 L11.1744644,7.3292523 L7.4052336,11.3292523 C7.21454102,11.5316199 6.89199284,11.5541052 6.67199901,11.3967082 L6.5947664,11.3292523 L2.82553563,7.3292523 C2.62970683,7.12143399 2.65238549,6.80555268 2.87618983,6.62371165 C3.07512702,6.46207518 3.36601525,6.46075459 3.56573788,6.60841409 L3.63600284,6.6707477 L6.461,9.667 L6.46153846,0.5 C6.46153846,0.223857625 6.68539609,2.72771136e-16 6.96153846,0 L7.03846154,0 Z',
iconStyle: {
borderWidth: 0,
color: '#555',
borderColor: '#555'
},
onclick: (e) => {
},
},
},
},
这里再toolbox中先实现一个自定义的mySave下载图标
//生成不带操作栏的url
option.toolbox[0].show = false;
dom.setOption(option, true);
this.chartImgUrl = dom.getDataURL({
pixelRatio: 1,//放大倍数,如果设置2倍并且存在背景图时背景图也要设置宽高为2倍
includeBackground: true,//是否包含背景图
backgroundColor: '#fff'
);
setTimeout(() => {
option.toolbox[0].show = true;
option.toolbox[0].feature.mySave.onclick = (e) => {
const a = document.createElement("a");
a.href = this.chartImgUrl;
a.target = "_blank";
a.download = 'echart.png';
a.style.display = "none";
document.body.append(a);
a.click();
};
dom.setOption(option, true);
dom.resize();
}, 0)
先设置toolbox隐藏获取到不带toolbox的url连接,再修改原有的click事件