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 geteve艘绒庳焰nts() { 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、效果请看如下截图
