緊接著前面兩篇，本篇采用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',
};
/**
*?請求分發
*
*?@author?liansh
*?@data?2019年9月19日?下午11:32:59
*?@param?args
*/
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)?{//?空白頁
/**
*?報錯{"file":"undefined","line":3,"function":""},{"file":"","line":18,"function":""}
*?"file":"undefined"?為所引用的jslib文件路徑不對,需要重新檢查路徑
*/
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數據
$('
+?JSON.stringify(args.opt).replace('\"__itemStyle"',?itemStyle)).appendTo(document.head);
//?取消動畫,否則生成圖片過快，會出現無數據
if?(options?!==?undefined)?{
options.animation?=?false;
}
//?body背景設置為白色
$(document.body).css('backgroundColor',?'white');
//?echarts容器
var?container?=?$("
width?:?args.width,
height?:?args.height
}).appendTo(document.body);
var?eChart?=?echarts.init(container[0]);
eChart.setOption(options);
},?args);
//?定義剪切范圍
page.clipRect?=?{
top?:?0,
left?:?0,
width?:?args.width?-?100,
height?:?args.height?+?10
};
//?var?base64?=?'data:image/png;base64,'?+?page.renderBase64('png');
//?writeResponse(args.response,?{//?返回給http請求
//?error_no?:?0,
//?base64?:?base64
//?});
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?writeResponse(response,?msg)?{
response.write(JSON.stringify(msg?||?{
error_no?:?0
}));
response.close();
}
/**
*?獲取請求參數
*
*?@author?liansh
*?@data?2019年9月19日?下午11:27:16
*?@param?request
*?@returns
*/
function?serverGetArgs(request)?{
var?args?=?{};
if?('GET'?===?request.method)?{
var?index?=?request.url.indexOf('?');
if?(index?!==?-1)?{
pairs?=?request.url.substr(index?+?1).split("&");
for?(var?i?=?0;?i?<?pairs.length;?i++)?{
var?pos?=?pairs[i].indexOf('=');
if?(pos?===?-1)
continue;
var?key?=?pairs[i].substring(0,?pos);
var?value?=?pairs[i].substring(pos?+?1);
//?中文解碼，必須寫兩層
value?=?decodeURIComponent(decodeURIComponent(value));
args[key]?=?value;
}
}
}?else?if?('POST'?===?request.method)?{
args?=?JSON.parse(request.post);
}
args.width?=?args.width?||?1000;
args.height?=?args.height?||?400;
return?args;
};
另外涉及到的js(jquery-3.2.1.min.js? ? echarts.min.js? ?china.js) 請到https://gitee.com/saintlee/echartsconvert/tree/master?這里下載。
說明：echarts-util-one.js是重新改造的，之前是利用echartsconvert這個插件來生成圖表的，但是echartsconvert這個插件不能生成餅圖，所以就改造了echarts-util-one.js
三.環境配置說明
可以結合前面兩篇看，首先安裝phantomjs-2.1.1-windows，然后在其bin目錄下，放入echarts-util-one.js以及相關lib包下的js(jquery-3.2.1.min.js? ? echarts.min.js? ?china.js)，然后啟動服務即可，命令如下：
D:\>cd?D:\softpack\echarts\phantomjs-2.1.1-windows\bin
D:\softpack\echarts\phantomjs-2.1.1-windows\bin>phantomjs?D:\softpack\echarts\phantomjs-2.1.1-windows\bin\echarts-util-one.js?-s?-p?6668
四.測試效果
(1)柱狀圖{
"barParamList":?{
"barName":?[
"A罩杯",?"B罩杯",?"C罩杯",?"D罩杯",?"E罩杯",?"F罩杯","G罩杯"
],
"barValue":?[
43364,?13899,?12000,?2181,?21798,?1796,?1300
],
"legendName":?"胸罩圖例"
},
"horizontal":?true,
"title":?"胸罩使用人數"
}
(2)折線圖{
"horizontal":?true,
"lineParam":?{
"legendName":?"胸罩圖例",
"xdatas":?[
[
43364,?13899,?12000,?2181,?21798,?1796,?1300
]
],
"ydatas":?[
"A罩杯",?"B罩杯",?"C罩杯",?"D罩杯",?"E罩杯",?"F罩杯","G罩杯"
]
},
"title":?"胸罩使用人數"
}
(3)餅圖{
"datas":?[
43364,?13899,?12000,?2181,?21798,?1796,?1300
],
"title":?"胸罩圖例",
"types":?[
"A罩杯",?"B罩杯",?"C罩杯",?"D罩杯",?"E罩杯",?"F罩杯","G罩杯"
]
}
效果展示：
漸變色柱狀圖
分享就到這里，代碼后續會開源出來，如果幫助到你了，請點個贊，感謝你的支持！如果你需要源代碼，可以聯系我！
在此，為你推薦幾門優秀的課程：
)
