ECharts使用 -- 地图

最新推荐文章于 2024-08-17 16:42:17 发布

看到代码头都是大的

最新推荐文章于 2024-08-17 16:42:17 发布

阅读量565

点赞数 1

本文链接：https://blog.csdn.net/ym5209999/article/details/105014742

版权

项目说明：
1.项目中的数据存储在：address.json文件中的，可能与实际存在差异；
2.地图可以随着鼠标的滚动而缩小或放大，超出部分隐藏；
3.如若有统计常住人口的API，将ajax中的请求地址进行更换，再对数据进行处理一下即可。
效果图如下：

项目结构如下：

chinaMap.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中国人口分布地图</title>
    <script type="text/javascript" src="../js/echarts.min.js"></script>
    <script type="text/javascript" src="../js/china.js"></script>
</head>
<style>
    .box {
        width: 750px;
        height: 500px;
        margin: auto;
    }
</style>
<body>
<div class="box" id="main"></div>
<script>
    function chinaMap(personData) {
        let myChart = echarts.init(document.getElementById('main'));
        let optionMap = {
            backgroundColor: '#eeeeee',
            title: {
                text: '2018年各省常住人口分布地图',
                subtext: '统计单位：万',
                x: 'center'
            },
            tooltip: {
                trigger: 'item'
            },

            visualMap: {
                show: true,
                x: 'left',
                y: 'bottom',
                splitList: [
                    {start: 6000},
                    {start: 5000, end: 6000},
                    {start: 4000, end: 5000},
                    {start: 3000, end: 4000},
                    {start: 2000, end: 3000},
                    {start: 1000, end: 2000},
                    {start: 0, end: 1000},
                ],
                color: ['#83bbf5', '#8aea9c', '#6fdbef', '#74e2ca', '#e6b47b', '#9fb5ea', '#ffdfdf']
            },

            //配置属性
            series: [{
                name: '常住人口数',
                type: 'map',
                mapType: 'china',
                roam: true,
                label: {
                    normal: {
                        show: true
                    }
                },
                data: personData
            }]
        };

        myChart.setOption(optionMap);
    }

    let xhr = new XMLHttpRequest();
    xhr.open('get', '../json/address.json');
    xhr.send(null);
    xhr.onreadystatechange = function () {
        if (xhr.status === 200 && xhr.readyState === 4) {
            let resData = JSON.parse(xhr.responseText);
            let personData = [];
            resData.forEach(item => {
                personData.push(item);
            });
            chinaMap(personData);
        }
    }

</script>
</body>
</html>

address.json

[
  {"name": "北京", "value": "2154.2"},
  {"name": "天津", "value": "1559.87"},
  {"name": "上海", "value": "2423.78"},
  {"name": "重庆", "value": "3101.79"},
  {"name": "河北", "value": "7556.3"},
  {"name": "河南", "value": "9605"},
  {"name": "云南", "value": "4829.5"},
  {"name": "辽宁", "value": "4359.3"},
  {"name": "黑龙江", "value": "3773.1"},
  {"name": "湖南", "value": "6898.8"},
  {"name": "安徽", "value": "6323.6"},
  {"name": "山东", "value": "10047.24"},
  {"name": "新疆", "value": "2486.76"},
  {"name": "江苏", "value": "8050.7"},
  {"name": "浙江", "value": "5737"},
  {"name": "江西", "value": "4647.6"},
  {"name": "湖北", "value": "5917"},
  {"name": "广西", "value": "4926"},
  {"name": "甘肃", "value": "2637.26"},
  {"name": "山西", "value": "3718.34"},
  {"name": "内蒙古", "value": "2534"},
  {"name": "陕西", "value": "3864.4"},
  {"name": "吉林", "value": "2704.06"},
  {"name": "福建", "value": "3941"},
  {"name": "贵州", "value": "3600"},
  {"name": "广东", "value": "11346"},
  {"name": "青海", "value": "603.23"},
  {"name": "西藏", "value": "343.82"},
  {"name": "四川", "value": "8341"},
  {"name": "宁夏", "value": "688.11"},
  {"name": "海南", "value": "934.32"},
  {"name": "台湾", "value": "2316.21"},
  {"name": "香港", "value": "709.76"},
  {"name": "澳门", "value": "552.3"}
]

相关链接
echarts.min.js：提取码：1swz
china.js：提取码：cubv