1.在我的理解是由于echarts下載的圖片不需要展示toolbox操作欄，因此圖表會先將toolbox的dom先隱藏然后將圖表區(qū)域合成一張圖片實現(xiàn)下載

2.如何解決在點擊下載圖標(biāo)時toolbox不隱藏又能下載成功呢？答案是替換原有的下載功能

toolbox: {//工具欄
          right: '20',
          y: '20',
          itemGap: 14,
          emphasis: { iconStyle: { color: '#20499E', borderColor: '#20499E', textPadding: 6, } },
          itemSize: 15,
          feature: {
            dataView: { show: false, readOnly: false },//數(shù)據(jù)視圖
            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中先實現(xiàn)一個自定義的mySave下載圖標(biāo)

//生成不帶操作欄的url
option.toolbox[0].show = false;
dom.setOption(option, true);
this.chartImgUrl = dom.getDataURL({
    pixelRatio: 1,//放大倍數(shù)，如果設(shè)置2倍并且存在背景圖時背景圖也要設(shè)置寬高為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)

?先設(shè)置toolbox隱藏獲取到不帶toolbox的url連接，再修改原有的click事件文章來源地址http://www.zghlxwxcb.cn/news/detail-606047.html

到了這里，關(guān)于echarts圖表下載時toolbox會先消失再顯示的優(yōu)化的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！