异步加载Echars +ASP.Net后台（柱状图）

最新推荐文章于 2023-11-20 14:12:42 发布

转载最新推荐文章于 2023-11-20 14:12:42 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lemonmoney/p/6878962.html

文章标签：

#javascript #json #ViewUI

本文介绍如何使用ECharts进行数据统计展示，包括组件下载、单文件引入、准备DOM元素及编写JS代码等步骤，并附带一个异步加载数据的例子。

前言

最近在用Echarts做数据统计,挺不错的一个组件,挺赞的，觉得挺好玩的！！！做了一个简单的小例子。

一、官网下载

地址：http://echarts.baidu.com/echarts2/doc/doc.html

将下载好的源码放到项目中：

二、ECharts单文件引入

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Content/echarts-2.2.7/build/dist/echarts.js"></script>

三、为ECharts准备一个具备大小（宽高）的Dom

<div id="Item" style="height: 400px"></div>

四、JS代码　

require.config({
    paths: {
        //配置图表请求路径 注意路径与JS引入的路径的关系为JS所在的文件夹地址 
        echarts: '/Content/echarts-2.2.7/build/dist'
    }
});
// 使用
require(
    [
        'echarts',
        'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
    ],
    //
    function (ec) {
        var myChart = ec.init(document.getElementById('Item'));
            $.ajax({
                type: "get",
                url: "/Home/GetList",
                data: {},   //dome没加条件
                datatype: "json",
                success: function (data) {
                    var Name = [];
                    var value = [];
                    for (var i = 0; i < data.length; i++) {
                        Name.push(data[i].Name);
                        value.push(data[i].value);
                    }
                    myChart.setOption({
                        title: {
                            text: '异步数据加载示例'
                        },
                        tooltip: {},
                        legend: {
                            data: ['销量']
                        },
                        xAxis: {
                            data: Name
                        },
                        yAxis: {},
                        series: [{
                            name: '销量',
                            type: 'bar',
                            data: value
                        }]
                       
                    });
                }, error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");

                }


            })

      

    })

　五、控制器Cotroller部分

   public ActionResult GetList()
   {
            var xy = infoBLL.GetAllList();
            return Json(xy, JsonRequestBehavior.AllowGet);
    }

六、BLL部分

     [Dependency]
     public InfoDAL infoDAL { get; set; }

     public List<Info> GetAllList()
     {
            var mql = InfoSet.SelectAll();
            List<Info> list = infoDAL.GetEntities(mql);
            return list;
      }

　效果　