数据可视化全解析！用ECharts绘制中国地图，精准显示城市数据

JCT-多多

已于 2025-03-28 17:16:14 修改

阅读量615

点赞数 5

文章标签：信息可视化 echarts 前端

于 2025-03-28 17:15:29 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45761438/article/details/146605810

版权

一:Apache ECharts
Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html?spm=5176.28103460.0.0.297c451e0PDOCh

二、获取地图的GeoJSON

DataV.GeoAtlas地理小工具系列阿里云DataV——阿里巴巴集团旗下数据可视化产品,成熟的企业级数据可视化解决方案以及国产化环境部署,无需编程的一站式智能数据可视化平台.https://datav.aliyun.com/portal/school/atlas/area_selector?spm=a2crr.23498931.0.0.d5dd15ddy5FmHp

三、实现

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="UTF-8">
    <title>中国地图数值始终显示</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
</head>

<body style="height: 100%; margin: 0">
    <div id="map" style="height: 100%"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('map'));
        var option = {
            title: {
                text: '中国地图数值始终显示',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '数值',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    label: {
                        show: true, // 确保标签总是可见
                        formatter: function (params) {
                            // 自定义标签格式，展示地点名称和数值
                            return params.name + ': ' + (params.value ? params.value : '');
                        },
                        // color: '#ccc', // 标签颜色
                        fontSize: 12 // 字体大小
                    },
                    itemStyle: {
                        borderColor: '#1a9fbc',//地图边框线条
                        borderWidth: 1.5,
                        areaColor: '#a7e3f1'//地图内部区域颜色
                    },
                    emphasis: {
                        label: {
                            color: '#000',
                            fontSize: 14
                        },
                        itemStyle: {
                            areaColor: '#f7e09f'//鼠标悬浮在地图区域的颜色
                        }
                    },
                    data: [
                        { name: '北京', value: 12 },
                        { name: '上海', value: 4 },
                        { name: '广东', value: 3 },
                        { name: '河北', value: 2 },
                        { name: '山东', value: 2 },
                        { name: '河南', value: 4 },
                        { name: '陕西', value: 3 },
                        { name: '四川', value: 3 },
                        { name: '新疆', value: 2 },
                        { name: '内蒙古', value: 2 },
                        { name: '江苏', value: 1 },
                        { name: '青海', value: 1 }
                    ]
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>

</html>