項目中使用ECharts插件實現統計功能

一、前端界面

// 界面中定義一個div，放圖表
<div id="box" style="width: 600px;height:400px;padding: 12px;"></div>

// 引入js文件
<script src="${_b}/themes/${_sysTheme}/echarts/echarts.js"></script>

// 配置ECharts插件（這個實現的是多條折線圖）
<script language="javascript">
	// 基於准備好的dom，初始化echarts實例
    var echartsWarp= document.getElementById('box');  
    var resizeWorldMapContainer = function () {//用於使chart自適應高度和寬度,通過窗體高寬計算容器高寬  
        echartsWarp.style.width = window.innerWidth-70+'px';  
        echartsWarp.style.height = window.innerHeight-100+'px';  
    };  
    resizeWorldMapContainer ();//設置容器高寬
	var myChart = echarts.init(echartsWarp);
	var option = {
		title: {
        	text:"訪問統計"
        },
        legend: {
            data: ['ip', '訪問次數']
        },
        toolbox: { //可視化的工具箱
			show: true,
			right: "10%",         
			feature: {
				restore: { //重置
					show: true
				},
				saveAsImage: {//保存圖片
					show: true
				},
			}
		},
		/* 鼠標懸浮時顯示數據 */
		 tooltip : {
             trigger: 'axis',
             axisPointer : {            // 坐標軸指示器，坐標軸觸發有效
                 type : 'shadow'        // 默認為直線，可選為：'line' | 'shadow'
             }
         },
		xAxis: {
            data: [
                <#if spl?exists>
                	<#list spl as count>
                		"${count.date?default('')}",
                	</#list>
                </#if>
            ]
        },
    	yAxis: {},
        series: [
        {
            name: 'ip',
            type: 'line',
            barWidth: '30%',
            data: [
                <#if spl?exists>
                	<#list spl as count>
	                	${count.ip_num?default('')},
                	</#list>
                </#if>
            ]
        },
        {
            name: '訪問次數',
            type: 'line',
            barWidth: '30%',
            data: [
                <#if spl?exists>
                	<#list spl as count>
	                	${count.fw_num?default('')},
                	</#list>
                </#if>
            ]
        }],
	}
	myChart.setOption(option);
</script>　　

二、后台控制器Controller

@SuppressWarnings("null")
@RequestMapping(value="/*/fwtjEcharts",method=RequestMethod.POST)
public String fwtjEcharts(
			@RequestParam(value = "beginDate", required = true) String beginDate,
			@RequestParam(value = "endDate", required = true) String endDate,
			HttpServletRequest request, HttpServletResponse response,
			ModelMap modelMap) throws SQLException, ParseException {
			List<Map<String, Object>> counts = getCounts(beginDate, endDate,request);
			modelMap.addAttribute("spl", counts);
			modelMap.addAttribute("beginDate", beginDate);
			modelMap.addAttribute("endDate", endDate);
		return "fwtj/fwtjEcharts";
	}