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

最新推荐文章于 2025-07-11 11:02:35 发布

菜鸟的备忘录

最新推荐文章于 2025-07-11 11:02:35 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习 js jQuery 文章标签：地图 javascript echarts

本文链接：https://blog.youkuaiyun.com/hilary_front/article/details/78134376

前端学习同时被 2 个专栏收录

11 篇文章

订阅专栏

js jQuery

7 篇文章

订阅专栏

通过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);
}