Ecahrts 3.19 饼图 ajax+ashx+json

自己是真low 现在把东西做出来了之后 觉得自己走了太多弯路 还是不会自己学习 没有自学能力，这一次还是收获很多的 毕竟是自己一个人啃下来的 中途也有问同事、朋友 但是都没有做过这个 ，谢谢他们给的提醒 。有时候他们的建议 让我知晓了写学习的方法吧 从源头下手，一切就会来的简单多了 。

依旧是老样子 看Ecahrts官网 如需下载Echarts 文件 =》 文件下载

接下来就会饼图的代码了 ：

文件的引用：

    <script src="../Scripts/jquery-1.8.2.min.js"></script>
    <script src="../Scripts/echarts/echarts.min.js"></script>

HTML代码：

 <div><input type="button" id="btngo" value="Pie" /> </div>
    <div id="contanis" style="width:800px;height:800px"></div>

设置图片的 option

 $("#btngo").click(function () { //这里用的是点击事件下面 当然这也是模仿你有条件查询的时候咯
             var dom = document.getElementById('contanis');
            var mycharts = echarts.init(dom);
            option = {
                title: {
                    text: '部门人口比例',
                    subtext: '测试数据',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: []
                },
                series: [
                    {
                        name: '2012年度',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            mycharts.setOption(option);

ajax 里面书写的代码

$.ajax({
                type: "get",
                async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url: "../Handler/DepartmentHandler.ashx",    
                data: {},//demo 没加条件
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    var name = [];
                    var values = [];                   
                    for (var i = 0; i < result.length; i++)
                    {
                        name.push(result[i].name);                        
                    }                   
                    mycharts.setOption({ //加载数据图表
                        legend:{data:name },
                        series: [{
                            data:result
                        }]
                    });

                },
                    error: function (errorMsg) {
                        //请求失败时执行该函数
                        alert("图表请求数据失败!");
                        //myChart.hideLoading();
                    }

            });   

在ashx 里面

             DataTable result = BLL.Department.GetDeptNumber();          
            List<object> list = new List<object>();
            foreach (DataRow dr in result.Rows)
            {
            // 附上Echarts 所需的格式：[{value:335, name:'直接访问'}]

                Deart d = new Deart();
                d.value = Convert.ToInt32(dr["number"]);
                 //自己粗心 用values Echarts 不认 一直就是undefined 
                d.name = dr["D_Name"].ToString();                
                list.Add(d);
            }
            JavaScriptSerializer jss = new JavaScriptSerializer();
            string json = jss.Serialize(list);

public class Deart   //其实可以不用这么定义  自己保险让它出来的 value 值为int
        {
            public int value { get; set; }
            public string name { get; set; }           

        }

demo已经附上 如果很看到代码 你会觉得这小伙子 确实菜
资源里面有 请查阅