使用Echarts进行可视化的数据线呈现
由于游戏后台需要统计游戏玩家的支付情况，恰好那天看见同学群里聊天说到了Echarts，于是我就看了眼，一看，哟，还是百度的产品，看了文档，示例，确实很屌的样子啊，于是自己就开始试了，最终效果如下：
个人还是觉得这个效果挺棒的，清晰地看清了各个渠道、每一天的统计情况，图表是可以放大缩小的，柱状图也能转为折线图，其实我只是用到了Echarts的冰山一角，这是个十分强大的图标工具，官网：http://echarts.baidu.com/ 各位去官网看看文档，看看示例，看看api，就知道这款工具有多么强大，他还支持h5，也就是说，用h5做手机app的时候，也可以在手机端呈现如此强大的报表功能，我就分享一下我做的这个报表的源代码：
前端页面代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<style type="text/css">
#summary {
font-family: "微软雅黑";
padding-left:80px;
padding-top:30px;
padding-bottom:50px;
}
#summary ul li{
margin: 10px;
}
#main{
padding-top:50px
}
</style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 95%; height: 80%"></div>
<div id="summary">
<h3>支付统计情况</h3>
<ul>
<li><h4>总金额（元）：${sum }</h4></li>
<c:forEach items="${channelValMap }" var="pay">
<li><span class="channel">${pay.key }</span>: <span>${pay.value }</span></li>
</c:forEach>
</ul>
</div>
<!-- ECharts单文件引入 -->
<script type="text/javascript">
$('span[class=channel]').each(function() {
$(this).html(replaceChannelName($(this).html()));
});
function replaceChannelName(name) {
if (name == 'ios-haima') {
name = '海马玩（iOS）';
} else if (name == 'android-haima') {
name = '海马玩（安卓）';
} else if (name == 'android-xiaomi') {
name = '小米（安卓）';
} else if (name == 'ios-xy') {
name = 'xy（iOS）';
} else if (name == 'ios-kuaiyong') {
name = '快用（iOS）';
} else if (name == 'android-360') {
name = '360（安卓）';
}
return name;
}
$
.ajax({
type : "GET",
dataType : "text",
url : "../paymgr/payChartHandle",
success : function(data) {
var ret = JSON.parse(data);
// 替换渠道名
for ( var tmp in ret.channelCharts) {
ret.channelCharts[tmp] = replaceChannelName(ret.channelCharts[tmp]);
}
//console.log("====");
for ( var tmp in ret.payChartDatas) {
ret.payChartDatas[tmp].name = replaceChannelName(ret.payChartDatas[tmp].name);
}
// 路径配置
require.config({
paths : {
echarts : 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[ 'echarts', 'echarts/chart/bar',
'echarts/chart/line',
'echarts/component/dataZoom' // 使用柱状图就加载bar模块，按需加载
],
function(ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document
.getElementById('main'));
var option = {
tooltip : {
trigger : 'item'
},
toolbox : {
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
dataZoom : {
show : true,
},
magicType : {
show : true,
type : [ 'line', 'bar',
'stack', 'tiled' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
grid : {
top : '12%',
left : '1%',
right : '10%',
containLabel : true
},
legend : {
data : ret.channelCharts
},
xAxis : [ {
name : '支付日期',
type : 'category',
data : ret.dateCharts
} ],
yAxis : [ {
name : '金额(元)',
type : 'value'
} ],
dataZoom : {
type : 'inside',
show : true,
realtime : true,
y : 36,
height : 20,
backgroundColor : 'rgba(221,160,221,0.5)',
dataBackgroundColor : 'rgba(138,43,226,0.5)',
fillerColor : 'rgba(38,143,26,0.6)',
handleColor : 'rgba(128,43,16,0.8)',
start : 20,
end : 80
},
series : ret.payChartDatas
};
// 为echarts对象加载数据
myChart.setOption(option);
});
},
});
</script>
</body>
Java后台处理：
@RequestMapping(value = "/payChart")
public void payChart(Model model) {
double sum = 0;
// 总金额统计
List<Map<String, Object>> channelSumList = HibernateUtil
.querySql("select sum(amount) as sum,channel from Pay where isFinished=2 group by channel");
Map<String, Double> channelValMap = new HashMap<String, Double>();
for (Map<String, Object> tmpMap : channelSumList) {
double tmpSum = (double) tmpMap.get("sum");
channelValMap.put((String) tmpMap.get("channel"), tmpSum);
sum += tmpSum;
}
model.addAttribute("sum", sum);
model.addAttribute("channelValMap", channelValMap);
}
@RequestMapping(value = "/payChartHandle")
@ResponseBody
public String payChartHandle() {
// 日期数据
List<Map<String, Object>> dateList = HibernateUtil
.querySql("select distinct date(payDate) as paydate from Pay where isFinished=2 order by date(payDate)");
List<String> dateCharts = new ArrayList<String>();
for (Map<String, Object> tmpData : dateList) {
dateCharts.add(String.valueOf(tmpData.get("paydate")));
}
// 渠道数据
List<Map<String, Object>> channelList = HibernateUtil
.querySql("select distinct channel from Pay where isFinished=2");
List<String> channelCharts = new ArrayList<String>();
for (Map<String, Object> tmpChannel : channelList) {
channelCharts.add(String.valueOf(tmpChannel.get("channel")));
}
// 渠道-金额数据
List<PayChartData> payChartDatas = new ArrayList<PayChartData>();
for (Map<String, Object> tmpMap : channelList) {
List<Map<String, Object>> payList = HibernateUtil
.querySql("select sum(amount) as paySum,date(payDate) as paydate from Pay where isFinished=2 and channel='"
+ tmpMap.get("channel")
+ "' group by date(payDate)");
List<Double> sums = new ArrayList<Double>();
for (String tmpDate : dateCharts) {
boolean flag = false;
for (Map<String, Object> tmpPay : payList) {
if (tmpPay.get("paydate").toString().equals(tmpDate)) {
sums.add((Double) tmpPay.get("paySum"));
flag = true;
}
}
if (!flag) {
sums.add(0d);
}
}
PayChartData tmpChartData = new PayChartData();
tmpChartData.setData(sums);
tmpChartData.setName(tmpMap.get("channel").toString());
tmpChartData.setType("bar");
payChartDatas.add(tmpChartData);
}
JSONObject ret = new JSONObject();
ret.put("dateCharts", dateCharts);
ret.put("channelCharts", channelCharts);
ret.put("payChartDatas", payChartDatas);
return JsonUtils.objectToJson(ret);
}
其中PayChartData是一个JavaBean
public class PayChartData {
private String name;
private String type;
private List<Double> data;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public List<Double> getData() {
return data;
}
public void setData(List<Double> data) {
this.data = data;
}
}
然而看完官网你们就知道了，Echarts还能做更多更多的事，我所用到的不是过是其中一小部分而已，这是一个十分强大的报表插件。
使用Echarts进行可视化的数据线呈现的更多相关文章
- Echarts数据可视化series-scatter散点图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-radar雷达图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-pie饼图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-map地图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-line线图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-heatmap热力图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-graph关系图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-effectscatter特效散点图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化radar雷达坐标系，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
随机推荐
- 第二百四十五节，Bootstrap标签页和工具提示插件
Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一．标签页选项卡 标签页也就是通常所说的选项卡功能 ...
- iOS开发之--MVC 架构模式
随着项目开发时间的增加,从刚开始那种很随意的代码风格,逐渐会改变,现在就介绍下MVC的架构模式,MVC的架构模式,从字面意思上讲,即:MVC 即 Modal View Controller(模型 视图 ...
- 修改UE4的deriveddatacache目录位置，扩大C盘空间
按照默认安装目录,UE4会装在C盘 C:\Program Files\Epic Games\UE_4.15 DerivedDataCache缓存目录在 C:\Users\你的用户名\AppData\L ...
- SQL Server计算列
计算列由可以使用同一表中的其他列的表达式计算得来.表达式可以是非计算列的列名.常量.函数,也可以是用一个或多个运算符连接的上述元素的任意组合.表达式不能为子查询. 例如,在 AdventureWork ...
- M451 PWM对照数据手册分析
PWM_T Struct Reference Control Register » Pulse Width Modulation Controller(PWM) typedef struct { ...
- ORA-00972: 标识符过长
若是拼接成的sql语句,请查找传递参数时字符型字段是否两边少了引号.
- 折腾deeplin系统
1.双系统失败记录 多系统启动问题 先安装完deepin,发现再安装windows怎么都起不起来,哪怕他们已经安装在不同的盘 (体现再Windows7通过ghost位于另外一个盘,但就是没有启动项) ...
- HDU 5900 QSC and Master
题目链接:传送门 题目大意:长度为n的key数组与value数组,若相邻的key互斥,则可以删去这两个数同时获得对应的两 个value值,问最多能获得多少 题目思路:区间DP 闲谈: 这个题一开始没有 ...
- c#基础 第四讲
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...
- devops model
1,自动部署() 2,在线监控 (可视化,智能化) 3,故障诊断 (故障识别,故障隔离) 4,快速定位 (识别环境与程序,数据等问题) 评测工具开发---- 统计条目增加大项目: BI中权限―拨测数据 ...