ECharts导出图片

好多年没碰过前端了,最近要弄一些前端的东西(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、如果生成的图片中使用了图片链接,可以使用定时器去生成

参考:
vue使用echarts导出动态生成图片信息缺失

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注