echarts图表下载时toolbox会先消失再显示的优化-Toy模板网

这篇具有很好参考价值的文章主要介绍了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事件文章来源地址https://www.toymoban.com/news/detail-606047.html

到了这里，关于echarts图表下载时toolbox会先消失再显示的优化的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！