asp.net mvc +echarts 实现数据图表展示效果

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、效果请看如下截图