Vue.js ECharts使用
一、介绍
ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。ECharts 提供了丰富的图表类型和交互能力,使用户能够通过简单的配置生成各种各样的图表,包括但不限于折线图、柱状图、散点图、饼图、雷达图、地图等。安装方式:
- CDN: http://cdn.staticfile.net/echarts/4.3.0/echarts.min.js
- NPM:npm install echarts –save
二、使用echarts展示每日网站访问量
通过查询登录日志表展示为如下样式:
前端vue代码,一共有两个分别是每日访问量的折线图和性别人数的柱状图。访问量请求后端数据,性别则使用了假数据。
业务层逻辑处理
@Override
public Map<String, List> selLoginLogChart(String s) {
List<Map> list = logoMapper.selLoginLogChart(s);
// 查询结果是Date类型,需要格式化
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
Map<String, List> resultMap = new HashMap();
List dateList = new ArrayList();
List countList = new ArrayList();
for (Map map : list) {
dateList.add(dateFormat.format(map.get("date")));
countList.add(map.get("count") + "");
}
resultMap.put("dateList", dateList);
resultMap.put("countList", countList);
return resultMap;
}
sql语句,因为日期是年月日时分秒,所以需要使用DATE()提取出年月日进行分组查询。
select DATE(logintime) as date, count(*) as count
from loginlog
where logintime >= #{s}
group by date