Ecahrts 3.19 饼图 ajax+ashx+json

最新推荐文章于 2024-11-17 23:25:11 发布

原创最新推荐文章于 2024-11-17 23:25:11 发布 · 2k 阅读

CC 4.0 BY-SA版权

文章标签：

自己是真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; }           

        }