echarts绵阳地图,点击区拿到对应区的数据

通过Echarts实现绵阳地图展示,点击区域时能够获取到对应区域的具体数据。实现过程中涉及一个接口的两次调用,并需注意不同省市地图JS文件的引用顺序,避免加载错误。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

画了一个绵阳市的地图,点击区拿到对应区的数据,一个接口调用2次,如果想用其他省市地图可以去官方下载相应的js文件,在jsp中引用就好,不过得注意引用顺序,不然会报错。

function drawProvince() {
    var name = '绵阳';
    var myChart = echarts.init(document.getElementById('my'));
    myChart.setOption(option = {
        backgroundColor: '#ffffff',
        series: [{
            type: 'map',
            mapType: name,
            layoutCenter: ['50%', '50%'],
            layoutSize: 650,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            itemStyle: {

                normal: {
                    borderColor: '#000000',
                    areaColor: '#999999'
                },
                emphasis: {
                    areaColor: '#999999',
                    borderWidth: 0
                }
            },
            animation: false,
            data: [
                {name: '平武县', value:1, label: {normal: {show: true}}},
                {name: '北川羌族自治县',
                    value: 2,
                    label:
                    {
                        normal:
                        {
                            show: true
                        }
                    }
                },
                {name: '三台县', value: 3, label: {normal: {show: true}},
                    itemStyle: {
                        normal: {
                            areaColor: '#ff4854'
                        },
                        emphasis: {
                            areaColor: '#ff4854',
                            borderWidth: 0
                        }
                    }
                },
                {name: '盐亭县', value: 4, label: {normal: {show: true}}},
                {name: '梓潼县', value: 5, label: {normal: {show: true}}},
                {name: '游仙区', value: 6, label: {normal: {show: true}},
                    itemStyle: {
                        normal: {
                            areaColor: '#9674d6'
                        },
                        emphasis: {
                            areaColor: '#9674d6',
                            borderWidth: 0
                        }
                    }
                },
                {name: '涪城区', value: 7, label: {normal: {show: true}},
                    itemStyle: {
                        normal: {
                            areaColor: '#f53cb6'
                        },  emphasis: {
                            areaColor: '#f53cb6',
                            borderWidth: 0
                        }
                    }
                },
                {name: '安州区', value: 8, label: {normal: {show: true}}},
                {name: '江油市', value: 9, label: {normal: {show: true}},




            ]

        }]
    });

    //点击地区再调一次接口
    myChart.on('click', function (maparams) {
//        console.log(maparams.data.name);
        areaPosition(maparams.data.name);
        function areaPosition(areaName){
            $.ajax({
                type:"GET",
                url:CTX+"/totalPro?area="+areaName,
                success:function(result){
                    if(result.errorCode!=0){
                        return  false;
                    }
                    result=result.value;
//                  console.log(result);
                    dataContent1.text("人口总数");
                    dataContent2.text("人均生产总值");
                    dataContent3.text("潜在金卡总数");
                    dataContent4.text("潜在金葵花总数");
                    dataGdp.text(result.gdp+"元");
                    dataTotal.text(result.totalNumber+"人");
                    dataArea.text(result.area);
                    if(result.monthPro!=null){
                    dataGold.text(result.monthPro[11].goldCard+"人");
                    dataSun.text(result.monthPro[11].sunFlowerCard+"人");
//                   var loadingMask = document.getElementById('loadingDiv');  
//                     loadingMask.parentNode.removeChild(loadingMask);
                    makeMapKLine(result);
                    }else{
                        dataGold.text("0人");
                        dataSun.text("0人");
                    }
                },

                error:function(XMLHttpRequest){
                    if(XMLHttpRequest.status == 401){
                        location.href=ctx+"/login";
                    }
                }   
            });
        }


    });
    myChart.setOption(option);
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值