项目中使用ECharts插件实现统计功能

一、前端界面

// 界面中定义一个div，放图表
<div id="box" style=" 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";
	}