Java通过后台导出Echart图片

最新推荐文章于 2024-05-29 13:44:54 发布
最新推荐文章于 2024-05-29 13:44:54 发布
阅读量1.5k 收藏 6
点赞数 2
分类专栏： 工具 文章标签： java phantomjs echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lmchhh/article/details/118052539
版权

Java通过后台导出Echart图片

一，工具准备

phantomjs

由于Echart图片是通过浏览器的js生成在页面上，因此若不想通过前端生成Echart图片，需要使用其他工具，例如 phantomjs，俗称为：无界面的浏览器。

PhantomJS是一个基于 WebKit 的服务器端JavaScript API。它全面支持web而不需浏览器支持，支持各种Web标准：DOM处理，CSS选择器, JSON，Canvas，和SVG。
PhantomJS常用于页面自动化，网络监测，网页截屏，以及无界面测试等。

通常我们使用PhantomJS作为爬虫工具。传统的爬虫只能单纯地爬取html的代码，对于js渲染的页面，就无法爬取，如Echarts统计图。而PhantomJS正可以解决此类问题。

官网下载http://phantomjs.org/download.html 国内镜像http://npm.taobao.org/dist/phantomjs/

EChartsConvert

echart-convert.js可以配合phantomjs将图片截图下来

下载地址（个人自定义）： https://gitee.com/lmchh/echartsconvert

网上地址：https://gitee.com/saintlee/echartsconvert

安装并运行

D:/Java/Echart/phantomjs-2.1.1-windows/bin/phantomjs.exe D:/Java/Echart/echartsconvert/echarts-convert.js -s -p 6666

命令參數：

  • -s: 指通過服務器的方式
  • -p：指定端口後，一般和 -s 一起使用
  • -o：o即option，格式為 {…}
  • -f：輸出路徑
  • -t：圖片類型，有 file/base64 兩種，默認是base64
  • -w：即width，圖片寬度
  • -h：即height，圖片高度

二，所需依赖

		<!--   Echart     -->
        <dependency>
            <groupId>org.freemarker</groupId>
            <artifactId>freemarker</artifactId>
            <version>2.3.28</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.apache.httpcomponents/httpclient -->
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
            <version>4.5.9</version>
        </dependency>
		<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>

三，实现代码

package com.lmc.excel.util;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import freemarker.template.TemplateException;
import sun.misc.BASE64Decoder;

import java.io.*;
import java.util.Arrays;
import java.util.HashMap;
import java.util.Map;

/**
 * @ClassName: EchartsUtil
 * @author: Leemon
 * @Description: TODO
 * @date: 2021/6/14 15:43
 * @version: 1.0
 */
public class EchartsUtil {
    /**
     * 临时文件夹路径
     */
    public static final String TEMP_FILE_PATH = "D:/data/echart/";
    private static final String SUCCESS_CODE = "1";

    private static final String path = EchartsUtil.class.getClassLoader().getResource("json").getPath();


    public static void main(String[] args) throws IOException, TemplateException {

        // 获取option字符串
        String option = getStringByFile(path + "/test.json");
        JSONObject object = JSONObject.parseObject(option);
        option = object.toJSONString();

        // 根据option参数,width和height生成base64编码
        String base64 = EchartsUtil.generateEchartsBase64(option, "1360", "800");

        System.out.println("BASE64:" + base64);
        generateImage(base64, TEMP_FILE_PATH, "test.png");

    }


    public static String generateEchartsBase64(String option, String width, String height) throws IOException {
        String base64 = "";
        if (option == null) {
            return base64;
        }
        option = option.replaceAll("\\s+", "");//.replaceAll("\"", "");
        JSONObject object = JSON.parseObject(option);
        object.getJSONArray("series").getJSONObject(0).put("data", Arrays.asList(120, 200, 150, 80, 70, 110, 130));
        String json = JSONObject.toJSONString(object);
        object = JSON.parseObject(json);
        // 将option字符串作为参数发送给echartsConvert服务器
        if (width == null || "".equals(width)) {
            width = "800";
        }
        if (height == null || "".equals(height)) {
            height = "400";
        }
        Map<String, String> params = new HashMap<>();
        params.put("opt", JSON.toJSONString(object));
        params.put("width", width);
        params.put("height", height);
        String response = HttpUtil.post("http://localhost:6666", params, "utf-8");
        System.err.println(response);
        // 解析echartsConvert响应
        JSONObject responseJson = JSON.parseObject(response);
        String code = responseJson.getString("code");

        // 如果echartsConvert正常返回
        if (SUCCESS_CODE.equals(code)) {
            base64 = responseJson.getString("data");
        }
        // 未正常返回
        else {
            String string = responseJson.getString("msg");
            throw new RuntimeException(string);
        }
        return base64;
    }

    /**
     * 将base64转化为图片
     * @param base64
     * @param path
     * @param fileName
     * @throws IOException
     */
    public static void generateImage(String base64, String path, String fileName) throws IOException {
        BASE64Decoder decoder = new BASE64Decoder();
        try (OutputStream out = new FileOutputStream(path + fileName)){
            // 解密
            byte[] b = decoder.decodeBuffer(base64);
            for (int i = 0; i < b.length; ++i) {
                if (b[i] < 0) {
                    b[i] += 256;
                }
            }
            out.write(b);
            out.flush();
        }
    }
    
    /**
     * 将文件转化为字符串
     * @param fileName
     * @return
     */
    public static String getStringByFile(String fileName) {
        File file = new File("D:/Java/Echart/test.json");
        FileInputStream fis = null;
        InputStreamReader isr = null;
        BufferedReader br = null;
        StringBuilder sb = new StringBuilder();
        try {
            fis = new FileInputStream(file);
            isr = new InputStreamReader(fis);
            br = new BufferedReader(isr);
            String line = null;
            while (((line = br.readLine()) != null)) {
                sb.append(line);
            }
            br.close();
            isr.close();
            fis.close();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            return sb.toString();
        }
    }



}

test.json

{
	"tooltip": {
		"trigger": "axis",
		"axisPointer": {
			"type": "shadow"
		}
	},
	"legend": {
		"data": [
			"直接访问",
			"邮件营销",
			"联盟广告",
			"视频广告",
			"搜索引擎",
			"百度",
			"谷歌",
			"必应",
			"其他"
		]
	},
	"grid": {
		"left": "3%",
		"right": "4%",
		"bottom": "3%",
		"containLabel": true
	},
	"xAxis": [{
		"type": "category",
		"data": [
			"周一",
			"周二",
			"周三",
			"周四",
			"周五",
			"周六",
			"周日"
		]
	}],
	"yAxis": [{
		"type": "value"
	}],
	"series": [{
			"name": "直接访问",
			"type": "bar",
			"emphasis": {
				"focus": "series"
			},
			"data": [
				320,
				332,
				301,
				334,
				390,
				330,
				320
			]
		},
		{
			"name": "邮件营销",
			"type": "bar",
			"stack": "广告",
			"emphasis": {
				"focus": "series"
			},
			"data": [
				120,
				132,
				101,
				134,
				90,
				230,
				210
			]
		},
		{
			"name": "联盟广告",
			"type": "bar",
			"stack": "广告",
			"emphasis": {
				"focus": "series"
			},
			"data": [
				220,
				182,
				191,
				234,
				290,
				330,
				310
			]
		},
		{
			"name": "视频广告",
			"type": "bar",
			"stack": "广告",
			"emphasis": {
				"focus": "series"
			},
			"data": [
				150,
				232,
				201,
				154,
				190,
				330,
				410
			]
		},
		{
			"name": "搜索引擎",
			"type": "bar",
			"data": [
				862,
				1018,
				964,
				1026,
				1679,
				1600,
				1570
			],
			"emphasis": {
				"focus": "series"
			},
			"markLine": {
				"lineStyle": {
					"type": "dashed"
				},
				"data": [
					[{
							"type": "min"
						},
						{
							"type": "max"
						}
					]
				]
			}
		},
		{
			"name": "百度",
			"type": "bar",
			"barWidth": 5,
			"stack": "搜索引擎",
			"emphasis": {
				"focus": "series"
			},
			"data": [
				620,
				732,
				701,
				734,
				1090,
				1130,
				1120
			]
		},
		{
			"name": "谷歌",
			"type": "bar",
			"stack": "搜索引擎",
			"emphasis": {
				"focus": "series"
			},
			"data": [
				120,
				132,
				101,
				134,
				290,
				230,
				220
			]
		},
		{
			"name": "必应",
			"type": "bar",
			"stack": "搜索引擎",
			"emphasis": {
				"focus": "series"
			},
			"data": [
				60,
				72,
				71,
				74,
				190,
				130,
				110
			]
		},
		{
			"name": "其他",
			"type": "bar",
			"stack": "搜索引擎",
			"emphasis": {
				"focus": "series"
			},
			"data": [
				62,
				82,
				91,
				84,
				109,
				110,
				120
			]
		}
	]
}

运行main函数，将会在 D:/data/echart/下生成 test.png 的堆栈柱状图。

在这里插入图片描述

四，传入参数方式

前面这种方式直接把test.json中整一个文件当做一个option，这样的话数据就是写死的方式，如果需要自定义数据的话，可以通过编辑json修改option

		// 获取option字符串
        String option = getStringByFile(path + "/test.json");
        JSONObject object = JSONObject.parseObject(option);
        object.getJSONObject("legend").put("data", Arrays.asList("直接访问","邮件营销","联盟广告","其他"));
        option = object.toJSONString();

以上就是关于只通过后台生成Echart图表的方式。

李奈 - Leemon
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
java 使用PhantomJS把echart保存成图片，Java开发必学
m0_74918915的博客
03-23 1063
(img-glovn0ND-1711136770709)](img-DPVbHwcC-1711136770710)](img-0IfhHLP9-1711136770710)]当然在这还有更多整理总结的Java进阶学习笔记和面试题未展示，其中囊括了。java使用PhantomJS调用刚才的页面生成echarts图片。option.title.text=‘降水(mm)’;准备需要用到的demo数据（需要将list转成字符串）alert(“暂时没有查询到监测数据”);//pre24h需要的数据。
Java导入导出图片
热门推荐
zhuMin的博客
12-13 1万+
Java导入图片压缩包到服务器&导出服务器图片为压缩包实现步骤：1.导入图片压缩包 - 获取上传压缩包解压遍历为单个文件 - 定义图片存储目录 （Linux和win目录不同） - 遍历图片File存储到指定目录//图片存储目录 Linux路径:/opt/student_enlist private String saveRootDirectory = "D:\\student_enlist"
Java服务端使用freemarker+wkhtmltoimage生成Echart图片
韩云川的博客
01-25 832
如果生成的图片和原html不一样,或转化错误,可以尝试将js或css代码改为较原始的版本.wkhtmltopdf / wkhtmltoimage 官网已经。2.1 下载 wkhtmltoimage。FreeMarker 中文官方参考手册。
phantomjs+echarts-convert.js 生成图表 不返回阻塞原因
最新发布
weixin_45942583的博客
05-29 131
在option里如果出现 %，则执行会挂掉。需要将%替换为%25。
java后台生成echarts图表并保存图片到本地
LeeWay19940201的博客
01-10 1231
由于网上资料数据都是写死的，实际代码中的数据肯定需要后台查询出来，我根据自己的理解和网上的代码参考，终于完成了java生成图表的功能，写在这里给大家一个参考。 效果图： 准备工作： 工具下载： 链接：https://pan.baidu.com/s/1NX9pf77SlEtU_QdKMn3_Ow 提取码：wli7 echarts-convert.js PhantomJS工具 PhantomJS配置环境变量 上代码： 依赖 <!--导出echarts图片--> <dependenc
java使用phantomjs把echarts转图片 静态资源
02-22
java使用phantomjs把echarts转图片 静态资源
java生成echarts图片并且下载到本地
LXC的博客
08-23 2048
建议：因为这个是通过模板读取变量的方式来实现的，所以我们只需要封装好参数，用插值表达式的方式就可以完美实现该功能，且可以减少后端代码的逻辑，将各种样式和类型的图写在前端html页面上，采用定时关闭和下载的功能。因为这是在服务器上进行生成图片，所以也不用担心用户体验问题，我们支取图片，取完图片后删除即可。以上是生成echarts图片的方法，数据库采用的是mongodb数据库。//windows的打开方式 默认用预制chrome的浏览器打开。//执行代码，在brower有值后跳出，//获取操作系统的名字。
【生成PDF】【JAVA】纯后台生成Echarts图片，并将图片生成到PDF文档
qq_41773784的博客
07-07 6270
本次任务：要求不经过web页面，Java如何生成含有Echarts图的PDF
java echarts保存图片_Java后台批量生产echarts图表并保存图片
weixin_42507868的博客
02-27 374
Java后台批量生产echarts图表并保存图片因为是需要保存base64图片。所以在生成并读取完毕后将图片删除。附上图片转base64方法：/*** 图片文件转为base64* @param imgPath*/private static String ImageToBase64(String imgPath) {byte[] data = null;// 读取图片字节数组try {InputS...
JAVA导出echarts图表图片
qq_32175685的博客
11-06 1496
应用场景 java中导出报告（word文档） 实现思路 通过java调用浏览器驱动执行js方法得到base64字符串图片,然后将base64字符串转成图片。 1.准备导出echarts所用到的工具 1.导入jar包 compile group: 'org.seleniumhq.selenium', name: 'selenium-java', version: '3.0.1' // https://mvnrepository.com/artifact/org.seleniumhq
Java后台批量生产echarts图表并保存图片
08-19
本文主要介绍了Java后台批量生产echarts图表并保存图片的方法，通过示例代码详细介绍了批量生产echarts图表并保存图片的过程，对大家的学习或者工作具有一定的参考学习价值。 一、echarts图表简介 echarts是一款...
java后台生成echarts图表
11-13
然而，在某些场景下，我们可能需要在Java后台生成这些图表，而不是在前端直接渲染，比如用于报表生成、邮件发送或PDF文档嵌入等。 `echarts-java` 是一个专为 Java 开发者设计的工具库，它允许我们在 Java 后台生成...
echart图表导出到word文档
07-19
poi 将echar报表生成到word中，通过base64格式把图表信息传到后台，后台自动生成word文档，当然可以根据模板自动填充数据，这个小案例只是根据自己需要生成文档，根据自定义模板再拼接自定义内容也有，需要的联系我...
Echarts-Java 3.0.0.6.jar（附后台生成图片功能）
04-03
后端接收图片的服务器端口和默认图片大小可通过echart.properties文件进行配置： #生成图片的服务器的url echart.server.url=http://localhost:8080 echart.server.action=/echart/saveImage #图片的宽高 echart....
java 前台数据和echarts图表导出为word文件的jar
03-27
总结来说，要实现Java前台数据和Echarts图表导出为Word文件，开发者需要熟悉Apache POI库的使用，掌握XML处理和图片插入等相关技术。同时，前端Echarts图表的生成和处理也是不可或缺的一部分。通过结合这两部分，...
java 导出echarts的图片后，使用POI导出到excel 中
夕四
06-16 995
项目中的需求是需要将前端页面展示的echarts图片生成，并将图片导出到excel中，实现图片随excel下载，在这先展示如何将echarts的图片导出到excel中，后续再补上如何导出到word模板中，使用的技术是POI 先上最终效果图 前端展示效果： 导出后到excel的效果 1、前端代码： <div class="block-title"> <h3>标题1</h3>&nbsp;&nbsp;&nbsp; <div> .
java导出Echarts图形(柱状图、饼形图、折线图)
weixin_47054648的博客
06-02 1633
java导出Echarts图形(柱状图、饼形图、折线图)
echarts-获取echarts内的图片
ATwins
12-18 2945
//下载获取 $("#ntexport").click(function () { var mycanvas = $("#chartsImgOne").find("canvas")[0]; var image = mycanvas.toDataURL("image/jpeg"); var $a = document.createElement('a'); $a.s...
java调echarts下载图片,java后台生成echarts图表并保存图片-Go语言中文社区
weixin_33305287的博客
03-13 892
需求：每天,每个月1号定时给用户发送邮件，邮件的内容是echarts的图片，这些全部都是定时器触发的，在后台生成echarts图片并保存到服务器，然后在发送邮件网上其实已经有很多很多案例和方案解释,但有些是错误,或者不能满足我的需求.1,支持echart4.0最新版本.2, 支持上万条数据.网上只能查询几百条 然后拼接在cmd 命令中 而我采用java生成的optons json数据写成文件....
java后台数据导出的代码
05-12
下面是一个简单的Java后台数据导出的代码示例： ```java import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.util.List; import javax.servlet.http.HttpServletResponse; import org.apache.poi.ss.usermodel.Cell; import org.apache.poi.ss.usermodel.Row; import org.apache.poi.ss.usermodel.Sheet; import org.apache.poi.xssf.usermodel.XSSFWorkbook; public class ExportData { public void export(List<Data> dataList, HttpServletResponse response) throws IOException { // 创建工作簿 XSSFWorkbook workbook = new XSSFWorkbook(); // 创建工作表 Sheet sheet = workbook.createSheet("Sheet1"); // 创建表头 Row header = sheet.createRow(0); header.createCell(0).setCellValue("ID"); header.createCell(1).setCellValue("Name"); header.createCell(2).setCellValue("Age"); // 填充数据 int rowNum = 1; for (Data data : dataList) { Row row = sheet.createRow(rowNum++); row.createCell(0).setCellValue(data.getId()); row.createCell(1).setCellValue(data.getName()); row.createCell(2).setCellValue(data.getAge()); } // 输出文件 response.setContentType("application/vnd.ms-excel"); response.setHeader("Content-Disposition", "attachment; filename=data.xlsx"); workbook.write(response.getOutputStream()); workbook.close(); } public static void main(String[] args) throws IOException { // 测试数据 List<Data> dataList = getDataList(); // 导出数据 ExportData exportData = new ExportData(); HttpServletResponse response = null; // 这里需要传入HttpServletResponse对象 exportData.export(dataList, response); } // 获取测试数据 private static List<Data> getDataList() { // ... } } class Data { private int id; private String name; private int age; // ... } ``` 这个示例使用了 Apache POI 库来操作 Excel 文件。你需要将这个示例中的 `getDataList()` 方法替换为你自己的方法来获取要导出的数据，同时需要根据需要修改表头和数据格式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值