欢迎加入QQ讨论群258996829
麦子学院 头像
苹果6袋
6
麦子学院

Echarts基础之绘制饼图

发布时间:2016-08-24 17:19  回复:0  查看:3648   最后回复:2016-08-24 17:19  

最近阿里内部使用的 图表也向外开放了 而百度就好像更有良心一点,Echarts 早就开放了 。自己学习Echarts 的时候走了很多的弯路,毕竟谁让自己菜呢,多撞几次南墙才晓得疼 才知道学习方法,新手上路,请多担待。下面就讲一下 饼图 的绘制方法。

 

环境:Echarts 3.19  vs2013  

实现方式:ajax+ashx+json 

注意事项: 官网所需格式为   [{value:23,name:’xxxx’ }]    请将key 的名字不要写错

具体代码,各位看官 请下移目光。

<!--请先引用文件-->
 <script src="../Scripts/jquery-1.8.2.min.js"></script>

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

页面部分就设置一个div 就好了

1

2

<div><input type="button" id="btngo" value="Pie" /> </div>

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

接下来就是js部分了  其实Echarts HTML5中的 Canvans 还是有联系的 想知道的可以查资料哟 

$("#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)’ //这怎么会有个.5呢? 看来还是要看看H5

                            }

                        }

                    }

                ]

            };

            mycharts.setOption(option);

接下来就是 ajax部分了 动态加载数据才是根本的 数据固定多没意思,来干了这碗孟婆汤 来世就做UI设计尸

$.ajax({

                type: "get",

                async: true,            //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)

                url: "../Handler/DepartmentHandler.ashx",   

                data: {},//demo 没加条件

                dataType: "json",        //返回数据形式为json

                success: function (result) {

                    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("图表请求数据失败!");

                        

                    }

 

            });  

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; }           

 

        }

 

附上效果图吧:

如何用Echarts绘制饼图

文章来自:博客园/严芷云

您还未登录,请先登录

热门帖子

最新帖子