echarts图表下载时toolbox会先消失再显示的优化

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事件

你可能感兴趣的:(echarts,前端,javascript)