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

来源：互联网发布：模拟板胡软件编辑：程序博客网时间：2024/04/29 07:34
画了一个绵阳市的地图，点击区拿到对应区的数据，一个接口调用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);}
阅读全文
0 0