99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

Echarts基礎(chǔ)之繪制餅圖

發(fā)布時間：2016-08-24 17:19  回復(fù):0  查看:3868   最后回復(fù)：2016-08-24 17:19  

最近阿里內(nèi)部使用的 圖表也向外開放了 而百度就好像更有良心一點，Echarts 早就開放了 。自己學(xué)習(xí)Echarts 的時候走了很多的彎路，畢竟誰讓自己菜呢，多撞幾次南墻才曉得疼 才知道學(xué)習(xí)方法，新手上路，請多擔待。下面就講一下 餅圖 的繪制方法。

 

環(huán)境：Echarts 3.19  vs2013  

實現(xiàn)方式：ajax+ashx+json 

注意事項： 官網(wǎng)所需格式為   [{value:23,name:’xxxx’ }]    請將key 的名字不要寫錯

具體代碼，各位看官 請下移目光。

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

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

頁面部分就設(shè)置一個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 還是有聯(lián)系的 想知道的可以查資料喲 

$("#btngo").click(function () { //這里用的是點擊事件下面 當然這也是模仿你有條件查詢的時候咯

            var dom = document.getElementById(’contanis’);

            var mycharts = echarts.init(dom);

            option = {

                title: {

                    text: ’部門人口比例’,

                    subtext: ’測試數(shù)據(jù)’,

                    x: ’center’

                },

                tooltip: {

                    trigger: ’item’,

                    formatter: "{a} <br/> : {c} (880ssss%)"

                },

                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部分了 動態(tài)加載數(shù)據(jù)才是根本的 數(shù)據(jù)固定多沒意思，來干了這碗孟婆湯 來世就做UI設(shè)計尸

$.ajax({

                type: "get",

                async: true,            //異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執(zhí)行）

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

                data: {},//demo 沒加條件

                dataType: "json",        //返回數(shù)據(jù)形式為json

                success: function (result) {

                    for (var i = 0; i < result.length; i++)

                    {

                        name.push(result[i].name);                       

                    }                  

                    mycharts.setOption({ //加載數(shù)據(jù)圖表

                        legend:{data:name },

                        series: [{

                            data:result

                        }]

                    });

 

                },

                    error: function (errorMsg) {

                        //請求失敗時執(zhí)行該函數(shù)

                        alert("圖表請求數(shù)據(jù)失敗!");

                        

                    }

 

            });  

ashx部分就簡單多了 單純的序列化數(shù)據(jù)

 

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繪制餅圖

文章來自：博客園/嚴芷云

您還未登錄，請先登錄

熱門帖子

最新帖子

?