js 通过地图展示某省或市的某些信息指标

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/HSH205572/article/details/84333368

1. 引入相应地图的 .json文件，放入到项目下（WEB-INF/views/js/lib/mapJson/xian.json），可根据情况自己选择存放目录。

2. 在jsp文件中定义一个div 用来容纳地图：

<div style="width: 500px;height: 500px" id="studentOrSchoolAreaDistribution">

</div>

3. 在js中引入该文件（需要提前到echart官网下载并引入 echarts.min.js文件）：

//展示**市的学校数量分布
function showEachCountyDetailMap(result, minVal, maxVal) {
    $('#studentOrSchoolAreaDistribution').empty();
    var titleText = '**学校数量分布';
    var chart = echarts.init(document.getElementById('studentOrSchoolAreaDistribution'));
    chart.showLoading();

    $.get('/js/lib/mapJson/xian.json', function (geoJson) {
        chart.hideLoading();
        echarts.registerMap('xian', geoJson);

        var option = {
            title: {
                left: 'center',
                text: titleText,
                x: 'center',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 16,
                    color: "#A4BBCE"
                },
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}'
            },
            grid: {
                left: '3%',
                right: '3%',
                bottom: '3%',
                containLabel: true
            },
            //visualMap 可以根据情况是否引用
            visualMap: {
                show: true,
                min: minVal,
                max: maxVal,
                align: 'left',
                left: '2%',
                top: '5%',
                text: ['高', '低'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['#8FCDFF', '#72BAF4', '#56A6E6', '#1C89E2', '#1579CD', '#0C62B0']
                }
            },
            series: [{
                // name: '',
                type: 'map',
                mapType: 'xian',
                top: '3%',
                left: '3%',
                right: '3%',
                bottom: '5%',
                label: {
                    normal: {
                        color: '#EEF7FF',
                        fontWeight: 'bolder',
                        fontFamily: 'Microsoft YaHei',
                        formatter: '{b}',
                        position: 'top',
                        show: true
                    },
                    emphasis: {
                        color: '#EEF7FF',
                        fontWeight: 'bolder',
                        fontFamily: 'Microsoft YaHei',
                        show: true
                    }
                },
                itemStyle: {

                    normal: {
                        borderColor: '#389BB7',
                        areaColor: '#fff',
                    },
                    emphasis: {
                        areaColor: '#389BB7',
                        borderWidth: 0
                    }
                },
                animation: false,
                data: result // result 格式：[{name:'',value:''},{}...]
            }],
        };

        chart.setOption(option);

    });
}