好多年没碰过前端了，最近要弄一些前端的东西(H5生成长图)，甚是反感。然鹅，当我了解到ECharts的时候，被百度这个开源的图形库深深折服了，瞬间就有了动力。
手册比较详尽，一时间没有翻到这个功能。这里简单总结下用ECharts导出图片的功能。
注: 这里是在页面加载后自动导出，你也可以通过点击按钮事件来触发导出。
0、在官网下载入门示例，下载地址
1、在示例代码的基础上，增加3行代码即可, 用的原生的JS, 不需要额外引入其他内容。
// 增加隐藏域
<img id="img" src="" hidden="hidden">
// 获取echarts图的base64编码，为png格式。同方法myChart.getConnectedDataURL()
var picBase64Info = myChart.getDataURL();
// 把base64编码的图片赋值给img标签，注意使用a标签效果出不来<a id="pic" href="">a</a>
document.getElementById("img").src = picBase64Info;
2、完整例子
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<!-- <a id="pic" href="">a</a> -->
<!-- <img id="img" src="" hidden="hidden"> -->
<img id="img" src="">
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}],
animation: false
};;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
// 获取echarts图的base64编码，为png格式。同方法myChart.getConnectedDataURL()
var picBase64Info = myChart.getDataURL();
// document.getElementById("pic").href = picBase64Info;
document.getElementById("img").src = picBase64Info;
</script>
</body>
</html>
3、以上代码保持到本地，用浏览器打开，即可看到导出的图。
4、注意
4.1、导出的图中图片不完整，需要把option中animation设置为false
4.2、如果生成的图片中使用了图片链接，可以使用定时器去生成