您的位置：首页 > 其它

【食堂管理项目记录】Echarts的使用

2018-03-25 18:46 232 查看

这回做图表分析的时候发现了一个比较好看也好用的，一个使用 JavaScript 实现的开源可视化库ECharts
他的网站：http://echarts.baidu.com/
下载：http://echarts.baidu.com/download.html
我一般要好看的话就直接下他的完整版了。
用它来实现食堂的数据分析。

日期查询的组件用的是layui的日期选择器。<%@ page language="java" import="java.sql.*,java.io.*,java.util.*,model.Cafe" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="./layui/css/layui.css"/>
<script src="./layui/layui.js"></script>
<script src="./js/echarts.min.js"></script>
<title></title>
</head>
<body style="width:1080px;">
<div style="margin-top:30px;margin-left:250px;margin-right:50px;">
<form method="post" action="CafeChartServlet">
<div class="layui-inline">
<label class="layui-form-label">查询日期</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test1" name="test1" placeholder="yyyy-MM-dd">
</div>
</div>
<script>
layui.use('laydate', function(){
var laydate = layui.laydate;
laydate.render({
elem: '#test1'
});
});
</script>
<div class="layui-inline">
<div calss="layui-input" style="margin-left:30px;">
<input type="submit" class="layui-btn layui-btn-normal" value="查询">
</div>
<script type="text/javascript">
function btnSubmitForm(o) {

}
</script>
</div>
</form>
</div>
<hr/>
<%
request.setCharacterEncoding("UTF-8");
ArrayList<Cafe> cafelist = (ArrayList)request.getAttribute("cafelist");
%>
<script type="text/javascript">
var list=[];//大的集合
//集合对象
<%
if(cafelist!=null){
for(int i=0;i<cafelist.size();i++){
Cafe cafe=(Cafe)cafelist.get(i);
%>
var obj = new Object();
obj.name= "<%=cafe.getCafe()%> ";
obj.value= "<%=cafe.getAmount()%> ";
list.push(obj);
<% }} %>

</script>


<div id="main" style="width: 600px;height:400px;padding-left:200px;padding-top:50px"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据

option = {
backgroundColor: '#2c343c',

title: {
text: '各食堂营业额分布',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},

tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},

visualMap: {
show: false,
min: 0,
max: 300,
inRange: {
colorLightness: [0, 1]
}
},
series : [
{
name:'食堂',
type:'pie',
radius : '55%',
center: ['50%', '50%'],
data:list.sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},

animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
<input type="text" class="layui-input" id="test1">

<script>
layui.use('laydate', function(){
var laydate = layui.laydate;

//执行一个laydate实例
laydate.render({
elem: '#test1' //指定元素
});
});
</script>
</body>
</html>基本上就是照着官网上的教程扒下来的，后台用一个servlet来实现数据查询，然后返回一个ArrayList就可以了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航