1、引入js 插件
<script src="~/Content/js/jquery/jquery-2.1.1.min.js"></script>
<script src="~/Content/js/charts/Chart.js"></script>
<script src="~/Content/js/echarts/echarts.min.js"></script>
2、编写html 代码
<div style="float: left; width: 49.5%;">
<div style="height: 350px; border: 0px solid #e6e6e6; background-color: #fff;">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-bar-chart fa-lg" style="padding-right: 5px;"></i>安全事件统计
<div style="float: right">
<a href="javascript:void(0)" onclick="getmore('aqsj')" style="">查看更多</a>
</div>
</div>
<div class="panel-body" style="padding-bottom: 0px;">
<span id="jz1">拼命加载数据中...<img src="~/Content/js/dialog/img/loading-2.gif" /></span>
<div id="main" style="width: 100%;height:400px;"></div>
</div>
</div>
</div>
</div>
3、编写js代码
//按照事件状态进行安全事件统计
function getevents()
{
var catarray;
var serarray;
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
$.ajax({
url: "/SecurityManagement/securityData/getEventJson",
dataType: "json",
async: true,
success: function (data) {
catarray = data.type;
console.log(catarray);
serarray = data.typecount;
var option = {
title: {
text: '安全事件统计'
},
tooltip: {},
legend: {
data: ['安全事件']
},
xAxis: {
data: catarray
},
yAxis: {},
series: [{
name: '安全事件',
type: 'bar',//bar
data: serarray
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
$("#jz1").css("display", "none");
}
})
}
4、编写后台代码
//统计不同状态安全事件数量
public ActionResult getEventJson()
{
string areaorganize = HttpContext.Request.Cookies["SCid"].Value;//当前水厂
var data = from s in db.yjevent where s.deleteMark != true && s.organizeid == areaorganize select s;
string []type = {"待受理", "处理中", "跟踪处理", "待验收", "完成处理"};
//定义一个字符串数组
string[] typecount = new string[type.Count()];
string type_id = null;
for (int i = 0; i < type.Count(); i++)
{
type_id = type[i];
var filedata = data.Where(s=>s.state == type_id).Count();
typecount[i] = filedata.ToString();
}
var result = new
{
type=type,
typecount = typecount
};
return Content(result.ToJson());
}
5、效果请看如下截图
