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

echarts统计图doc网址：http://echarts.baidu.com/echarts2/index.html

使用echarts，需要引用在js中，如果你已经下载echarts的js包，可以直接引用js，这里我是引用网络的js包。

1. <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

网页打开进行加载事件，一个是echarts统计图的路径配置加载，另外一个是区域事件加载。

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

 

我们加载的 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 = 0;
        var level = 0;
        if (village != "") {
            level = 3;
            AreaId = village;
            name = "村级区域";
        } else {
            if (town != "") {
                AreaId = town;
                level = 2;
                name = "镇级区域";
            } else {
                if (county != "") {
                    AreaId = county;
                    level = 1;
                    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(0, nameArrays.length); //先清空数据，然后在插入
                arrays.splice(0, 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: 0            //用来设置x轴信息是否完全显示,0表示完全显示
                       }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: name,
                            type: 'bar',
                            barWidth: 40,                   // 系列级个性化，柱形宽度
                            itemStyle: {
                                normal: {                   // 系列级个性化，横向渐变填充
                                    borderRadius: 5,
                                    color: (function () {
                                        var zrColor = require('zrender/tool/color');
                                        return zrColor.getLinearGradient(
                                            0, 0, 1000, 0,
                                            [[0, 'rgba(30,144,255,0.8)'], [1, 'rgba(138,43,226,0.8)']]
                                        )
                                    })(),
                                    label: {
                                        show: true,
                                        textStyle: {
                                            fontSize: '20',
                                            fontFamily: '微软雅黑',
                                            fontWeight: 'bold'
                                        }
                                    }
                                }
                            },
                            data: arrays,
                            markLine: {//显示线性数据，最大值，最小值，平均值
                                data: [
                                    { type: 'average', name: '平均值' },
                                    { type: 'max' },
                                    { type: 'min' }
                                ]
                            }
                        }
                    ]
                };
                // 为echarts对象加载数据
                myChart.setOption(option);
            }
        );
    }

 

效果图如下

 

echarts调用起来比较容易，在加上统计图不复杂，做起来也不怎么难，只是第一次接触，要根据自己的要求修改还有许多不太懂。描述的不是怎么好，希望给位不要见怪