目录
1、准备一个html模板文件,用于加载Echarts并返回Echarts图片
一、资源准备
1、引入selenium-java
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>3.141.59</version>
</dependency>
2、下载ChromeDriver
ChromeDriver下载版本需与本机Chrome浏览器版本对应,有对应的Windows、Mac、Linux版本
ChromeDriver下载地址1 ChromeDriver下载地址2
tips:Chrome 70版本以后ChromeDriver对应的版本和Chrome版本对应,下载对应版本即可,70之前可参考 29~66版本对应关系表
二、编写代码
1、准备一个html模板文件,用于加载Echarts并返回Echarts图片
<html>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<head>
<script src="jquery-1.8.2.min.js"></script>
<script src="echarts.js"></script>
</head>
<body>
<!--准备一个DOM-->
<div id="echartsDemo" style="height:500px;width:500px"></div>
</body>
<script>
var echartsDemo= null;
$(function () {
// 基于准备好的dom,初始化echarts实例
echartsDemo= echarts.init(document.getElementById('echartsDemo'));
});
function loadEcharts(data) {
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
option && echartsDemo.setOption(option);
// 传入参数时使用data
// echartsDemo.setOption(data);
}
function returnEchartImg() {
var url = echartsDemo.getDataURL();
//获取到Echarts图片之后将实例清空
echartsDemo.clear();
return url;
}
</script>
</html>
2、准备加载工具类
Tips:
1、此处 getEchartsPic() 加锁是因为在使用同一个WebDriver时,使用多线程执行时可能会导致线程不安全问题。
2、WebDriver可设置成单例模式,根据需求场景设置即可,也可设置成对象资源池。
/**
* chromeDriver.exe驱动位置
*/
private static String CHROME_DRIVER_URL;
/**
* 模板位置
*/
private static String TEMPLATE_URL;
//从配置中获取参数值
//tips:类上记得加@Component注解
@Value("${selenium.chromedriver.url}")
public void setChromeDriverUrl(String chromeDriverUrl) {
CHROME_DRIVER_URL = chromeDriverUrl;
}
@Value("${selenium.template.url}")
public void setTemplateUrl(String templateUrl) {
TEMPLATE_URL = templateUrl;
}
/**
* 初始化ChromeDriver对象
*/
public static void initWebDriver(){
driver = getWebDriver();
}
/**
* 获取图片byte
*/
//加锁
public synchronized static String getEchartsPic(String option) {
try {
//driver = getWebDriver();
if (driver == null || driver.toString().contains("(null)")){
throw new NullPointerException("WebDriver已关闭,请初始化WebDriver");
}
if (logger.isDebugEnabled()) {
logger.debug("当前系统环境为:" + System.getProperties().getProperty("os.name"));
}
//Resource resource = new ClassPathResource("html/fxm.html");
//driver.get(resource.getFile().getPath());
//访问html,拿到html资源
driver.get(TEMPLATE_URL);
if (logger.isDebugEnabled()) {
logger.debug("当前driver获取到的html资源url:" + driver.getCurrentUrl());
}
//执行html,开始渲染Echarts
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("loadEcharts(" + option + ")");
//延迟1秒等待echarts图绘制完成
//此处可不等待,将Echarts参数中加入animation:false停止动画即可
//Thread.sleep(50);
String imgBase64 = js.executeScript("return returnEchartImg()").toString().replace("data:image/png;base64,", "");
if (logger.isDebugEnabled()) {
logger.debug("当前获取到的图片base64:" + imgBase64);
}
return imgBase64;
} catch (Exception e) {
e.printStackTrace();
}finally {
//此处因场景需要多次执行,将driver实例提供到外层关闭和初始化
//driver.close();
//driver.quit();
}
return null;
}
/**
* 初始化WebDriver
*
* @return
*/
public static WebDriver getWebDriver() {
// 设置ChromeDriver的路径加载驱动
System.setProperty("webdriver.chrome.driver", CHROME_DRIVER_URL);
//设置 chrome 的无头模式
ChromeOptions chromeOptions = new ChromeOptions();
//无头模式
chromeOptions.setHeadless(true);
//地址出现data:,
//chromeOptions.addArguments("--user-data-dir=C:/Users/Administrator/AppData/Local/Google/Chrome/User Data/Default");
//Chrome正在受到显示自动软件的控制 不提示语
chromeOptions.addArguments("disable-infobars");
//禁用gpu加速,没有gpu运行时会报错,但是并不会影响chrome正常运行
chromeOptions.addArguments("--disable-gpu");
//linux版本需要禁用沙盒,linux 下让Chrome在root权限下跑
chromeOptions.addArguments("--no-sandbox");
//启动一个 chrome 实例
return new ChromeDriver(chromeOptions);
}
三、测试
EchartsToPicUtil.initWebDriver();
String base64 = EchartsToPicUtil.getEcharsPic(" {\n" +
" tooltip: {\n" +
" trigger: 'axis',\n" +
" axisPointer: {\n" +
" type: 'shadow'\n" +
" }\n" +
" },\n" +
" grid: {\n" +
" left: '3%',\n" +
" right: '4%',\n" +
" bottom: '3%',\n" +
" containLabel: true\n" +
" },\n" +
" xAxis: [\n" +
" {\n" +
" type: 'category',\n" +
" data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n" +
" axisTick: {\n" +
" alignWithLabel: true\n" +
" }\n" +
" }\n" +
" ],\n" +
" yAxis: [\n" +
" {\n" +
" type: 'value'\n" +
" }\n" +
" ],\n" +
" series: [\n" +
" {\n" +
" name: 'Direct',\n" +
" type: 'bar',\n" +
" barWidth: '60%',\n" +
" data: [10, 52, 200, 334, 390, 330, 220]\n" +
" }\n" +
" ]\n" +
"}");
System.out.println(base64);
WebDriver driver = EchartsToPicUtil.getWebDriverInstance();
driver.close();
driver.quit();
执行成功
四、总结
1、使用场景:在java后台加载Echarts并拿到渲染后的Echarts图后用于生成Word。拿到Base64即可。
2、衍生:该场景只是Selenium+Chrome的使用之一,具体使用自行查阅。
五、问题
1、echarts.getDataUrl()方法默认返回png格式图片,在替换时需修改对应格式,否则会导致颜色加载问题。
2、linux环境启动需禁用沙盒