echarts图表自定义按钮导出和echarts内置导出设置

自定义按钮导出

var option = {
	    title : {
	        text: '一周气温变化',
	        subtext: '纯属虚构'
	    },
	    tooltip : {
	        trigger: 'axis'
	    },
	    legend: {
	        data:['最高气温','最低气温']
	    },
	    toolbox: {
	        show : true,
	        feature : {
	            mark : {show: true},
	            dataView : {show: true, readOnly: false},
	            magicType : {show: true, type: ['line', 'bar']},
	            restore : {show: true},
	            saveAsImage : {show: true}
	        }
	    },
	    calculable : true,
	    xAxis : [
	        {
	            type : 'category',
	            boundaryGap : false,
	            data : ['周一','周二','周三','周四','周五','周六','周日']
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value',
	            axisLabel : {
	                formatter: '{value} °C'
	            }
	        }
	    ],
	    series : [
	        {
	            name:'最高气温',
	            type:'line',
	            data:[11, 11, 15, 13, 12, 13, 10],
	            markPoint : {
	                data : [
	                    {type : 'max', name: '最大值'},
	                    {type : 'min', name: '最小值'}
	                ]
	            },
	            markLine : {
	                data : [
	                    {type : 'average', name: '平均值'}
	                ]
	            }
	        },
	        {
	            name:'最低气温',
	            type:'line',
	            data:[1, -2, 2, 5, 3, 2, 0],
	            markPoint : {
	                data : [
	                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
	                ]
	            },
	            markLine : {
	                data : [
	                    {type : 'average', name : '平均值'}
	                ]
	            }
	        }
	    ]
	};
</script>
<script type="text/javascript">
$(document).ready(function() {
	var myChart = echarts.init(document.getElementById('test'));
    myChart.setOption(option);
    $("#button").click(function() {
    	var i = myChart.getDataURL({
    		type:'png',
    		backgroundColor:'white'
    		// 导出的图片分辨率比例，默认为 1。
    		//pixelRatio: number,
    	});
    	$(this).attr("href",i);
    	$(this).attr("download","test.png");
    });
});

第二种echarts 内置api导出设置

 // 指定图表的配置项和数据
        var option = {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          grid: {
            top: '10%',
          },
          calculable: true,
       
           toolbox: {
             id:'pie-chart',
	             feature: {
		               saveAsImage: {
				                 type: 'jpeg',//	设置图片格式 png或者'jpeg
				                 name: '一周气温变化',
				                 backgroundColor: '#FFF',
				                 excludeComponents: ['toolbox'],
				                 show: true,
				                 title: '保存图片',
				                 // icon: ...,
				               }
		           	  }
	           },
          series: [{
            name: '',
            center: ['50%', '50%'],
            type: 'pie',
            radius: [0, '55%'],
            selectedMode: 'single',
            selectedOffset: 20,
            hoverAnimation: true,
            labelLine: { // 标示线设置长度
              normal: {
                length: 160,
                length: 80,
                lineStyle: {
                  width: 2
                }
              },

            },
            label: {
              normal: {
                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}\n共{c}件,{per|占比{d}%}  ',
                borderRadius: 4,
                padding: [0, 7],

                rich: {
                  a: {
                    color: '#999',
                    lineHeight: 33,
                    align: 'center'
                  },
                  hr: {
                    borderColor: '#aaa',
                    width: '100%',
                    height: 0
                  },
                  b: {
                    fontSize: 16,
                    fontWeight: 600,
                    lineHeight: 33
                  },
                  per: {
                    padding: [1, 4],
                    borderRadius: 2
                  }
                }
              }
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  var colors = ['#5992F3', '#554BFB', '#B14BFD', '#FD9C34', '#DF4442', '#BC3B45', '#DB3D6E', '#28BF7E'];
                  return colors[params.dataIndex]
                }
              }
            },
            data: data
          }]
        };

链接：echarts 导出配置项