SpringBoot纯后台生成Echarts图片（一）
SpringBoot纯后台生成Echarts图片（二）
紧接着前面两篇，本篇采用Freemarker模板来生成Echarts图片。
一. 项目结构
二. Freemarker模板
(1)柱状图
{
"title": {
"text": "${title}",
"textStyle": {
"color": "red",
"fontSize": 15,
"fontWeight": "bolder"
}
},
"tooltip": {
"formatter": "{a}
{b} : {c}",
"show": true
},
"legend": {
"textStyle": {
"color": "red",
"fontSize": 15,
"fontWeight": "bolder"
},
"data": ["${legend}"]
},
"xAxis": [{
"type": "category",
"axisLabel": {
"show": true,
"textStyle": {
"fontSize": 15,
"fontWeight": "bolder"
}
},
"axisLine":{
"lineStyle":{
"color": "#315070",
"width":4
}
},
"data": ${category}
}],
"yAxis": [{
"type": "value",
"axisLabel": {
"show": true,
"textStyle": {
"fontSize": 15,
"fontWeight": "bolder"
}
},
"axisLine":{
"lineStyle":{
"color":"#315070",
"width":4
}
}
}],
"series": [{
"name": "${legend}",
"data": ${values},
"type": "bar",
"label": {
"normal": {
"color": "green",
"fontSize": 15,
"fontWeight": "bolder",
"show": true,
"position": "top"
}
}
}]
}(2)渐变色柱状图
{
"title": {
"text": "${title}",
"textStyle": {
"color": "red",
"fontSize": 15,
"fontWeight": "bolder"
}
},
"toolbox": {
"feature": {},
"show": true
},
"tooltip": {
"formatter": "{a}
{b} : {c}",
"show": true
},
"legend": {
"textStyle": {
"color": "red",
"fontSize": 15,
"fontWeight": "bolder"
},
"data": ["${legend}"]
},
"xAxis": [{
"type": "category",
"axisLabel": {
"show": true,
"textStyle": {
"fontSize": 15,
"fontWeight": "bolder"
}
},
"axisLine":{
"lineStyle":{
"color":'#315070',
"width":4
}
},
"data": ${category}
}],
"yAxis": [{
"type": "value",
"axisLabel": {
"show": true,
"textStyle": {
"fontSize": 15,
"fontWeight": "bolder"
}
},
"axisLine":{
"show":true,
"lineStyle":{
"color":'#315070',
"width":4
}
},
"axisTick": {
"show": true
}
}],
"series": [{
"name": "${legend}",
"type": "bar",
"label": {
"normal": {
"color": "red",
"fontSize": 15,
"fontWeight": "bolder",
"show": true,
"position": "top"
}
},
"data":${values},
"itemStyle": "__itemStyle"
}]
}(3)折线图
{
"title": {
"text": "${title}",
"subtext": "",
"textStyle": {
"color": "red",
"fontSize": 15,
"fontWeight": "bolder"
},
"x": "left"
},
"tooltip": {
"trigger": "axis"
},
"legend": {
"textStyle": {
"color": "red",
"fontSize": 15,
"fontWeight": "bolder"
},
"data": ["${legend}"]
},
"xAxis": [{
"type": "category",
"axisLabel": {
"show": true,
"textStyle": {
"fontSize": 15,
"fontWeight": "bolder"
}
},
"axisLine":{
"lineStyle":{
"color":"#315070",
"width":4
}
},
"boundaryGap": false,
"data": ${category}
}],
"yAxis": [{
"type": "value",
"axisLabel": {
"show": true,
"textStyle": {
"fontSize": 15,
"fontWeight": "bolder"
}
},
"axisLine":{
"lineStyle":{
"color":"#315070",
"width":4
}
}
}],
"series": [{
"smooth": true,
"dataFilter": "nearest",
"lineStyle": {
"color": "red",
"width": 4
},
"legendHoverlink": true,
"name": "${legend}",
"type": "line",
"stack": "总量",
"symbolSize": "15",
"showAllSymbol": true,
"label": {
"normal": {
"color": "green",
"show": true,
"position": "right"
}
},
"data": ${values}
}]
}(4)饼图
{
"calculable": true,
"legend": {
"data": ${types},
"orient": "vertical",
"x": "left",
"textStyle": {
"color": "red",
"fontSize": 15,
"fontWeight": "bolder"
}
},
"series": [{
"center": ["50%", "60%"],
"data": ${datas},
"name": "${title}",
"radius": "65%",
"type": "pie",
"avoidLabelOverlap": true,
"label": {
"normal": {
"show": true,
"position": "top",
"textStyle": {
"color":"red",
"fontSize": "15",
"fontWeight": "bold"
}
},
"emphasis": {
"show": true,
"textStyle": {
"fontSize": "20",
"fontWeight": "bold"
}
}
},
"labelLine": {
"normal": {
"show": true
}
}
}],
"title": {
"subtext": "",
"text": "${title}",
"x": "center",
"textStyle": {
"color": "green",
"fontSize": 20,
"fontWeight": "bolder"
}
},
"toolbox": {
"feature": {
"mark": {
"lineStyle": {
"color": "#1e90ff",
"type": "dashed",
"width": 2
},
"show": true
},
"dataView": {
"lang": ["数据视图", "关闭", "刷新"],
"readOnly": false,
"show": true,
"title": "数据视图"
},
"magicType": {
"show": true,
"title": {
"bar": "柱形图切换",
"stack": "堆积",
"tiled": "平铺",
"line": "折线图切换"
},
"type": ["pie", "funnel"]
},
"restore": {
"show": true,
"title": "还原"
},
"saveAsImage": {
"lang": ["点击保存"],
"show": true,
"title": "保存为图片",
"type": "png"
}
},
"show": true
},
"tooltip": {
"formatter": "{a}
{b} : {c} ({d}%)",
"trigger": "item"
}
}三.插件js（
(1)echarts-util-one.js
phantom.outputEncoding = "gbk";// 为防止输出中文时出现乱码，可设置输出编码格式,写在最顶部
var params = require('system');// 获取系统参数
var server = require('webserver').create(); // 服务端
var port = params.args[3];// 端口,与启动命令有关,不一定是3
var listen = server.listen(port, function(request, response) {// 监听端口
var args = serverGetArgs(request);// 得到网络请求参数
args.response = response;
methodDis(args);
});
var jslib = {
jquery : phantom.libraryPath + '/lib/jquery-3.2.1.min.js',
echarts : phantom.libraryPath + '/lib/echarts.min.js',
china : phantom.libraryPath + '/lib/china.js',
};
function methodDis(args) {
if (args.reqMethod == "table") {
table(args);
} else if (args.reqMethod == "echarts") {
echarts(args);
}
if (args.exit == "true") {
writeResponse(args.response, {
error_no : 0
});
phantom.exit();
}
}
function table(args) {
var page = require('webpage').create();// 打开页面
// 设置分辨率
page.viewportSize = {
width : 1000,
height : 1200
};
// 打开页面
page.open(args.url || 'http://127.0.0.1:8080/hello', function(status) {
if (status == "fail") {
writeResponse(args.response, {
error_no : -1
});
return;
}
page.injectJs(jslib.jquery);
var tableheight = page.evaluate(function() {
return $('body').height() + 20;
});
// 定义剪切范围
page.clipRect = {
top : 0,
left : 0,
width : 1000,
height : tableheight
};
// var base64 = 'data:image/png;base64,' + page.renderbase64('png');
page.render(args.file);// 将整个page保存为文件,可以是png，jpg, gif,pdf
page.close();
writeResponse(args.response, {
error_no : 0
});
});
page.onError = function(msg, trace) {
writeResponse(args.response, {
error_no : -1,
error_info : trace
});
};
}
function echarts(args) {
var page = require('webpage').create(); // 客户端
page.open("about:blank", function(status) {// 空白页
page.injectJs(jslib.jquery);
page.injectJs(jslib.echarts);
page.injectJs(jslib.china);
var pageBody = page.evaluate(function(args) {
// 动态加载js，获取options数据 实现渐变效果
var itemStyle = '{"normal":{"color" : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ '
+ '{offset : 0, color : "#83bff6"}, {offset : 0.5,color : "#188df0"}, {offset : 1,color : "#188df0"} ])}}';
// 动态加载js，获取options数据
$('