Echarts自定义工具栏的总结

本文是对Echarts自定义工具栏的总结。

1.图表刷新

 function reflowChart(id) {
       var mychart = echarts.init(document.getElementById(id));
       mychart.resize();
    }

2.导出图片

通过定义的getDataURL()方法获取到下载图片 的base64 的 URL，难点在与base64转图片，找了好多参考文档尝试终于解决了。

 function exportChart(id,format) {
         var mychart = echarts.init(document.getElementById(id));
         var img = new Image();
         if (format == "png") {
             img.src = mychart.getDataURL({
                 type: 'png'
             });//获取图片url
         } else if (format == "jpg") {
             img.src = mychart.getDataURL({
                 type: 'jpeg',
                 backgroundColor: '#fff'
             });
         }
         downloadFile('chart', img.src);
    }
    //下载
    function downloadFile(fileName, content) {
        var aLink = document.createElement('a');
        var blob = base64ToBlob(content); //64位转图片
        aLink.download = fileName;
        aLink.href = content;
        aLink.click();
    }

base64转图片的代码：

//base64编码转图片，方法一
    function base64ToBlob(urlData) {
        var parts = urlData.split(';base64,');
        var contentType = parts[0].split(':')[1];
        var raw = window.atob(parts[1]); //解码
        var rawLength = raw.length;

        var uInt8Array = new Uint8Array(rawLength);

        for (var i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {
            type: contentType
        });
    }
    //base64编码转图片，方法二
    function base64ToBlob(urlData) {
        var arr = urlData.split(','),mine = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n=bstr.length,uInt8Array = new Uint8Array(n);
        while (n--) {
            uInt8Array[n] = bstr.charCodeAt(n);
        }
        return new Blob([uInt8Array], {
            type: contentType
        });
    }