asp.net MVC項目開發之統計圖echarts餅形圖（二）

上面介紹了柱狀圖，只有js代碼後臺的傳遞等咱們介紹完餅形圖的使用過程在作介紹

有了柱狀圖的介紹，在使用餅形圖，其實很容易了，上代碼

1.首先加載網頁時，須要用到的加載項和事件。

   //打開網頁加載
    $(function () {
        // 路徑配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        areaQuery();
    })

View Code

2.獲取查詢的區域areaId值，以及查詢區域等級值，把須要的數據異步到後臺進行查詢，爲了防止數據的屢次加載形成數據失真，咱們須要用js中的splice方法先進行清空數據，而後在進行加載數據。

 //查詢操做
    function areaQuery() {
        var name = "婚姻";//戶口性質名稱
        var arrays = new Array();//保存獲取的數據信息
        var nameArrays = new Array();//獲取屬性名稱
        var sum = 0;//數據總和
        var resId = $("#ddlResidence").val();
        if (resId == "") {
            resId = 0;
        } else {
            resId = parseInt(resId);
        }
        var county = $("#ddlCountyArea  option:selected").attr("value");//縣
        var town = $("#ddlTownArea  option:selected").attr("value");//鎮
        var village = $("#ddlSubArea  option:selected").attr("value");//村

        var areaId = 0;
        var level = 0;
        if (village != "") {
            level = 3;
            areaId = village;
        } else {
            if (town != "") {
                areaId = town;
                level = 2;
            } else {
                if (county != "") {
                    areaId = county;
                    level = 1;
                }
            }
        }
        //異步獲取統計圖數據
        $.ajax({
            type: "post",
            url: "@Url.Action("GetMarriageList")",
            datatype: "json",
            data: { areaId: areaId, level: level },
            beforesend: function (xmlhttprequest) {
                $("#pint").text("數據正在加載中，請稍後.........");
            },
            success: function (json) {
                nameArrays.splice(0, nameArrays.length);//先清空數據，而後在插入
                arrays.splice(0, arrays.length); //先清空數據，而後在插入
                for (var item in json) {
                    nameArrays.push(item);
                    arrays.push(parseInt(json[item]));
                    sum = sum + parseInt(json[item]);
                }
                setOptionBar(name, nameArrays, arrays, sum);
            },
            error: function () {
                alert("此區域沒有數據");
            }
        });
    }

View Code

3.餅形圖的設置代碼，根據本身的須要，我作了一些改動。原有功能是，當鼠標移動到統計圖中任意一個統計字段時，字段所表示的環形區域會移位，同時中間圓形顯示字段名稱。改動中間名稱寫死，爲name變量值。爲了讓圓形顯示，咱們須要給他數據，數據變量爲sum，他的值是統計圖中全部字段之和。

  //統計圖設置
    function setOptionBar(name, nameData, arrays, sum) {
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 使用柱狀圖就加載bar模塊，按需加載
            ],
            function (ec) {
                // 基於準備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('main'));
                // 基於準備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('main'));
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: nameData
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: {
                                show: true,
                                type: ['pie']
                            },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: false,
                    series: [
                        {
                            //name:'訪問來源',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: [0, 70],
                            itemStyle: {
                                normal: {
                                    label: {
                                        position: 'center',
                                        textStyle: {
                                            color: '#9966CC',
                                            align: 'center',
                                            baseline: 'middle',
                                            fontFamily: '微軟雅黑',
                                            fontSize: 30,
                                            fontWeight: 'bolder'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    }
                                }
                            },
                            data: [
                                { value: sum, name: name }
                            ]
                        },
                        {
                            name: '結婚狀況',
                            type: 'pie',
                            radius: [100, 140],

                            // for funnel
                            x: '60%',
                            width: '35%',
                            funnelAlign: 'left',
                            max: 1048,

                            data: [
                                { value: arrays[0], name: nameData[0] },
                                { value: arrays[1], name: nameData[1] },
                                { value: arrays[2], name: nameData[2] },
                                { value: arrays[3], name: nameData[3] }
                            ]
                        }
                    ]
                };
                var ecConfig = require('echarts/config');
                myChart.on(ecConfig.EVENT.PIE_SELECTED, function (param) {
                    var selected = param.selected;
                    var serie;
                    var str = '當前選擇： ';
                    for (var idx in selected) {
                        serie = option.series[idx];
                        for (var i = 0, l = serie.data.length; i < l; i++) {
                            if (selected[idx][i]) {
                                str += '【系列' + idx + '】' + serie.name + ' : ' +
                                       '【數據' + i + '】' + serie.data[i].name + ' ';
                            }
                        }
                    }
                    document.getElementById('wrong-message').innerHTML = str;
                })

                myChart.setOption(option);
            })
    }

View Code

上效果圖

 

 餅形圖頁面的處理也就完成了，咱們只是介紹了頁面中處理的js代碼，在測試過程當中，你們能夠先給數據，作出效果，而後在異步獲取後臺數據。