asp.net MVC项目开发之统计图echarts饼形图（二）

上面介绍了柱状图，只有js代码后台的传递等我们介绍完饼形图的使用过程在做介绍

有了柱状图的介绍，在使用饼形图，其实很容易了，上代码

1.首先加载网页时，需要用到的加载项和事件。

   //打开网页加载
    $(function () {
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        areaQuery();
    })

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("此区域没有数据");
            }
        });
    }

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

上效果图

 

 饼形图页面的处理也就完成了，我们只是介绍了页面中处理的js代码，在测试过程中，大家可以先给数据，做出效果，然后在异步获取后台数据。