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調用起來比較容易，在加上統計圖不復雜，做起來也不怎么難 ，只是第一次接觸，要根據自己的要求修改還有許多不太懂。描述的不是怎么好，希望給位不要見怪