具体属性参考：http://wenku.baidu.com/link?url=7EcOqGOGUxM22mo_nPYO5DhQA7NjephU5en6vi8RLyD-uBJ6tnWxLvtV0AJqyfUSEmkcuDr44BCvePzU269I1IbRn7Rhp2_4pT-BOGVaJnq
实例介绍：
amcharts.js编写：
var ChartsAmcharts = function() {
var initChartTrackState = function(data) {//月 客户各跟踪状态
var chart = AmCharts.makeChart("chart_track_state", {
"theme": "light",
"type": "serial",
"startDuration": 2,
"fontFamily": 'Open Sans',
"color": '#888',
"dataProvider":data,
//Y轴属性设置
"valueAxes": [{
"axisAlpha": 1,//设置Y轴的透明度
"gridAlpha": 0,//网格的透明度
"axisColor":"#FF6600",//轴的颜色
"minimum":0,//Y轴最小值
"integersOnly":true,//是否只显示整数
"position": "left",//Y轴显示的位置
"title": "客户数量(个)"
}],
//图形设置
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"colorField": "color",//图形颜色
"fillAlphas": 0.75,
"lineAlpha": 0.1,
"type": "column",//类型：线状，柱状，饼状
"topRadius": 1,
"valueField": "counts" //绑定数值，与data中的属性名一致
}],
"columnWidth":0.5,//设置每个柱状图的宽度
"depth3D": 30,//设置3D效果
"angle": 20,
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "name",//X轴数值绑定，与data中的属性名一致
//X轴的设置
"categoryAxis": {
"title":"跟踪状态",
"gridPosition": "start",
"axisAlpha": 1,
"gridAlpha": 0
},
"exportConfig": {
"menuTop": "1px",
"menuRight": "1px",
"menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'
}]
}
}, 0);
//chart_track_state前端页面需要显示的div的id
$('#chart_track_state').closest('.portlet').find('.fullscreen').click(function() {
chart.invalidateSize();
});
}
var initChartCloseCustomer = function(data) {//月关单客户
var chart = AmCharts.makeChart("chart_close", {
"theme": "light",
"type": "serial",
"startDuration": 2,
"fontFamily": 'Open Sans',
"color": '#888',
"dataProvider":data,
"valueAxes": [{
"axisAlpha": 1,
"gridAlpha": 0,
"minimum":0,//Y轴最小值
"integersOnly":true,//是否只显示整数
"position": "left",
"title": "客户数量(个)"
}],
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"colorField": "color",
"fillAlphas": 0.75,
"lineAlpha": 0.1,
"type": "column",
"topRadius": 1,
"valueField": "nums"
}],
"columnWidth":0.5,
"depth3D": 30,
"angle": 20,
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": true
},
"categoryField": "yearmonth",
"categoryAxis": {
"title":"年月",
"gridPosition": "start",
"axisAlpha": 1,
"gridAlpha": 0
},
"exportConfig": {
"menuTop": "8px",
"menuRight": "8px",
"menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'
}]
}
}, 0);
$('#chart_close').closest('.portlet').find('.fullscreen').click(function() {
chart.invalidateSize();
});
}
return {
//main function to initiate the module
initChartTrackState: function(date) {
initChartTrackState(date);
},
initCloseCustomer: function(date) {
initChartCloseCustomer(date);
}
};
}();
//前端页面
Version:0.9StartHTML:-1EndHTML:-1StartFragment:0000000111EndFragment:0000039290
<#--<div class="page-sidebar md-shadow-z-2-i navbar-collapse collapse">--> <!-- BEGIN SIDEBAR MENU --> <!-- DOC: Apply "page-sidebar-menu-light" class right after "page-sidebar-menu" to enable light sidebar menu style(without borders) --> <!-- DOC: Apply "page-sidebar-menu-hover-submenu" class right after "page-sidebar-menu" to enable hoverable(hover vs accordion) sub menu mode --> <!-- DOC: Apply "page-sidebar-menu-closed" class right after "page-sidebar-menu" to collapse("page-sidebar-closed" class must be applied to the body element) the sidebar sub menu mode --> <!-- DOC: Set data-auto-scroll="false" to disable the sidebar from auto scrolling/focusing --> <!-- DOC: Set data-keep-expand="true" to keep the submenues expanded --> <!-- DOC: Set data-auto-speed="200" to adjust the sub menu slide up/down speed --> <!-- BEGIN PAGE CONTENT--> <div class="row"> <!-- expect customer begin--> <div class="col-md-6 col-sm-6"> <div class="portlet light"> <div class="portlet-title"> <div class="caption"> <i class="icon-bar-chart font-green-haze"></i> <span class="caption-subject bold uppercase font-green-haze"> 预订签约客户统计</span> </div> </div> <div class="portlet-body"> <div id="chart_expect" class="chart" style="height: 400px;"> </div> </div> </div> </div> <!-- end expect customer--> <!-- begin close customer--> <div class="col-md-6 col-sm-6"> <!-- BEGIN CHART PORTLET--> <div class="portlet light"> <div class="portlet-title"> <div class="caption"> <i class="icon-bar-chart font-green-haze"></i> <span class="caption-subject bold uppercase font-green-haze"> 关单客户统计</span> </div> </div> <div class="portlet-body"> <div id="chart_close" class="chart" style="height: 400px;"> </div> </div> </div> <!-- END CHART PORTLET--> </div> <!-- end close customer--> </div> <div class="row"> <!-- begin trackState --> <div class="col-md-12"> <!-- BEGIN CHART PORTLET--> <div class="portlet light"> <div class="portlet-title"> <div class="caption"> <i class="icon-bar-chart font-green-haze"></i> <span class="caption-subject bold uppercase font-green-haze"> 客户各跟踪状态统计</span> </div> <div class="actions"> <a href="javascript:getMonthData();" class="btn btn-circle red-sunglo btn-sm"> <i class="fa fa-plus"></i> 月报 </a> <a href="javascript:getWeekData();" class="btn btn-circle red-sunglo btn-sm"> <i class="fa fa-plus"></i> 周报 </a> </div> </div> <div class="portlet-body"> <div id="chart_track_state" class="chart" style="height: 400px;"> </div> </div> </div> <!-- END CHART PORTLET--> </div> </div> <!-- END PAGE CONTENT--> <#--</div>--> <!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) --> <!-- BEGIN CORE PLUGINS --> <script src="${CONTEXT_PATH}/static/assets/global/plugins/jquery.min.js" type="text/javascript"></script> <script src="${CONTEXT_PATH}/static/assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script> <!-- IMPORTANT! Load jquery-ui.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip --> <script src="${CONTEXT_PATH}/static/assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script> <script src="${CONTEXT_PATH}/static/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script src="${CONTEXT_PATH}/static/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script> <script src="${CONTEXT_PATH}/static/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script> <script src="${CONTEXT_PATH}/static/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script> <script src="${CONTEXT_PATH}/static/assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script> <script src="${CONTEXT_PATH}/static/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script> <script src="${CONTEXT_PATH}/static/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script> <!-- END CORE PLUGINS --> <!-- BEGIN PAGE LEVEL PLUGINS --> <script src="${CONTEXT_PATH}/static/assets/global/plugins/amcharts/amcharts/amcharts.js" type="text/javascript"></script> <script src="${CONTEXT_PATH}/static/assets/global/plugins/amcharts/amcharts/serial.js" type="text/javascript"></script> <script src="${CONTEXT_PATH}/static/assets/global/plugins/amcharts/amcharts/pie.js" type="text/javascript"></script> <script src="${CONTEXT_PATH}/static/assets/global/plugins/amcharts/amcharts/radar.js" type="text/javascript"></script> <script src="${CONTEXT_PATH}/static/assets/global/plugins/amcharts/amcharts/themes/light.js" type="text/javascript"></script> <script src="${CONTEXT_PATH}/static/assets/global/plugins/amcharts/amcharts/themes/patterns.js" type="text/javascript"></script> <script src="${CONTEXT_PATH}/static/assets/global/plugins/amcharts/amcharts/themes/chalk.js" type="text/javascript"></script> <script src="${CONTEXT_PATH}/static/assets/global/plugins/amcharts/ammap/ammap.js" type="text/javascript"></script> <script src="${CONTEXT_PATH}/static/assets/global/plugins/amcharts/ammap/maps/js/worldLow.js" type="text/javascript"></script> <script src="${CONTEXT_PATH}/static/assets/global/plugins/amcharts/amstockcharts/amstock.js" type="text/javascript"></script> <!-- END PAGE LEVEL PLUGINS --> <!-- BEGIN PAGE LEVEL SCRIPTS --> <script src="${CONTEXT_PATH}/static/assets/global/scripts/metronic.js" type="text/javascript"></script> <script src="${CONTEXT_PATH}/static/assets/admin/layout4/scripts/layout.js" type="text/javascript"></script> <script src="${CONTEXT_PATH}/static/assets/admin/layout4/scripts/demo.js" type="text/javascript"></script> <script src="${CONTEXT_PATH}/static/assets/admin/pages/scripts/charts-amcharts.js"></script> <script src="${CONTEXT_PATH}/static/js/ajax.js"></script> <script src="${CONTEXT_PATH}/static/assets/global/plugins/bootstrap-growl/jquery.bootstrap-growl.min.js"></script> <script> jQuery(document).ready(function() { // initiate layout and plugins Metronic.init(); // init metronic core components Layout.init(); // init current layout Demo.init(); // init demo features getData("${CONTEXT_PATH}/report/countExpectSignCustomer" , function(data) { ChartsAmcharts.initExpectSignCustomer(data); }); getData("${CONTEXT_PATH}/report/countCloseCustomerByMonth" , function(data) { ChartsAmcharts.initCloseCustomer(data); }); getData("${CONTEXT_PATH}/report/countTractStateByMonth" , function(data) { ChartsAmcharts.initChartTrackState(data); }); }); function getWeekData(){ getData("${CONTEXT_PATH}/report/countWeekReportByTackeState" , function(data) { if(data==""){ alert("没有符合条件的记录！"); } ChartsAmcharts.initChartTrackState(data); }); } function getMonthData(){ getData("${CONTEXT_PATH}/report/countTractStateByMonth" , function(data) { if(data==""){ alert("没有符合条件的记录！"); } ChartsAmcharts.initChartTrackState(data); }); } </script>后台json数据绑定：使用的是JFinal框架
Version:0.9StartHTML:-1EndHTML:-1StartFragment:0000000111EndFragment:0000028523
package com.netfinworks.oa.controller; import com.jfinal.core.Controller; import com.jfinal.plugin.activerecord.Db; import com.jfinal.plugin.activerecord.Record; import com.netfinworks.oa.utils.DateUtils; import com.netfinworks.oa.utils.WeekUtils; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; import java.util.List; public class ReportController extends Controller{ /*** * 统计指定日期当月客户各跟踪状态 */ public void countTractStateByMonth() { List<Record> lst = new ArrayList<Record>(); String firstDay = DateUtils.getFirstDay(new Date(), 0); String nextFirstDay = DateUtils.getFirstDay(new Date(), 1); lst = Db.find("select ts.name,count(ch.new_track_state_id) as counts,case when ch.new_track_state_id=1 then 'red'\n" + "\twhen ch.new_track_state_id=2 then 'orange'\n" + "\twhen ch.new_track_state_id=3 then 'yellow'\n" + "\twhen ch.new_track_state_id=4 then 'green'\n" + "\twhen ch.new_track_state_id=5 then 'blue'\n" + "\twhen ch.new_track_state_id=6 then 'purple'\n" + " end as color from customer_history ch,track_state ts,\n" + "(select t.customer_id,max(t.change_time) as change_time from customer_history t where t.change_time between date_format(?,'%Y%m%d') and date_format(?,'%Y%m%d') group by t.customer_id ) as temp \n" + "where temp.customer_id=ch.customer_id and temp.change_time=ch.change_time\n" + "and ts.id=ch.new_track_state_id\n" + "and ch.new_track_state_id is not null group by ch.new_track_state_id", firstDay, nextFirstDay); renderJson(lst); } /** * 统计按周显示客户跟踪状态 * countWeekReportByTackeState */ public void countWeekReportByTackeState(){ List<Record> lst = new ArrayList<Record>(); SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd"); String firstWeek=df.format(WeekUtils.getFirstDayOfWeek(new Date())); String lastWeek=df.format(WeekUtils.getLastDayOfWeek(new Date())); lst=Db.find("\tselect ts.name,ch.new_track_state_id,count(ch.new_track_state_id) as counts,\tcase when ch.new_track_state_id=1 then 'red'\n" + "\twhen ch.new_track_state_id=2 then 'orange'\n" + "\twhen ch.new_track_state_id=3 then 'yellow'\n" + "\twhen ch.new_track_state_id=4 then 'green'\n" + "\twhen ch.new_track_state_id=5 then 'blue'\n" + "\twhen ch.new_track_state_id=6 then 'purple'\n" + " end as color from customer_history ch,track_state ts,\n" + "\t(select t.customer_id,max(t.change_time) as change_time from customer_history t where t.change_time between date_format(?,'%Y%m%d') and date_format(?,'%Y%m%d') group by t.customer_id ) as temp \n" + "\twhere temp.customer_id=ch.customer_id and temp.change_time=ch.change_time\n" + "\tand ts.id=ch.new_track_state_id\n" + "\tand ch.new_track_state_id is not null group by ch.new_track_state_id",firstWeek,lastWeek); renderJson(lst); } /*** * 统计上月、本月、下月关单的客户 *countCloseCustomerByMonth */ public void countCloseCustomerByMonth(){ List<Record> lst = new ArrayList<Record>(); String lastFirstDay=DateUtils.getFirstDay(new Date(),-1);//上月第一天 String firstDay=DateUtils.getFirstDay(new Date(),0);//本月第一天 String nextFirstDay=DateUtils.getFirstDay(new Date(),1);//下月第一天 String neFirstDay=DateUtils.getFirstDay(new Date(),2);//下下月第一天 lst=Db.find("select count(ch.id) as nums,case when count(ch.id)=0 then date_format(?,'%Y%m')\n" + "else date_format(temp.change_time,'%Y%m')\n" + "end as yearmonth from customer_history ch,\n" + "(select t.customer_id,max(t.change_time) as change_time from customer_history t where t.change_time between date_format(?,'%Y%m%d') and date_format(?,'%Y%m%d') group by t.customer_id ) as temp \n" + "where temp.customer_id=ch.customer_id and temp.change_time=ch.change_time\n" + "and ch.new_status_id is not null and ch.new_status_id=2\n" + "union all\n" + "select count(ch.id) as nums,case when count(ch.id)=0 then date_format(?,'%Y%m')\n" + "else date_format(temp.change_time,'%Y%m')\n" + "end as yearmonth from customer_history ch,\n" + "(select t.customer_id,max(t.change_time) as change_time from customer_history t where t.change_time between date_format(?,'%Y%m%d') and date_format(?,'%Y%m%d') group by t.customer_id ) as temp \n" + "where temp.customer_id=ch.customer_id and temp.change_time=ch.change_time\n" + "and ch.new_status_id is not null and ch.new_status_id=2\n" + "union all\n" + "select count(ch.id) as nums,case when count(ch.id)=0 then date_format(?,'%Y%m')\n" + "else date_format(temp.change_time,'%Y%m')\n" + "end as yearmonth from customer_history ch,\n" + "(select t.customer_id,max(t.change_time) as change_time from customer_history t where t.change_time between date_format(?,'%Y%m%d') and date_format(?,'%Y%m%d') group by t.customer_id ) as temp \n" + "where temp.customer_id=ch.customer_id and temp.change_time=ch.change_time\n" + "and ch.new_status_id is not null and ch.new_status_id=2",lastFirstDay,lastFirstDay,firstDay,firstDay,firstDay,nextFirstDay,nextFirstDay,nextFirstDay,neFirstDay); renderJson(lst); } /*** * 统计上月、本月、下月预计签约的客户 */ public void countExpectSignCustomer(){ List<Record> lst = new ArrayList<Record>(); String lastFirstDay=DateUtils.getFirstDay(new Date(),-1);//上月第一天 String firstDay=DateUtils.getFirstDay(new Date(),0);//本月第一天 String nextFirstDay=DateUtils.getFirstDay(new Date(),1);//下月第一天 String neFirstDay=DateUtils.getFirstDay(new Date(),2);//下下月第一天 lst=Db.find("select count(t.id) nums,case when count(t.id)=0 then date_format(?,'%Y%m')\n" + "else date_format(t.expect_sign_time,'%Y%m')\n" + "end as yearmonth from customer t where t.status_id<> 3 and t.expect_sign_time between date_format(?,'%Y%m%d') and date_format(?,'%Y%m%d')\n" + "union all\n" + "select count(t.id) nums,case when count(t.id)=0 then date_format(?,'%Y%m')\n" + "else date_format(t.expect_sign_time,'%Y%m')\n" + "end as yearmonth from customer t where t.status_id<> 3 and t.expect_sign_time between date_format(?,'%Y%m%d') and date_format(?,'%Y%m%d')\n" + "union all\n" + "select count(t.id) nums,case when count(t.id)=0 then date_format(?,'%Y%m')\n" + "else date_format(t.expect_sign_time,'%Y%m')\n" + "end as yearmonth from customer t where t.status_id<> 3 and t.expect_sign_time between date_format(?,'%Y%m%d') and date_format(?,'%Y%m%d')",lastFirstDay,lastFirstDay,firstDay,firstDay,firstDay,nextFirstDay,nextFirstDay,nextFirstDay,neFirstDay); renderJson(lst); } }
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
