用ECharts的getDataURL方法自动下载Chart图到服务器
发表于:2021-08-26 16:36:45浏览:4328次
最近做的项目需要结合ECharts生成的图表生成海报分享,海报量有数据分析图,如折线图,柱状图,散点图等。综合考虑之后,选择了目前已经很成熟的也很流行的ECharts库出图,然后自动下载到服务器,再合成海报。
ECharts一个纯 Javascript 的图表库,它提供了绘制各种图形的方法方法,几乎囊括了所有的二维图形,用起来也很是方便,还提供了图片下载的功能。这里我主要说的是图片自动下载到服务器。
技术栈:ECharts+ThinkPHP
首先,我们先在某页面生成想要的chart图。
js代码生成chart图:
然后用getDataURL得到图片信息,注意,getDataURL仍然要放在setOption方法生成一个简单的图形之后,现在得到的picInfo是一串base64信息。
ajax请求后端生成图片方法:
然后设法将得到的图像信息picInfo用Ajax传递到后台处理,这用的是thinkphp框架,因此,以thinkphp处理为例:
新建一个方法,接收Ajax传递到后台的信息,将base64转化为图片保存。先判断picInfo是否存在,存在则传递到后台,代码如下:
php接受数据并处理生成图片:
到这里,测试一下成功保存图片到自己想要的位置了。另外要注意的是,如果看到一个空的坐标轴,那么可能是动画效果产生的后果,animation决定是否开启动画,关闭即可,在echart的option中加入:
完美,得到的图形可以正确显示了,最后,来张图秀一下。