JAVA导出echarts图表图片
2018-11-20 本文已影响0人
Levine_8582
应用场景
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.下载浏览器驱动
我这里用的phantomjsdriver
2.具体实现代码（这里一定记得导入jquery-1.9.1.js和echarts.min.js）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts数据统计图</title>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width:560px; height:270px;"></div>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript">
// 基于准备好的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': [
{
name: '新',
color: 'RED',
type: 'line',
data: [0,0.000,5.000,4.000,5.000,4.000]
},
{
name: '右测点',
color: 'GREEN',
type: 'line',
data: [0.000,1.000,4.000,4.000,5.000,4.000]
},
{
name: '拱顶',
color: 'BLUE',
type: 'line',
data: [0.000,1.000,3.000,4.000,5.000,4.000]
},
{
name: '左测点',
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,","");
}
</script>
</body>
</html>
/**
* 调用本地浏览器驱动生成图片
*/
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());
}
