PhantomJS+java 后端生成echart图表的图片

PhantomJS+java 后端生成echart图表的图片

  • 前言
  • 源码
  • 效果
  • 实现
    • echarts-convert+PhantomJS实现echarts截图得到图片
    • java延时读取base64数据
  • 参考

前言

该项目仅用作个人学习使用

源码

地址
docker镜像: registry.cn-chengdu.aliyuncs.com/qinjie/java-phantomjs:1.0

效果

在这里插入图片描述

实现

该源码主要是在linux环境下运行,因为最终结果是打包成了docker image。本地window运行需要下载PhantomJS的window版本。如下命令window环境下不可直接运行

echarts-convert+PhantomJS实现echarts截图得到图片

  1. webserver启动了一个服务,因为不通过服务的方式会每次都打开phantomjs
  2. 监听端口8081,post请求。接受json body的数据如下。
  3. 其中option中的数据标识echart中的option部分;path标识截图生成的base64将会写入到这个txt中去
{"path": ["/a.txt"],"option": ["var option = {\r\n  xAxis: {\r\n    type: 'category',\r\n    data: ['中国', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\r\n  },\r\n  yAxis: {\r\n    type: 'value'\r\n  },\r\n  series: [\r\n    {\r\n      data: [150, 230, 224, 218, 135, 147, 260],\r\n      type: 'line'\r\n    }\r\n  ]\r\n};"]
}

在这里插入图片描述

  1. 通过如下命令启动一个服务。就是通过phantomjs指定一个js即可。window本地也是类似的
phantomjs-2.1.1-linux-x86_64/bin/phantomjs phantomjs/echarts-convert/server.js

5.window下同样下载个phantomjs,执行同一个server.js一样可以启动一个服务
6.调用后会在参数中:path 路径下生成一个txt,里面保存了base64

java延时读取base64数据

  1. java项目就很简单了,就是读取了指定path下的base64数据

  2. java项目中通过sleep等待了下
    在这里插入图片描述

  3. 因为PhantomJS+webserver截图的时候是异步的,我查了很久没找到能同步办法,所以没办法就这样来实现了

  4. java接口的效果如下
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

参考

  1. https://www.jianshu.com/p/bf92c7ddaa13
  2. 网上一搜一大堆的教程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/82338.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

快速学习制作数据查询系统的方法

无论是老师、企业还是机构,都会有信息查询的需求。例如,老师可能需要制作一个成绩查询、等级查询、分宿舍分寝室查询、分班查询、录取情况查询、新生报名查询等系统,让学生家长可以自行查询。 同样地,企业或机构也希望制作工资条查…

搭建CFimagehost私人图床,实现公网远程访问的详细指南

文章目录 1.前言2. CFImagehost网站搭建2.1 CFImagehost下载和安装2.2 CFImagehost网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar临时数据隧道3.2 Cpolar稳定隧道(云端设置)3.3.Cpolar稳定隧道(本地设置) 4.公网访问测…

ui设计师简历自我评价(合集)

UI设计最新面试题及答案 1、说说你是怎么理解UI的? UI是最直观的把产品展示展现在用户面前的东西,是一个产品的脸面。人开始往往是先会先喜欢上美好的事物后,在去深究内在的东西的。 那么也就意味着一个产品的UI首先要做的好看,无论风格是…

【实操干货】如何开始用Qt Widgets编程?(三)

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写,所有平台无差别运行,更提供了几乎所有开发过程中需要用到的工具。如今,Qt已被运用于超过70个行业、数千家企业,支持数百万设备及应用。 在本文中&#xff0…

Qt 阴影边框

阴影边框很常见,诸如360以及其他很多软件都有类似效果,了解CSS3的同学们应该都知道box-shadow,它就是来设定阴影效果的,那么Qt呢?看过一些资料,说是QSS是基于CSS2的,既然如此,box-sh…

【动手学深度学习】--20.目标检测和边界框

文章目录 目标检测和边界框1.目标检测2.边界框 目标检测和边界框 学习视频:物体检测和数据集【动手学深度学习v2】 官方笔记:目标检测和边界框 在图像分类任务中,我们假设图像中只有一个主要物体对象,我们只关注如何识别其类别…

C++day3(类、this指针、类中的特殊成员函数)

一、Xmind整理&#xff1a; 二、上课笔记整理&#xff1a; 1.类的应用实例 #include <iostream> using namespace std;class Person { private:string name; public:int age;int high;void set_name(string n); //在类内声明函数void show(){cout << "na…

【RuoYi移动端】uniApp导入和引用uView2.0插件

一、打开uiew官网 安装 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架uView UI&#xff0c;是 uni-app 生态最优秀的 UI 框架&#xff0c;全面的组件和便捷的工具会让您信手拈来&#xff0c;如鱼得水https://uviewui.com/components/install.html 也可直…

实验五 Linux 内核的安装与加载(三种方式)

【实验目的】 掌握 uboot 的使用方法&#xff0c;能够使用 uboot 安装和加载内核 【实验环境】 ubuntu 14.04 发行版FS4412 实验平台 【注意事项】 实验步骤中以“$”开头的命令表示在 ubuntu 环境下执行&#xff0c;以“#”开头的命令表 示在开发板下执行 【实验步骤】 …

亚马逊云科技CEO谈及企业领导力原则的核心:坚持顾客至上

亚马逊云科技首席执行官Adam Selipsky几乎从一开始就在那里&#xff1a;他于2005年加入&#xff0c;在效力亚马逊11年后于2016年离开&#xff0c;转而经营Tableau&#xff0c;并于2021年成为亚马逊云科技首席执行官。当时亚马逊云科技前首席执行官安迪贾西(Andy Jassy)接替杰夫…

Prometheus介绍

Prometheus介绍 1. Prometheus 简介2. Prometheus 的特点3. Prometheus 的架构4. Prometheus 的基本组件5. Prometheus工作流程6. Prometheus和Zabbix对比7. Prometheus的部署模式7.1 基本高可用模式7.2 基本高可用远程存储7.3 基本HA 远程存储 联邦集群方案 8. Prometheus能…

uniapp-滑块验证组件wo-slider

wo-slider是一款支持高度自定义的滑块验证组件&#xff0c;采用uniapp-vue2编写 采用touchstart、touchmove、touchend事件实现的滑块组件,支持H5、微信小程序&#xff08;其他小程序未试过&#xff0c;可自行尝试&#xff09; 可到插件市场下载尝试&#xff1a; https://ext.…