asp.net MVC项目开发之统计图echarts柱状图（一）

我们加载的 areaQuery();这个方法,这里代码没怎么优化，本人非前端，能力有限。欢迎大家提供优化方式。这里主要是区域查询的判断，以及异步获取数据库数据

   //区域查询事件

    function areaQuery() {

        var arrays = new Array(); //村级数据

        var nameArrays = new Array();

        var county = $("#ddlCountyArea  option:selected").attr("value");//县

        var town = $("#ddlTownArea  option:selected").attr("value");//镇

        var village = $("#ddlSubArea  option:selected").attr("value");//村
var AreaId = ;

        var level = ;

        if (village != "") {

            level = ;

            AreaId = village;

            name = "村级区域";

        } else {

            if (town != "") {

                AreaId = town;

                level = ;

                name = "镇级区域";

            } else {

                if (county != "") {

                    AreaId = county;

                    level = ;

                    name = "县级区域";

                }

            }

        }

        //异步获取统计图数据

        $.ajax({

            type: "post",

            url: "@Url.Action("GetCommunityList")",

            datatype: "json",

            data: { areaId: AreaId, level: level },

            beforesend: function (xmlhttprequest) {

                $("#pint").text("数据正在加载中，请稍后.........");

            },

            success: function (json) {

                nameArrays.splice(, nameArrays.length); //先清空数据，然后在插入

                arrays.splice(, arrays.length); //先清空数据，然后在插入

                for (var item in json) {

                    nameArrays.push(item);

                    arrays.push(parseInt(json[item]));

                    setOptionBar(name,nameArrays,arrays);

                }

            },

            error: function () {

                alert("数据加载异常，请联系管理员");

            }

        });

    }

柱状图我根据自己的需要修改了下，因为是查询每次显示一种类型数据即可

    //统计图设置

    function setOptionBar(name, nameArrays, arrays)

    {

        // 使用

        require(

            [

                'echarts',

                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载

            ],

            function (ec) {

                // 基于准备好的dom，初始化echarts图表

                var myChart = ec.init(document.getElementById('main'));
option = {

                    tooltip: {

                        show: true,

                        trigger: 'item'

                    },

                    legend: {

                        data: ['村级区域', '镇级区域', '县级区域']

                    },

                    toolbox: {

                        show: true,

                        feature: {

                            mark: { show: true },

                            dataView: { show: true, readOnly: false },

                            magicType: { show: true, type: ['bar'] },

                            restore: { show: true },

                            saveAsImage: { show: true }

                        }

                    },
xAxis: [

                        {

                            type: 'category',

                            data: nameArrays,

                            axisLabel:

                       {

                           interval:             //用来设置x轴信息是否完全显示,0表示完全显示

                       }

                        }

                    ],

                    yAxis: [

                        {

                            type: 'value'

                        }

                    ],

                    series: [

                        {

                            name: name,

                            type: 'bar',

                            barWidth: ,                   // 系列级个性化，柱形宽度

                            itemStyle: {

                                normal: {                   // 系列级个性化，横向渐变填充

                                    borderRadius: ,

                                    color: (function () {

                                        var zrColor = require('zrender/tool/color');

                                        return zrColor.getLinearGradient(

                                            , , , ,

                                            [[, 'rgba(30,144,255,0.8)'], [, 'rgba(138,43,226,0.8)']]

                                        )

                                    })(),

                                    label: {

                                        show: true,

                                        textStyle: {

                                            fontSize: '',

                                            fontFamily: '微软雅黑',

                                            fontWeight: 'bold'

                                        }

                                    }

                                }

                            },

                            data: arrays,

                            markLine: {//显示线性数据，最大值，最小值，平均值

                                data: [

                                    { type: 'average', name: '平均值' },

                                    { type: 'max' },

                                    { type: 'min' }

                                ]

                            }

                        }

                    ]

                };

                // 为echarts对象加载数据

                myChart.setOption(option);

            }

        );

    }

效果图如下