Echart ajax动态调取后台数据

来源:互联网 发布:2016淘宝店铺二级域名 编辑:程序博客网 时间:2024/06/06 19:11

前台:

<script src="Scripts/jquery-1.6.2.min.js"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        var json = [];
        var myChart;
        //ajax动态获取数据
        $.ajax({
            type: 'post',
            url: 'PieHandler.ashx',
            dataType: 'json',
            async: false,
            success: function (result) {
                //alert(result);           
                json = result;


            },
            error: function () {
                alert("Error");
            }
        });
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 使用柱状图就加载pie模块,按需加载
            ],
            function (ec) {
                // 基于准备好的dom,初始化echarts图表
                myChart = ec.init(document.getElementById('main'));
                var option = {
                    title: {
                        text: '部门人口比例',
                        subtext: '测试数据',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: ['业务部', '财务部', '事业部', '质量部', '研发部','市场部','人事部']
                    },
                    calculable: true,
                    series: [
                        {
                            name: '2017年',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: json
                        }
                    ]
                };
                // 为echarts对象加载数据
                myChart.setOption(option);        
            }
        );
    </script>

<div id="main" style="height:400px;width:800px;"></div>


后台:

public void ProcessRequest(HttpContext context)
        {
            //声明并实例化datatable


            DataTable dt = new DataTable();


            //实例化二个列
            DataColumn dc1 = new DataColumn("value", System.Type.GetType("System.Int32"));


            DataColumn dc2 = new DataColumn("name", System.Type.GetType("System.String"));


            dt.Columns.Add(dc1);


            dt.Columns.Add(dc2);


            //添加四条数据    


            DataRow row = dt.NewRow();
            row["value"] = "13";
            row["name"] = "业务部";
            dt.Rows.Add(row);


            row = dt.NewRow();


            row["value"] = "7";
            row["name"] = "财务部";
            dt.Rows.Add(row);


            row = dt.NewRow();


            row["value"] = "20";
            row["name"] = "事业部";
            dt.Rows.Add(row);


            row = dt.NewRow();


            row["value"] = "15";
            row["name"] = "质量部";
            dt.Rows.Add(row);


            row = dt.NewRow();


            row["value"] = "30";
            row["name"] = "研发部";
            dt.Rows.Add(row);


            row = dt.NewRow();


            row["value"] = "10";
            row["name"] = "市场部";
            dt.Rows.Add(row);


            row = dt.NewRow();


            row["value"] = "5";
            row["name"] = "人事部";
            dt.Rows.Add(row);


            string json2 = FormatToJson.ToJson(dt);
            context.Response.Write(json2);
     
        }