java 使用PhantomJS把echart保存成图片

最新推荐文章于 2024-10-17 18:33:02 发布
最新推荐文章于 2024-10-17 18:33:02 发布
阅读量1.3k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
分类专栏： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiaofanren1111/article/details/90369525
该博客展示了使用ECharts生成图片的实现过程。首先给出了展示ECharts的HTML页面代码，包含初始化ECharts实例、处理数据和设置图表选项等。还准备了demo数据，最后介绍了Java使用PhantomJS调用页面生成ECharts图片的代码，包括获取浏览器驱动、执行脚本和获取图片数据等操作。

展示echarts的html页面

<html>
    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<head>
<script src="http://gssn.fw121.com/js/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.8.0/echarts.min.js"></script>
</head>
<body>
    <!-- 因为我需要生成两个图片 所以定义了两个echarts -->
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM  -->
    <div id="temEcharts" style="height:400px;width:550px"></div>
    <div id="rhEcharts" style="height:400px;width:550px"></div>
</body>
<script>
    var temEcharts=null;
    var rhEcharts=null;
    $(function() {
        // 基于准备好的dom，初始化echarts实例
        temEcharts = echarts.init(document.getElementById('temEcharts'));
        rhEcharts = echarts.init(document.getElementById('rhEcharts'));
    });
    
    function showImg(surfData){    
        var option ={
                      title : {text : '温度(°C)', left : 'center'},
                      xAxis: {type: 'category', data: []},
                      yAxis: {type: 'value'},
                      series: [{data: [], type: 'line', smooth: true}]
                  }
        if(surfData.length <= 0){
            alert("暂时没有查询到监测数据");
            temEcharts.clear();
            rhEcharts.clear();
            return;
        }else{
            //pre24h需要的数据
            var pre24hdata = echarts.util.map(surfData, function (entry) {
                return entry.pre24h==undefined || entry.pre24h=='99999' ?0:entry.pre24h;
            });
            //温度需要的数据
            var temdata = echarts.util.map(surfData, function (entry) {
                return entry.tem==undefined?0:entry.tem/10;
            });
            //x轴需要的数据
            var xAxisData = echarts.util.map(surfData, function (entry) {
                return formatData(new Date(entry.dataTime), 'MM-dd');
            });
            option.series[0].data=temdata;
            option.xAxis.data=xAxisData;
            temEcharts.setOption(option);
            
            option.series[0].data=pre24hdata;
            option.title.text='降水(mm)';
            option.series[0].type="bar";
            rhEcharts.setOption(option);
        }
    }
    
    function returnEchartImg(echartObj){
        return echartObj.getDataURL();
    }
    
    var SIGN_REGEXP = /([yMdhsm])(\1*)/g;
    var DEFAULT_PATTERN = 'yyyy-MM-dd';

    function formatData(date, pattern) {
        pattern = pattern || DEFAULT_PATTERN;
        return pattern.replace(SIGN_REGEXP, function ($0) {
            switch ($0.charAt(0)) {
                case 'y': return padding(date.getFullYear(), $0.length);
                case 'M': return padding(date.getMonth() + 1, $0.length);
                case 'd': return padding(date.getDate(), $0.length);
                case 'w': return date.getDay() + 1;
                case 'h': return padding(date.getHours(), $0.length);
                case 'm': return padding(date.getMinutes(), $0.length);
                case 's': return padding(date.getSeconds(), $0.length);
            }
        });
    };
    function padding(s, len) {
        var len = len - (s + '').length;
        for (var i = 0; i < len; i++) { s = '0' + s; }
        return s;
    };
    
</script>
</html>

准备需要用到的demo数据（需要将list转成字符串）

