一、前端界面
// 界面中定义一个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";
}