JFinal工作笔记(饼图)

最新推荐文章于 2020-08-13 15:16:25 发布

原创最新推荐文章于 2020-08-13 15:16:25 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用JFinal框架和ECharts库创建动态饼图，展示调查问卷的地区分布统计数据。从Controller层、Service层到前端界面，详细解析了数据处理和图表生成的全过程。

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>