String surfData="[
{\"dataTime\":1524758400000,\"dpt\":\"99999\",\"pre24h\":\"999\",\"prs\":\"99999\",\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"99999\",\"tem\":\"227\",\"temMax\":\"99999\",\"temMin\":\"99999\",\"vis\":\"99999\",\"windDAvg10mi\":\"53\",\"windSAvg10mi\":\"99999\"},
{\"dataTime\":1524844800000,\"dpt\":\"99999\",\"pre24h\":\"399\",\"prs\":\"99999\",\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"99999\",\"tem\":\"197\",\"temMax\":\"99999\",\"temMin\":\"99999\",\"vis\":\"99999\",\"windDAvg10mi\":\"66\",\"windSAvg10mi\":\"99999\"},
{\"dataTime\":1524931200000,\"dpt\":\"99999\",\"pre24h\":\"99999\",\"prs\":\"299\",\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"99999\",\"tem\":\"207\",\"temMax\":\"99999\",\"temMin\":\"99999\",\"vis\":\"99999\",\"windDAvg10mi\":\"62\",\"windSAvg10mi\":\"99999\"},
{\"dataTime\":1525017600000,\"dpt\":\"99999\",\"pre24h\":\"99999\",\"prs\":\"99999\",\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"99999\",\"tem\":\"191\",\"temMax\":\"99999\",\"temMin\":\"99999\",\"vis\":\"99999\",\"windDAvg10mi\":\"49\",\"windSAvg10mi\":\"99999\"},
{\"dataTime\":1525190400000,\"dpt\":\"99999\",\"pre24h\":\"959\",\"prs\":\"99999\",\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"\",\"tem\":\"57\",\"temMax\":\"99999\",\"temMin\":\"99999\",\"vis\":\"99999\",\"windDAvg10mi\":\"68\",\"windSAvg10mi\":\"99999\"},
{\"dataTime\":1525276800000,\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"\",\"tem\":\"188\",\"windDAvg10mi\":\"97\",\"windSAvg10mi\":\"99999\"},{\"dataTime\":1525363200000,\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"\",\"tem\":\"216\",\"windDAvg10mi\":\"51\",\"windSAvg10mi\":\"99999\"},
{\"dataTime\":1525449600000,\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"\",\"tem\":\"183\",\"windDAvg10mi\":\"49\",\"windSAvg10mi\":\"99999\"},
{\"dataTime\":1525536000000,\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"\",\"tem\":\"176\",\"windDAvg10mi\":\"91\",\"windSAvg10mi\":\"99999\"},{\"dataTime\":1525622400000,\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"\",\"tem\":\"178\",\"windDAvg10mi\":\"90\",\"windSAvg10mi\":\"99999\"},
{\"dataTime\":1525708800000,\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"\",\"tem\":\"190\",\"windDAvg10mi\":\"94\",\"windSAvg10mi\":\"99999\"},{\"dataTime\":1525795200000,\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"\",\"tem\":\"181\",\"windDAvg10mi\":\"73\",\"windSAvg10mi\":\"99999\"}]";
        java使用PhantomJS调用刚才的页面生成echarts图片

        private List<String> saveSurfModelUrlToImg(String surfData) {
        List<String> imageBase64List = new ArrayList<String>();
        PhantomJSDriver driver=getPhantomJSDriver();
        // 让浏览器访问空间主页
        driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
        driver.get("http://testurl.com/file/upload/saveEchartHtml.html");
        JavascriptExecutor js = (JavascriptExecutor) driver;
        //设置surf数据到页面
        driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
        //展示echarts
        js.executeScript("showImg("+surfData+")");
        //加入一段休眠时间，防止js执行没完成就进行的 读取echart图片数据的功能。
        Thread.sleep(3000); 
        //获取echart图片数据
        driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
        String temTxt=(String) js.executeScript("return returnEchartImg(temEcharts)");
        driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
        String phTxt=(String) js.executeScript("return returnEchartImg(rhEcharts)");
        //imageBase64放到list中
        imageBase64List.add(temTxt.replace("data:image/png;base64,",""));
        imageBase64List.add(phTxt.replace("data:image/png;base64,",""));
//        ImgFileUtils.GenerateImage(temTxt,"d://tem01.png");
//        ImgFileUtils.GenerateImage(phTxt,"d://ph01.png");

        driver.close();
        driver.quit();
        return imageBase64List;
    }

    private PhantomJSDriver getPhantomJSDriver() {
        //设置必要参数
        DesiredCapabilities dcaps = new DesiredCapabilities();
        //ssl证书支持
        dcaps.setCapability("acceptSslCerts", true);
        //截屏支持
        dcaps.setCapability("takesScreenshot", true);
        //css搜索支持
        dcaps.setCapability("cssSelectorsEnabled", true);
        //js支持
        dcaps.setJavascriptEnabled(true);
        //驱动支持
        String osname = System.getProperties().getProperty("os.name");
        if (osname.equals("Linux")) {//判断系统的环境win or Linux
            dcaps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY,"/usr/bin/phantomjs");
        } else {
            dcaps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY,"D:\\phantomjs-2.1.1\\bin\\phantomjs.exe");
        }
        //创建无界面浏览器对象
        PhantomJSDriver driver = new PhantomJSDriver(dcaps);
        return  driver;
    }
 

Java+PhantomJs实现后台生成Echarts图片（完整源码）
维他vi_ta的博客
07-24 1万+
目的：实现在java后台直接根据options生成Echarts统计图片 本文实现原理：java调用Runtime.getRuntime().exec()的方式调用phantomjs。然后由phantomjs处理echarts数据,最终生成图片。 第一步：下载并安装PhantomJs 下载地址：http://phantomjs.org/download.html 下载完成后配置环境变量 ​ 把解...
phantomjs 将某一网页生成pdf 或图片
06-06
phantomjs有借鉴有研究。
PhantomJSDriver自动生成echart图片
zj5291407020的博客
09-17 714
title date tags categories PhantomJSDriver自动生成echart图片 2019-08-29 08:06:08 -0700 PhantomJS JAVA 依赖 <dependency> <groupId>com.codebo...
后台java 使用PhantomJS把echart保存成图片
奥法vx的笔记
05-29 7214
欢迎使用Markdown编辑器写博客 项目是在浏览器展示折线，柱状图，使用echarts效果不错。领导看了后，又下新命令了，要能把图片从后台保存成图片或者保存到word中，供客户做专题报告时使用。可怜我这挣着刚够吃饭钱的小码农，又要为老板那多拿项目早上市的的理想，继续埋头苦干了。 从网上搜索了一些java使用PhantomJS的文章，大部分都是java调用Runtime.getRuntime(...
phantomjs结合java在服务端/后台生成echarts图片
weixin_34250434的博客
06-18 297
2019独角兽企业重金招聘Python工程师标准>>> ...
基于phantomjs从后端将echart图表转换为图片
最新发布
xiaonuniu的博客
10-17 344
定时任务将后台echart图表转化为图片，方便在服务器之间传输
java使用phantomjs把echarts转图片 静态资源
02-22
本文将详细讲解如何在Java环境中使用PhantomJS将ECharts图表转化为图片。 首先，我们需要理解ECharts。ECharts是百度推出的一个基于JavaScript的数据可视化库，它提供了丰富的图表类型，如折线图、柱状图、饼图等，...
Java利用Phantomjs实现生成图片的功能
10-15
在Java中使用PhantomJS生成图片，主要是借助PhantomJS提供的API来实现网页的渲染和截图。这个过程通常包括以下步骤： 1. **安装PhantomJS**：首先需要从官方网站下载对应操作系统的PhantomJS版本，并将其添加到系统...
phantomjs工具
12-28
在某些情况下，我们可能需要将ECharts生成的图表以图片形式保存或嵌入到邮件、文档中，这时PhantomJS就派上用场了。 具体来说，通过PhantomJS，我们可以实现以下步骤来生成ECharts图表的Base64编码： 1. **加载...
使用phantomjs生成echart图表的虚拟浏览器解决方案
PhantomJS 和 ECharts 是 JavaScript 技术栈的一部分，而 "test.java" 表明这是一个 Java 文件，这可能意味着该 Java 程序用于调用 PhantomJS 脚本或者控制 PhantomJS 的执行环境，实现将 ECharts 图表转换为图片的...
Echarts-Java 3.0.0.6.jar（附后台生成图片功能）
04-03
在官方代码的基础上增加了后台生成图片的功能，依赖Springboot，启动web服务后，由ImageUtil根据option的内容，生成html临时文件，并调用自带的打开浏览器功能进行预览，在浏览器端生成图片后，将图片的DataUrl发送到后端进行保存。 新增的ImageUtil提供了exportToImage方法，传入option对象（必填）、图片存储路径（选填）、图片名称（选填）、宽高（选填），生成图片后调用浏览器预览功能，等待文件保存完成，如果保存失败，自动重试3次，最后返回图片在服务器上的实际路径，便于后续处理，如导出到Word或Excel中。 后端接收图片的服务器端口和默认图片大小可通过echart.properties文件进行配置： #生成图片的服务器的url echart.server.url=http://localhost:8080 echart.server.action=/echart/saveImage #图片的宽高 echart.height=600 echart.width=800 压缩包中含ECharts-3.0.0.6.jar和ECharts-3.0.0.6-sources.jar
Java后台生成ECharts图片【Java+Echarts+Phantomjs】
我是小菜
05-17 6122
Java使用Echarts生成图片 文章目录前言一、场景需求二、使用工具三、实现思路二、代码1.项目结构2.测试代码 EchartsTest.java2.JS脚本 echarts-convert.js3.测试数据代码 option.js总结 前言 Java后台使用Echarts生成图片。 一、场景需求 旧场景：前后端分离的项目，后台为Java，前端为VUE。VUE前端获取数据渲染生成echarts图表后，再通过点击事件获取echart对象的base64编码发送给后台，后台根据base64通过F.
java后端生成echarts图片
qq_34463172的博客
09-30 6579
生成图的前提下载 phantomjs-2.1.1-windows 与对应的js 一种方式和网上大多方式大同小异 直接上码： @Component public class EchartsUtil { /** * 临时文件夹路径 */ @Value("${file.path}") private String TEMP_FILE_PATH; @Value("${echartHost}") private String echartH
java运用echart进行图形展示
weixin_44310899的博客
05-02 1186
前段时间项目中要做一个根据数据生成折线图的功能，并5分钟刷新一次，进行数据更新。由于之前是用echarts来进行中国地图展现的，所有这次也用echarts进行图形展示。 项目目录如下图所示： 1.pom.xml文件 该文件主要是对jar包进行管理，可以不看 复制代码 1 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:x...
Java后台phantomjs导出复杂图表PDF
牧竹子
01-08 2362
当前导出PDF工具 java后端如何导出像前端用echarts那么漂亮而且还有带有图表的PDF呢，或者图片。目前后端导出word或者excel都是有县城的jar，导出简单的图表也有的简单的jfreechart 总结一下用java生成PDF的方法： A、itext-PdfStamper pdfStamper（俗称抠模板）:代码简单 模板要先提供，且字段长度固定、不灵活 B、itext-Document document（正常代码撰写）:模板可根据代码调整、但样式不如C灵活 要维护的后台代码较多,整个过程全手工
phantomJs_Selenium_java 最全配置访问
菜鸡java程序员的博客
04-11 1576
package com.sqt.phantomJs_Selenium_Demo;import java.io.File;import java.io.IOException;import java.util.List;import java.util.concurrent.TimeUnit;import org.apache.commons.io.FileUtils;import org.open...
java后台生成echarts图表并保存图片
热门推荐
zengyif_szu的博客
08-22 6万+
需求：每天,每个月1号定时给用户发送邮件，邮件的内容是echarts的图片，这些全部都是定时器触发的，在后台生成echarts图片并保存到服务器，然后在发送邮件 网上其实已经有很多很多案例和方案解释,但有些是错误,或者不能满足我的需求. 1,支持echart4.0最新版本. 2, 支持上万条数据.网上只能查询几百条 然后拼接在cmd 命令中 而我采用java生成的opto...
关于java后台生成echarts图片问题总结
wsdssb521的博客
05-27 1837
关于后台生成图片，首先考虑的就是如何加载js，在无浏览器模式下。抱着这个疑问百度结果 ----phantomjs----- phantomjs可以在无浏览器模式下加载js，且可以通过java代码运行cmd命令执行 了解到phantomjs之后，就是安装且借助echartsconvert来在无浏览器模式下生成图片附代码：
java将echarts数据转成图片
letere的博客
12-10 3410
1 数据准备 echart官网样板：https://echarts.apache.org/examples/zh/index.html 点击其中一个示例，取出option数据保存为js文件 2 环境准备 （1）phantomjs下载：https://phantomjs.org/download.html 下载完后自行配置系统环境变量 （2）echarts.min.js下载：https://github.com/apache/echarts/tree/5.2.2/dist （3）jqu
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lozhyf

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值