现在位置首页 / 项目实战 /正文

java+echarts动态加载各省份的数据

作者: IT小兵 | 2016年12月6日| 热度:℃ | 评论: |参与:

假如从数据库读出以下数据,如何将数据展示在地图之上

    1.部门的名称数据:

 List deptname=[联通事业部-上海联通项目组, 联通事业部-河南联通项目组, 联通事业部-贵州联通项目组, 联通事业部-黑龙江联通项目组, 联通事业部-总部项目中心,
  联通事业部-河北联通项目组, 联通事业部-北京联通项目组, 联通事业部-西藏联通项目组, 联通事业部-湖北联通项目组, 联通事业部-江苏联通项目组, 联通事业部-宝马业务拓展部,
  联通事业部-浙江联通项目组, 联通事业部-重庆联通项目组, 联通事业部-内蒙联通项目组, 联通事业部-四川联通项目组, 联通事业部-海南联通项目组, 联通事业部-研究院项目部,
   联通事业部-宁夏联通项目组, 联通事业部-云南联通项目组, 联通事业部-吉林联通项目组, 联通事业部-甘肃联通项目组]

   2.对应的销售额数据:

List cash:=[5953755, 3822674.83, 2561747.31, 2144649.95, 1674165.5, 1477500, 1456919.64, 1199760, 1126992, 1043040, 1007000, 959140, 950000, 915840, 
584532.4, 350000, 282000, 263990.88, 251500, 240786, 128260]

问题:

   如何将一一对应的数据展示在地图上?

   deptname的数据一一对应cash的数据

  3.java代码处理对应关系

    3.1定义常量省份

private static final String[] province = { "江苏", "青海", "四川", "海南", "陕西", "甘肃", "云南", "湖南", "湖北", "黑龙江", "贵州", "山东",
            "江西", "河南", "河北", "山西", "安徽", "福建", "浙江", "广东", "吉林", "辽宁", "台湾", "新疆", "广西", "宁夏", "内蒙古", "西藏", "北京", "天津",
            "上海", "重庆", "香港", "澳门","南海诸岛"};

 4.通过以下代码实现转换,并存入2个List中,方便echarts调用


private void switchParams(List<String> deptname, List cash) throws IOException {

        // 正则表达式

        List provic = new ArrayList();

        List toCash = new ArrayList();

        for (int i = 0; i < province.length; i++) {

            String regex = province[i];

            Boolean flag = false;

            for (int j = 0; j < deptname.size() && j < cash.size(); j++) {

                String str = deptname.get(j);

                if (str.contains(regex)) {

                    provic.add(regex);

                    toCash.add(cash.get(j));

                    flag = true;

                }

                if (flag) {

                    break;

                } else {

                }

            }

            if(!flag){

                provic.add(regex);

                toCash.add(0);

            }

        }

        setParams(provic,toCash);

    }


    private void setParams(List provic, List toCash) throws IOException {

        Map params = new HashMap();

        params.put("provic", provic);

        params.put("toCash", toCash);

        doEchart(params);

    }

        private void doEchart(Map map) throws IOException {

        HttpServletResponse response =      ServletActionContext.getResponse();

        response.setContentType("text/json; charset=utf-8");

        JSONObject json = new JSONObject();

        json.putAll(map);

        response.getWriter().println(json.toString());

    }

  5.在前端通过ajax来获取数据,进行数据的展示,代码如下:

  

/**
 * 该插件为显示地图的插件,动态加载
 */
function setMapUnion(deptId) {
    /**
     * ajax获取联通事业部的所有项目组的销售额
     */
    var o1 = $("#acctmonth").val();
    var o2 = $("#maxMonth").val();
    var parData = {
        acctmonth : o1,
        maxMonth : o2,
        deptId : deptId
    };
    var par = JSON.stringify(parData);
    /**
     * @author Administrator
     * @params:参数设置:为地图各省份提供数据.
     */
    var provic;
    var toCash;
    $.ajax({
        url : "CompanyFeeBusinessNew!setMapUnion.action",
        data : {
            par : par
        },
        cache : true,
        async : false,
        type : "post",
        success : function(result) {
            provic = result.provic;
            toCash = result.toCash;
        }
    });
    // ----------参数的转换
    var text = null;
    if (deptId == '5271') {
        text = '联通事业部分分省份项目组销售额';
    } else if (deptId == '7658') {
        text = '电信事业部分分省份项目组销售额';
    } else {
        text = '移动事业部分分省份项目组销售额';
    }
    $("#map").css('width', $("#map").width());
    require.config({
        paths : {
            echarts : '/pure/resources/echarts'
        }
    });
    require([ 'echarts', 'echarts/chart/map' ], function DrawEchart(ec) {
        var myChart = ec.init(document.getElementById("map"));
        mapParams = {
            title : {
                text : text,
                // subtext: '纯属虚构',
                left : 'center'
            },
            tooltip : {
                trigger : 'item'
            },
            legend : {
                orient : 'vertical',
                left : 'left',
                data : [ '销售额' ]
            },
            toolbox : {
                show : true,
                orient : 'vertical',
                left : 'right',
                top : 'center',
                feature : {
                    dataView : {
                        readOnly : false
                    },
                    restore : {},
                    saveAsImage : {}
                }
            },
            visualMap : {
                min : 0,
                max : 5000000,
                text : [ 'High', 'Low' ],
                realtime : false,
                calculable : true,
                inRange : {
                    color : [ 'lightskyblue', 'yellow', 'orangered' ]
                }
            },
            dataRange : {
                min : 0,
                max : 2500000,
                x : 'left',
                selectedMode : false,
                y : 'bottom',
                text : [ 'High', 'Low' ], // 文本,默认为数值文本
                calculable : true,
                color : [ '#EE6363', '#CCCCCC' ]
            },
            series : [ {
                name : '销售额',
                type : 'map',
                mapType : 'china',
                roam : false,
                label : {
                    normal : {
                        show : true
                    },
                    emphasis : {
                        show : true
                    }
                },
                data : (function() {
                    var res = [];
                    var len = provic.length;
                    while (len--) {
                        res.push({
                            name : provic[len],
                            value : toCash[len]
                        });
                    }
                    return res;
                })(),
                itemStyle : {
                    normal : {
                        color : '#BF3EFF',
                        borderWidth : 0.5,
                        borderColor : 'black',
                        /* color: 'orange', */
                        label : {
                            show : false
                        }
                    }
                }
            } ]
        };
        myChart.setOption(mapParams);
    });
}

    6.最后,展示效果:(可以根据deptId来动态切换显示图例):

    图1:联通事业部
  

  图2:电信事业部:

  图3:移动事业部
 


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询