echarts自定义保存图片方法

echarts自定义导出图片

需求是希望在导出柱状图的时候在顶部展示label,但是图表本身不展示label。echarts自带的saveAsImage没有关于数据项方面的配置。于是使用自定义的导出图片方法。
第一步：在toolbox中加入自定义的工具方法。

	myTool1: {
              show: true,
              title: '保存图片',
              icon: 'path://M939.6 655.5c-12.2 0-20.4 8.1-20.4 20.4v122.2c0 22.4-16.3 40.7-40.7 40.7h-733c-22.4 0-40.7-18.3-40.7-40.7V675.9c0-12.2-8.1-20.4-20.4-20.4S64 663.7 64 675.9v122.2c0 44.8 34.6 81.5 81.5 81.5h733.1c44.8 0 81.5-36.7 81.5-81.5V675.9c-0.1-12.2-8.2-20.4-20.5-20.4zM455 702.4c16.3 16.3 36.7 24.4 57 24.4 20.4 0 42.8-8.1 57-24.4l205.7-205.7c8.1-8.1 8.1-20.4 0-28.5s-20.4-8.1-28.5 0L540.5 673.8c-2 2-6.1 4.1-8.1 6.1V105.7c0-12.2-8.1-20.4-20.4-20.4-12.2 0-20.4 8.1-20.4 20.4V680c-2-2-6.1-4.1-8.1-6.1L277.8 468.2c-8.1-8.1-20.4-8.1-28.5 0-8.1 8.1-8.1 20.4 0 28.5L455 702.4z',
              onclick: function (){
                this.exportImg(chart,option);
              }
            },

第二步：自定义导出图片方法

	exportImg:function(chart,option){
	  option.series.map(function(o){
		 o.label.show = true
	   });
	   chart.setOption(option);
      var picInfo=chart.getDataURL({
		 type: 'png',
		 pixelRatio: 1.5,  //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
		 backgroundColor: '#fff',
		 excludeComponents:['toolbox'] //忽略toolbox
		});//获取到的是一串base64信息
      var elink = document.createElement('a')
	  elink.download = 'chart';
	  elink.style.display = 'none';
	  elink.href = picInfo;
	  document.body.appendChild(elink);
	  elink.click();
	  URL.revokeObjectURL(elink.href); // 释放URL 对象
	  document.body.removeChild(elink);
	  option.series.map(function(o){
		 o.label.show = false
	  })
	  chart.setOption(option)
	},

效果展示：
1：图表本身

2：导出效果：