编程

当前位置:澳门新莆京娱乐官网 > 编程 > ECharts绘制的图形保存为图片

ECharts绘制的图形保存为图片

来源:http://www.drgigabytes.com 作者:澳门新莆京娱乐官网 时间:2020-01-31 20:49

最近的项目需要导出文件,导出的文件里有数据分析图,如折线图,柱状图,散点图等。综合考虑之后,我选择了目前已经很成熟的也很流行的ECharts库。

ECharts一个纯 Javascript 的图表库,它提供了绘制各种图形的方法方法,几乎囊括了所有的二维图形,用起来也很是方便。还提供了图片下载的功能。这里我们主要说的是图片下载。下面是我找到的一些方法总结以及它们的适用情况。

因为是自带的,不需要怎么处理,直接用就好。示例:

toolbox: {

show: true,

feature: {

saveAsImage: {

show:true,

excludeComponents :['toolbox'],

pixelRatio: 2

}

}

}

这一段一定要写在option中,这样会在图形右上角产生一个保存为图片的标识,点击即可下载图片,这种方法试用于网站点击保存的需求,效果如下图:

图片 1saveAsImage测试效果图

需要注意的是,这个功能在ECharts3中好像已经舍弃,作者用ECharts3没有出现任何效果,换成ECharts2的js文件才可以运行。示例:

myChart.setOption;

var picInfo = myChart.getImage();

getImage要放在setOption方法生成一个简单的图形之后,我们怎么验证getImage是否生效了呢?

方法a:万能的alert调试,这里 alert ; 的结果弹出的是[object HTMLImageElement],我们仍然不知道这里的对象是什么。

方法b:页面中新定义一个容器,将得到的picInfo写入div,看看是什么结果:

var picInfo = myChart.getImage();

onload=function f(){

document.getElementById.appendChild;

//document.getElementById.innerHTML = picInfo;

}

注意,这里的写入div,要用上面的方法写入上面定义的div。得到如下图所示:

图片 2getImage得到的对象写入div

如果用下面的方法写入,会在定义的div中出现[object HTMLImageElement],如下图:

图片 3getImage得到的对象普通写入

遗憾的是,这种方法得到的picInfo为[object HTMLImageElement],无法通过Ajax传递到后台处理,只能用于显示。因此,这种方法适用于一些网站绘制图形上下或者左右同步显示的需求。

很显然,上面的两种情况并不能满足我现在图片自动保存的需求,下面说我最后解决方案。

首先,我们用getDataURL得到图片信息:

myChart.setOption;

var picInfo = myChart.getDataURL();

getDataURL仍然要放在setOption方法生成一个简单的图形之后,现在我们得到的picInfo是一串base64信息,我们设法将得到的picInfo用Ajax传递到后台处理,作者用的是php,因此,以php处理为例:

新建一个文件,取名test.php,(请把此文件放在可运行的环境里,这是基础)。在php文件中将绘制图形的html文件include进来,接收html中Ajax传递到后台的信息,将base64转化为图片保存。

先判断picInfo是否存在,存在则传递到后台,代码如下:

if{

$.ajax({

type: "post",

data: {

baseimg: picInfo

},

url: 'test.php?action=save',

async: true,

success: function {

console.log;

},

error: function{

console.log;

alert;

}

});

}

test.php接收数据并处理:

<?php

include("test.html");

if($action = "save"){

$picInfo = $_POST['baseimg'];

$streamFileRand = date.rand(1000,9999); //图片名

$picType ='.png';//图片后缀

$streamFilename = "/www/echarts/".$streamFileRand .$picType; //图片保存地址

preg_match('/(?<=base64,)[S|s]+/',$picInfo,$picInfoW);//处理base64文本

file_put_contents($streamFilename,base64_decode($picInfoW[0]));//文件写入

}

OK,成功保存图片到自己想要的位置。还有一点,如果你在测试的时候用了getDataURL方法,看到一个空的坐标轴,那么可能是动画效果产生的后果,animation决定是否开启动画,关闭即可,在option中加入:

animation : false,

好啦,得到的图形可以正确显示啦。祝大家好运,不要遇到各种棘手的问题。

本文由澳门新莆京娱乐官网发布于编程,转载请注明出处:ECharts绘制的图形保存为图片

关键词: