java图表生成图片_JAVA导出echarts图表图片

最新推荐文章于 2025-06-16 11:18:44 发布

原创最新推荐文章于 2025-06-16 11:18:44 发布 · 679 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java图表生成图片

本文介绍了如何在Java中利用浏览器驱动执行JavaScript来生成ECharts图表的Base64编码，并将其转换为图片。通过引入相关库，如Selenium和PhantomJS，实现在Java中导出ECharts图表到Word文档的功能。具体步骤包括准备工具、下载浏览器驱动、编写代码以初始化ECharts实例、设置图表配置和数据，以及调用核心方法将图表转换为图片。

应用场景

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.selenium/selenium-remote-driver

compile group: 'org.seleniumhq.selenium', name: 'selenium-remote-driver', version: '3.0.1'

// https://mvnrepository.com/artifact/com.codeborne/phantomjsdriver

compile group: 'com.codeborne', name: 'phantomjsdriver', version: '1.2.1'

// https://mvnrepository.com/artifact/org.apache.commons/commons-exec

compile group: 'org.apache.commons', name: 'commons-exec', version: '1.3'

// https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-api

compile group: 'org.seleniumhq.selenium', name: 'selenium-api', version: '3.0.1'

2.下载浏览器驱动

2.具体实现代码(这里一定记得导入jquery-1.9.1.js和echarts.min.js)

ECharts数据统计图

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据

var option = {

"title": {

text: '拱顶下沉-时间曲线图',

x:'center',

y: 'bottom'

'animation': true, // 关闭动画效果

'tooltip': {},

'legend': {

'data':["新","右测点","拱顶","左测点"],

x: 'center',

'xAxis': {

data: ["2018-10-19","2018-10-20","2018-10-21","2018-10-22","2018-10-23","2018-11-07"],

'yAxis': [

{

type: 'value',

show: true, //显示纵轴false-不显示，true-显示

name:'累计值mm' //这里是纵轴标题

}

'series': [

{

color: 'RED',

type: 'line',

data: [0,0.000,5.000,4.000,5.000,4.000]

{

color: 'GREEN',

type: 'line',

data: [0.000,1.000,4.000,4.000,5.000,4.000]

{

color: 'BLUE',

type: 'line',

data: [0.000,1.000,3.000,4.000,5.000,4.000]

{

color: 'PURPLE',

type: 'line',

data: [0.000,1.000,2.000,4.000,5.000,4.000]

]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

//核心方法

function getImage(){

return getFullCanvasDataURL(document.getElementById('main'));

}

function getFullCanvasDataURL(el) {

//将第一个画布作为基准。

var baseCanvas = $(el).find("canvas").first()[0];

if (!baseCanvas) {

return false;

};

var width = el.width;

var height = el.height;

var ctx = baseCanvas.getContext("2d");

//遍历，将后续的画布添加到在第一个上

$(el).find("canvas").each(function(i, canvasObj) {

if (i > 0) {

var canvasTmp = $(canvasObj)[0];

ctx.drawImage(canvasTmp, 0, 0, width, height);

}

});

//获取base64位的url

return baseCanvas.toDataURL('image/png',0.5).replace("data:image/png;base64,","");

}

/**

* 调用本地浏览器驱动生成图片

public static String derverGenerateImag(){

WebDriver driver = getPhantomJSDriver();

//设置超时时间为-1秒

JavascriptExecutor js=(JavascriptExecutor) driver;

driver.get("file:///F:/testfile/html/week_arc_echarts.html");

try {

//休眠2秒等浏览器渲染完成后获取图片

Thread.sleep(2100);

} catch (InterruptedException e) {

e.printStackTrace();

}

//返回图片base64编码

Object res=js.executeScript("return getImage()");

driver.quit();

return String.valueOf(res);

}

public static PhantomJSDriver getPhantomJSDriver(){

//设置必要参数

DesiredCapabilities dcaps = new DesiredCapabilities();

//ssl证书支持

dcaps.setCapability("acceptSslCerts", true);

//截屏支持

dcaps.setCapability("takesScreenshot", false);

//css搜索支持

dcaps.setCapability("cssSelectorsEnabled", true);

//js支持

dcaps.setJavascriptEnabled(true);

//驱动支持

dcaps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY,"F:\\testfile\\html\\phantomjs.exe");

PhantomJSDriver driver = new PhantomJSDriver(dcaps);

return driver;

}

public static void main(String[] args) {

System.out.println(derverGenerateImag());

}

到此结束