java为后台echarts在地图上各个区域显示叠加柱状图

简单分三步

1. 数据库
2. 后台
3. 前台

数据库

我们在数据库通常都会根据每一个区域进行分组查询，剩下的根据业务需求就可以了，以下为我在写项目的时候写的sql

select count(*) projectCount, consType, bct.name addr_scope
        from (select zr_deptId,
                     CASE
                         WHEN consType in ('JCX', 'JCXXM') THEN '基础性'
                         WHEN consType in ('GYX', 'GYXXM') THEN '公益性'
                         WHEN consType in ('CYFZ', 'CYFZXM') THEN '产业发展'
                         else '其他'
                         END AS consType
              from bus_project a
              where zr_deptId in (select companyId from bus_company_tree where parentId =1)and zr_deptId is not null) a
              left join (select * from bus_company_tree where parentId =1) bct on bct.companyId = a.zr_deptId
        group by consType, bct.name

后台

后台我们后台用java写的所以我就以我的当前项目为准，其他就不多说了，最关键的一步就是过滤，我们需要把每个相同的区域进行过滤，使其变为一个区域，这样以便为了前台的展示，以下为关键代码

 List<IndustryProjectStatAnalyBO> idustryProjectStatAnalyBOList =
                    industryProjectStatAnalyMapper.selectIndustryProjectData();
            HashMap<Object, Object> newHashMap = Maps.newHashMap();
            HashMap<Object, List<IndustryProjectStatAnalyBO>> newHashMap1 = Maps.newHashMap();
            idustryProjectStatAnalyBOList.forEach(industryProjectStatAnalyBO -> {
                        String key = industryProjectStatAnalyBO.getAddr_scope();
                        if (newHashMap1.containsKey(key)) {
                            newHashMap1.get(key).add(industryProjectStatAnalyBO);
                        } else {
                            List<IndustryProjectStatAnalyBO> list = new ArrayList<>();
                            list.add(industryProjectStatAnalyBO);
                            newHashMap1.put(key, list);
                        }
                        });
            newHashMap.put("industryAnalysis", newHashMap1);

前台

前台因为使用了echarts和地图所以需要导入echarts和地图.js，废话不多说粘贴关键代码，哈哈

/*行业项目统计分析*/
function method6() {
    var requestUrl = url + "/overviewe/industry/statistics/analysis";
    get(requestUrl, {}, function (data) {
        if (data) {
            //地图获取后台返回来的数据
            //地图展示数据
            var mapData = [];
            //获取key数组
            var xArr=[];
            //返回来的数组
            var industryAnalysis = data.industryAnalysis;
            for (var key in industryAnalysis) {
                xArr.push(key);
            }
            for (var i=0;i<xArr.length;i++){
                var addr_scope = xArr[i];
                var areaData = industryAnalysis[addr_scope];
                if (addr_scope=='瓯江口产业集聚区') {
                    addr_scope='瓯江口';
                }
                else if (addr_scope=='温州高新区（浙南科技城）') {
                    addr_scope='科技城';
                }
                else if (addr_scope=='雁荡山风景名胜区') {
                    addr_scope='雁荡山';
                }
                else if (addr_scope=='温州生态园') {
                    addr_scope='生态园';
                }
                else if (addr_scope=='浙南产业集聚区') {
                    addr_scope='经开区';
                }
                else if (addr_scope=='市名城集团') {
                    addr_scope='市名城';
                }
                else if (addr_scope=='市城投集团') {
                    addr_scope='市城投';
                }
                var obj = [addr_scope, 0, 0, 0, 0];
                for (var k=0;k<areaData.length;k++){
                    var state=areaData[k].consType;
                    var projectCount = areaData[k].projectCount;
                    if (state == "基础性"){
                        obj[1]=projectCount;
                    }
                    else if (state == "公益性"){
                        obj[2]=projectCount;
                    }
                    else if (state == "产业发展"){
                        obj[3]=projectCount;
                    }
                    else if (state == "其他"){
                        obj[4]=projectCount;
                    }
                }
                mapData[mapData.length] = obj;
            }
            if (globarIndex > 0) {
                loadMap();
                method6_map_data(mapData);
            }
        }

    });

}
function method6_map_data(mapData) {
    var option = {
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: [],
        yAxis: [],
        grid: [],
        series: [],
        legend: {
            x: '14%',
            y: '10%',
            selectedMode: false,//关闭图例点击事件
            orient: 'vertical',
            data: ['基础性', '公益性', '产业发展', '其他'],
            itemWidth: 20,
            itemHeight: 14,
            textStyle: {
                color: '#FFFFFF',
                padding: 5
            }

        }
    };
    var series = [];
    echarts.util.each(mapData, function (dataItem, idx) {
        var item0=dataItem[0];
        var item1=dataItem[1];
        var item2=dataItem[2];
        var item3=dataItem[3];
        var item4=dataItem[4];
        var geoCoord = geoCoordMap[dataItem[0]]; //获得城市的坐标
        //地图上找不到对应区域时return
        if (geoCoord == undefined) {
            return;
        }
        var coord = mapChart.convertToPixel('geo', geoCoord); //转换坐标系上的点到像素坐标值。
        idx += '';
        option.xAxis.push({
            id: idx,
            gridId: idx,
            type: 'category',
            name: item0,//地图上图表X轴的名字是否显示
            nameTextStyle: {
                color: '#FFFFFF'
            },
            nameLocation: 'middle',
            nameGap: 3,
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false
            }
            // data: legend.data,

        });
        option.yAxis.push({
            id: idx,
            gridId: idx,
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false
            }
        });
        option.grid.push({
            id: idx,
            width: 30,
            height: 40,
            left: coord[0] - 15,
            top: coord[1] - 15,
            z: 100
        });
        series.push({
            name: '基础性',
            type: 'bar',
            coordinateSystem:'cartesian2d',
            xAxisIndex: idx,
            yAxisIndex: idx,
            stack: idx,
            z:5,
            barGap:'200%',
            // barCategoryGap:'-100%',
            label: {
                normal: {
                    // show: true,
                    position: 'right'
                }
            },
            itemStyle:{
                normal:{
                    color:'#054FC6'
                }
            },
            data: [item1]
        });
        series.push({
            name: '公益性',
            type: 'bar',
            xAxisIndex: idx,
            yAxisIndex: idx,
            stack: idx,
            z:5,
            label: {
                normal: {
                    // show: true,
                    position: 'right'
                }
            },
            itemStyle:{
                normal:{
                    color:'#1074E2'
                }
            },
            data:[item2]
        });
        series.push({
            name: '产业发展',
            type: 'bar',
            xAxisIndex: idx,
            yAxisIndex: idx,
            stack: idx,
            z:5,
            label: {
                normal: {
                    // show: true,
                    position: 'right'
                }
            },
            itemStyle:{
                normal:{
                    color:'#41AED8'
                }
            },
            data:  [item3]
        });
        series.push({
            name: '其他',
            type: 'bar',
            xAxisIndex: idx,
            yAxisIndex: idx,
            stack: idx,
            z:5,
            label: {
                normal: {
                    // show: true,
                    position: 'right'
                }
            },
            itemStyle:{
                normal:{
                    color:'#66CCFF'
                }
            },
            data:  [item4]
        });
    });
    option.series = series;
    mapChart.setOption(option);

}

效果