使用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 ...
随机推荐
- Unity5.X 新版AssetBundle打包控制
一.什么是AssetBundle 估计很多人只知道Unity的模型之类的东西可以导出成一种叫做AssetBundle的文件,然后打包后可以在Unity程序运行的时候再加载出来用.那么AssetBund ...
- leetcode：Pascal's Triangle
一. 题目 经典题目,杨辉三角,输入行数.生成杨辉三角的数组. 二. 分析 首先,我们知道有例如以下规律: 1.每一行的第一个数和最后一个数都为1 2.中间的数是上面数和上面数左边的数 ...
- glibc升级小记
2015年元月最后几天,glibc幽灵漏洞来袭,引用 中华财经网的报道 稍做介绍: Linux glibc函数库日前曝出名为GHOST(幽灵)的高危漏洞,漏洞编号是CVE-2015-0235.攻击者可 ...
- Loadrunner_http长连接设置
最近协助同事解决了几个问题,也对loadrunner的一些设置加深了理解,关键是更加知其所以然. ljonathan http://www.51testing.com/html/48/202848-2 ...
- XML基础知识-->Spring配置
XML的特殊字符 XML中共有5个特殊的字符,分别是:&<>“’.如果配置文件中的注入值包括这些特殊字符,就需要进行特别处理.有两种解决方法:其一,采用本例中的<![CDAT ...
- ios开发之--系统控件显示中文
虽然一直知道X-code肯定提供有语言本地化的设置地方,但是一直也做个记录,有些时候的汉化,还是需要使用代码去控制,键盘的右下角.navagiton的return使用代码修改,调用系统相机时,也是出现 ...
- Python 使用正则表达式匹配IP信息
使用正则表达式匹配IP地址 .MAC地址 .网卡名称: #!/usr/bin/env python #-*- coding:utf-8 -*- import re from subprocess im ...
- C语言数组元素的查询
在实际开发中,经常需要查询数组中的元素.例如,学校为每位同学分配了一个唯一的编号,现在有一个数组,保存了实验班所有同学的编号信息,如果有家长想知道他的孩子是否进入了实验班,只要提供孩子的编号就可以,如 ...
- jquery中return false的作用
jquery中的return false既阻止默认事件,又阻止冒泡: 在原生的js中,return false只有一个功能,那就是阻止默认事件. <!DOCTYPE html> <h ...
- 转载 hibernate一级缓存和二级缓存的区别
文章来源:http://blog.csdn.net/defonds/article/details/2308972 hibernate一级缓存和二级缓存的区别 缓存是介于应用程序和物理数据源之 ...