使用echarts绘制统计分析图表（动态从后台获取数据）
说明：实际项目中的统计分析模块不仅需要数据以表格的方式显示，还需要用图形化的方式进一步渲染，以提升数据的客观性，以下是使用echarts来进行绘制统计分析图表的案例：一。第一个静态echarts示例1.echarts的使用教程在官方网站上有详细说明：echarts官网如下图所示：2.这里做一个简单的介绍：首先你需要下载一个echarts官方源码包echarts官方源码包在其中选择自己所...
·
说明：实际项目中的统计分析模块不仅需要数据以表格的方式显示，还需要用图形化的方式进一步渲染，以提升数据的可观性，以下是使用echarts来进行绘制统计分析图表的案例：
一。第一个静态echarts示例
1.echarts的使用教程在官方网站上有详细说明：echarts官网
如下图所示：
2.这里做一个简单的介绍：首先你需要下载一个echarts官方源码包echarts官方源码包
在其中选择自己所需要下载的版本，如下图所示：
3.下载完成后解压，echarts.min.js就是我们需要引用的js文件，把它复制到我们需要进行引用的项目路径下，如下图所示：
4.然后我们在index.html文件中引入该echarts.min.js文件，并在页面定义好显示图表的控件，源代码如下：
// An highlighted block
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
5.打开index.html页面，页面效果如图所示：
6.如果需要实现不同的图表显示功能，在echarts官网上找到对应的实例，更换JavaScript代码块中的option变量就行了，如下图所示：
7.数据可以根据你的需求进行修改，效果图如下：
二。动态echarts示例（从后台获取数据）
说明：在echarts中各个类型数据的显示都需要不同数据来进行传入，我们需要在后台封装好我们所需要显示的数据，再利用ajax去进行调用，获得相应的图表数据。简单来说，每种echarts示例类型所需要的数据都是不尽相同的，echarts需要什么数据我们就把数据封装成什么样子，然后再去给echarts使用，从而达到页面图表渲染的效果。
1.控制器端代码如下所示：
/**
* 工地预警类型统计
*/
@RequestMapping("/cList")
@ResponseBody
public Object cList(@RequestParam(required = false) String beginTime, @RequestParam(required = false) String endTime){
ArrayList<Integer> constructionIdList=new ArrayList<>();
//初始化工地名称集合
ArrayList<String> constructionNameList=new ArrayList<>();
//初始化告警类型为安全帽类型集合
ArrayList<Integer> safetyHatTypeList=new ArrayList<>();
//初始化告警类型为工作服类型集合
ArrayList<Integer> coverallTypeList=new ArrayList<>();
//初始化告警类型为安全带类型集合
ArrayList<Integer> safetyBeltTypeList=new ArrayList<>();
//初始化告警类型为越界告警类型集合
ArrayList<Integer> crossBoundaryTypeList=new ArrayList<>();
//得到所有告警工地id list
constructionIdList=dataStatisticsService.getConstructionId();
//初始化告警类型vo集合
ArrayList<AlarmTypeVo> alarmTypeVoList=new ArrayList<>();
//便利所有告警工地id
for(Integer id:constructionIdList){
//初始化告警类型vo类
AlarmTypeVo alarmTypeVo=new AlarmTypeVo();
alarmTypeVo.setBeginTime(beginTime);
alarmTypeVo.setEndTime(endTime);
//根据告警工地id得到告警工地名称
String conStructionName=dataStatisticsService.getConstructionNameByConstructionId(id);
//加入告警工地名称list中
constructionNameList.add(conStructionName);
alarmTypeVo.setConstructionSite(conStructionName);
//根据工地id查询告警类型为0（安全帽）的总数
int safetyHatCount=dataStatisticsService.getCameraTypeNumber(id,0,beginTime,endTime);
//加入告警类型为0（安全帽）List中
safetyHatTypeList.add(safetyHatCount);
alarmTypeVo.setSafetyHatCount(safetyHatCount);
//根据工地id查询告警类型为1（工作服）的总数
int coverallCount=dataStatisticsService.getCameraTypeNumber(id,1,beginTime,endTime);
//加入告警类型为0（安全帽）List中
coverallTypeList.add(coverallCount);
alarmTypeVo.setCoverallCount(coverallCount);
//根据工地id查询告警类型为2（安全带）的总数
int safetyBeltCount=dataStatisticsService.getCameraTypeNumber(id,2,beginTime,endTime);
//加入告警类型为0（安全帽）List中
safetyBeltTypeList.add(safetyBeltCount);
alarmTypeVo.setSafetyBeltCount(safetyBeltCount);
//根据工地id查询告警类型为3（越界施工）的总数
int crossBoundaryCount=dataStatisticsService.getCameraTypeNumber(id,3,beginTime,endTime);
//加入告警类型为0（安全帽）List中
crossBoundaryTypeList.add(crossBoundaryCount);
alarmTypeVo.setCrossBoundaryCount(crossBoundaryCount);
//加入list中
alarmTypeVoList.add(alarmTypeVo);
}
//初始化json对象
JSONObject jsonData=new JSONObject();
//把需要的数据放入json对象中
jsonData.put("alarmTypeVoList",alarmTypeVoList);
jsonData.put("constructionNameList",constructionNameList);
jsonData.put("safetyHatTypeList",safetyHatTypeList);
jsonData.put("coverallTypeList",coverallTypeList);
jsonData.put("safetyBeltTypeList",safetyBeltTypeList);
jsonData.put("crossBoundaryTypeList",crossBoundaryTypeList);
//返回json对象
return jsonData;
}
2.前台html页面代码如下：
// An highlighted block
@layout("/common/_container.html"){
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>工地预警数据统计</h5>
</div>
<div class="ibox-content">
<div class="row row-lg">
<div class="row">
<div class="col-sm-2">
<#TimeCon id="beginTime" name="录入时间" isTime="false" pattern="YYYY-MM-DD" />
</div>
<div class="col-sm-2">
<#TimeCon id="endTime" name="——" isTime="false" pattern="YYYY-MM-DD" />
</div>
<div class="col-sm-2">
<#button name="搜索" icon="fa-search" clickFun="search()"/>
<!-- <#button name="导出" icon="fa-plus" clickFun=""/>-->
</div>
</div>
<div class="col-sm-12">
<div id="main" style="width: 100%;height:400px;"></div>
</div>
<div class="col-sm-12">
<table id="table">
<thead>
<tr>
<th data-field="beginTime">开始时间</th>
<th data-field="endTime">结束时间</th>
<th data-field="constructionSite">工地地址</th>
<th data-field="safetyHatCount">安全帽</th>
<th data-field="coverallCount">工作服</th>
<th data-field="safetyBeltCount">安全带</th>
<th data-field="crossBoundaryCount">越界施工</th>
</tr>
</thead>
</table>
<#table id="alarmTypeTable"/>
</div>
</div>
</div>
</div>
</div>
</div>
<!--<script src="${ctxPath}/static/modular/system/data/alarmType.js"></script>-->
<script src="${ctxPath}/static/js/echarts.min.js"></script>
<script>
//时间选择控件
laydate.render({
elem: '#beginTime'
});
laydate.render({
elem: '#endTime'
});
//从后台获取图表所需要的json数据
function dataJson(a){
var data=[];
$.ajax({
type : "post",
async : false, //同步执行
url : Feng.ctxPath +"/dataStatistics/cList",
//带入的参数查询条件
data :{beginTime:$("#beginTime").val(),endTime:$("#endTime").val()},
dataType : "json", //返回数据形式为json
success : function(result) {
switch (a) {
//获取工地名称数据
case 0:data=result.constructionNameList;break;
//获取告警类型为安全帽数据
case 1:data=result.safetyHatTypeList;break;
//获取告警类型为工作服数据
case 2:data=result.coverallTypeList;break;
//获取告警类型为安全带数据
case 3:data=result.safetyBeltTypeList;break;
//获取告警类型为越界施工数据
case 4:data=result.crossBoundaryTypeList;break;
//获取告警类型vo集合
case 5:data=result.alarmTypeVoList;break;
}
},
error : function(errorMsg) {
alert("不好意思,图表请求数据失败啦!");
myChart.hideLoading();
}
})
return data;
}
//条件查询为空时
//定义一个接收工地名称数据的变量
var alarmTypeName=dataJson(0);
//定义一个告警类型为安全帽数据的变量
var safetyHat=dataJson(1);
//定义一个告警类型为工作服数据的变量
var coverall=dataJson(2);
//定义一个告警类型为安全带数据的变量
var safetyBelt=dataJson(3);
//定义一个告警类型为越界施工数据的变量
var crossBoundary=dataJson(4);
//初始加载加载图表（无条件时查询时）
initChart();
//初始化以及加载图表
function initChart() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
//图表颜色变化
//color:['#05DDDF', '#E44F5E','#FFB642','#39DD68','#3261FE'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
/* data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']*/
data: ['安全帽', '工作服', '安全带', '越界施工']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
/* data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']*/
data:alarmTypeName
},
series: [
{
name: '安全帽',
type: 'bar',
stack: '总量',
label: {
show: true,
position: 'insideRight'
},
data:safetyHat
},
{
name: '工作服',
type: 'bar',
stack: '总量',
label: {
show: true,
position: 'insideRight'
},
data:coverall
},
{
name: '安全带',
type: 'bar',
stack: '总量',
label: {
show: true,
position: 'insideRight'
},
data:safetyBelt
},
{
name: '越界施工',
type: 'bar',
stack: '总量',
label: {
show: true,
position: 'insideRight'
},
data:crossBoundary
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
//获得后台返回的告警类型vo集合
var data = dataJson(5);
//初始化表格
function initTable() {
$('#table').bootstrapTable({data: data});
}
//初始化加载表格（无条件时查询时）
initTable();
//点击搜素事件
function search(){
//输入条件查询后重新得到条件查询后的数值
alarmTypeName=dataJson(0);
safetyHat=dataJson(1);
coverall=dataJson(2);
safetyBelt=dataJson(3);
crossBoundary=dataJson(4);
//带条件之后重新加载图表
initChart();
//输入条件查询后重新得到条件查询后的数值
data = dataJson(5);
//bootstrapTable清空表格重新加载
$('#table').bootstrapTable('destroy');
//带条件之后重新加载表格
initTable();
}
</script>
@}
3.页面效果图如下所示：
4.输入时间条件查询过后，图表数据发生变化，如下图所示：
总结：echarts通过图表的渲染可以让数据变得更加的可视化，在统计分析模块我们只需要在echarts官网上找到我们所需要的图表实例，根据实例中的data来封装我们的数据，得到相应的图表数据。可视化的图表数据能够提高用户的使用体验，使数据变得直观明了，便于用户对数据的统计分析
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
5
0- 0
已为社区贡献18条内容
所有评论(0)