JFinal引擎模板饼图制作
创建json文件放置echart实列模板(地区分布情况)
stat_chart.json
{
title: {
text: '调查问卷用户统计分布图',
subtext: '地区分布',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} \<br/>{b} : {c} ({d}%)"
},
toolbox: {
right:20,
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
legend: {
orient: 'vertical',
left: 'center',
bottom: 'bottom',
data: #(regionname)
},
series: [{
type: 'pie',
name: '地区分布',
radius: '55%',
center: ['50%', '60%'],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: #(regionmap)
}]
}
#(regionname) 、#(regionmap)为jfinal模板引擎,regionname、regionmap为Java中拼接的echart模板data字符串
controller层
//饼图
public void stat_chart() {
Long id = getParaToLong();
setAttr("id", id);
Map<String, Long> regionmap = investService.getAllRegion(id); //获取用户地区
Kv data = Kv.create();
//拼接饼图字符串legend和series
String str1="";
String str2="";
int i=1;
//拼接legend :data字符串str1,series:data字符串str2
for(String key : regionmap.keySet()) {
str1 += key;
str2 += "{name:'"+key+"',value:"+regionmap.get(key);
for(;i<=regionmap.size();) {
if(i==regionmap.size())
{ str1 +=""; str2 +="}"; ++i; break; }
else
{ str1 +="','";str2 +="},"; ++i; break; }
}
data.set("regionname", "['"+str1 +"']" );
data.set("regionmap", "["+str2+"]");
}
//获取chart模板,路径自定义
String option1 = Engine.use().getTemplate(PathKit.getRootClassPath() + "/templates/stat_chart.json").renderToString(data);
set("option1", option1);
render("stat_chart.html");
}
Service层
获取地区.getAllRegion()
public Map<String, Long> getAllRegion(Long id) {
String sql=" select DISTINCT " +
" ifnull(u.city,'其它地区') as city ,convert(count(ifnull(u.city,'其它地区'))/(select count(*) from iv_item as ii where ii.lib_id="+id+"),decimal(10,0)) as count " +
" from iv_feedback f " +
" left join sys_user u on f.user_id=u.id " +
" where f.lib_id = " + id +
" group by f.user_id ";
List<Record> record=Db.find(sql);
Map<String, Long> regionmap =new HashMap<String, Long>();
for(Record r : record) {
regionmap.put(r.getStr("city"),r.getLong("count"));
}
return regionmap;
}
前端界面
<div class="container-fluid">
<input type="hidden" id="id" name="id" value="#(id)" />
<div class="col-md-6 col-sm-6" style="width: 100%; height: 100%">
<div id="stat_chart_region" class="CSSAnimationChart"></div>
</div>
</div>
<script src="#(ctx)/assets/global/plugins/counterup/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="#(ctx)/assets/global/plugins/counterup/jquery.counterup.min.js" type="text/javascript"></script>
<script>
$(function () {
var option1 = #(option1);
var myChart = echarts.init(document.getElementById('stat_chart_region'));
myChart.setOption(option1);
})
</script>