echart保存图片的两种实现方式

1. echart本身自带有toolbox的saveAsImage用以实现保存图片，具体的option设置如下：

var option = {
        title: {
            text: data.name,
            x: 'center',
            y: '83%',
            textStyle: {color: "#333"}
        },
        color:['#5f67ea', '#f97363', '#008aff','#ff9000', '#00d4c3', '#00b1bc'],
        legend: {
            type: 'scroll',
            icon: 'circle',
            orient: 'vertical',
            x: 'center',
            y:'top',
            itemWidth: 5,
            itemHeight: 5,
            align: 'left',
            itemGap: 5,
            textStyle: {
                fontSize:12,
                color: '#222'
            },
            data: data.legend
        },
        tooltip: {
            trigger: 'item',
            formatter: "{b}<br/>{c}({d}%)"
        },
        toolbox: {show: 1, x: 'center', y: 'bottom', feature: {saveAsImage: {show: false, title: '保存截图', type: 'png'}}},
        series: [{
            name: data.name,
            type: 'pie',
            radius: ['26%','50%'],
            center: ['50%', '57%'],
            data: data.data,
            itemStyle: {
                normal: {
                    label: {show: true, formatter: "{d}%"},
                    labelLine: {show: true}
                }
            },
            labelLine:{
                normal:{
                    length:5
                }
            },
        }]
    }
    var countPieDwlx = echarts.init(document.getElementById("countPieDwlx"));
    countPieDwlx.setOption(option,true);

2. 但是由于echart自带的图片下载我没有找到如何将下载图标去掉，直接使用自定义图片用以实现图标保存，因此我放弃了echart本身自带的图片保存方法，自定义了一个span添加的点击事件，实现将echart进行图片保存。

html定义代码段

<div class="pie-body-div">
   <div id="countPieDwlx" class="pie-content"></div>
   <span class="pie-save-span" onclick="savePieImg('dwlx')">保存截图</span>
</div>

echart初始化部分同【1】方法相同，只是去掉echart自带的toolbox部分就可以了，下面为自定义的图片保存方法，使用起来比较灵活。

function savePieImg(type) {
  var picInfo= countPieDwlx.getDataURL({
       type: 'png',
       pixelRatio: 1.5,  //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
       backgroundColor: '#fff'
   });//获取到的是一串base64信息
   const elink = document.createElement('a');
   elink.download = "统计分析";
   elink.style.display = 'none';
   elink.href = picInfo;
   document.body.appendChild(elink);
   elink.click();
   URL.revokeObjectURL(elink.href); // 释放URL 对象
   document.body.removeChild(elink)
}