• asp.net MVC项目开发之统计图echarts柱状图(一)


    使用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("数据加载异常,请联系管理员");
                }
            });
        }
    View Code

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

        //统计图设置
        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);
                }
            );
        }
    View Code

    效果图如下

     
    echarts调用起来比较容易,在加上统计图不复杂,做起来也不怎么难,只是第一次接触,要根据自己的要求修改还有许多不太懂。描述的不是怎么好,希望给位不要见怪
     
     
  • 相关阅读:
    第四次作业
    随机点名
    表单验证
    冒泡排序&&选择排序
    Equals相等
    String类
    最终类final
    Eclipse的设置
    Equals相等(测试)
    猜数字
  • 原文地址:https://www.cnblogs.com/myhomebo/p/5798585.html
Copyright © 2020-2023  润新知