使用ECharts生成交互式地图数据的HTML教程

发布时间：2025-07-18 热度：

ECharts是一个由百度开发的强大的开源可视化库，特别适合创建各种图表和地图。下面我将介绍如何使用ECharts在HTML中生成交互式地图数据可视化。

基本HTML结构

首先，我们创建一个基本的HTML文件结构：

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>ECharts地图示例</title>     <!-- 引入ECharts库 -->     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>     <!-- 引入中国地图数据 -->     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/map/js/china.js"></script>     <style>         #map-container {             width: 100%;             height: 600px;         }     </style> </head> <body>     <h1>中国各省份数据可视化</h1>     <div id="map-container"></div>          <script>         // 这里将放置我们的ECharts代码     </script> </body> </html>

初始化ECharts实例

在<script>标签中，我们初始化ECharts实例：

// 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('map-container')); // 指定图表的配置项和数据 var option = {     title: {         text: '中国各省份示例数据',         subtext: '模拟数据展示',         left: 'center'     },     tooltip: {         trigger: 'item',         formatter: '{b}<br/>{c} (模拟值)'     },     visualMap: {         min: 0,         max: 1000,         text: ['高', '低'],         realtime: false,         calculable: true,         inRange: {             color: ['#50a3ba', '#eac736', '#d94e5d']         }     },     series: [{         name: '模拟数据',         type: 'map',         map: 'china',         emphasis: {             label: {                 show: true             }         },         data: [             {name: '北京', value: 934},             {name: '天津', value: 743},             {name: '上海', value: 1023},             {name: '重庆', value: 567},             {name: '河北', value: 456},             {name: '河南', value: 378},             {name: '云南', value: 289},             {name: '辽宁', value: 654},             {name: '黑龙江', value: 432},             {name: '湖南', value: 345},             {name: '安徽', value: 321},             {name: '山东', value: 543},             {name: '新疆', value: 187},             {name: '江苏', value: 765},             {name: '浙江', value: 876},             {name: '江西', value: 234},             {name: '湖北', value: 432},             {name: '广西', value: 321},             {name: '甘肃', value: 198},             {name: '山西', value: 345},             {name: '内蒙古', value: 276},             {name: '陕西', value: 387},             {name: '吉林', value: 456},             {name: '福建', value: 543},             {name: '贵州', value: 234},             {name: '广东', value: 987},             {name: '青海', value: 123},             {name: '西藏', value: 98},             {name: '四川', value: 654},             {name: '宁夏', value: 176},             {name: '海南', value: 287},             {name: '台湾', value: 432},             {name: '香港', value: 765},             {name: '澳门', value: 154}         ]     }] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); // 响应式调整 window.addEventListener('resize', function() {     myChart.resize(); });

高级功能：异步数据加载

实际应用中，我们通常从服务器异步加载数据。下面是一个模拟异步加载的示例：

// 模拟异步数据加载 function fetchData(callback) {     // 实际项目中这里应该是AJAX或Fetch请求     setTimeout(function() {         var data = [             {name: '北京', value: Math.round(Math.random() * 1000)},             {name: '天津', value: Math.round(Math.random() * 1000)},             {name: '上海', value: Math.round(Math.random() * 1000)},             // 其他省份数据...         ];         callback(data);     }, 1000); } // 使用异步数据 fetchData(function(data) {     myChart.setOption({         series: [{             data: data         }]     }); });

世界地图示例

如果你想展示世界地图，需要额外引入世界地图的JS文件：

<!-- 在head中添加 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/map/js/world.js"></script>

然后修改series中的map配置：

series: [{     name: '世界数据',     type: 'map',     map: 'world',     // 其他配置...     data: [         {name: 'China', value: 1345},         {name: 'United States', value: 987},         {name: 'Japan', value: 765},         // 其他国家数据...     ] }]

完整示例代码

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>ECharts地图示例</title>     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/map/js/china.js"></script>     <style>         #map-container {             width: 800px;             height: 600px;             margin: 0 auto;         }         body {             font-family: Arial, sans-serif;             text-align: center;         }     </style> </head> <body>     <h1>中国各省份数据可视化</h1>     <div id="map-container"></div>          <script>         // 初始化图表         var myChart = echarts.init(document.getElementById('map-container'));                  // 配置项         var option = {             title: {                 text: '中国各省份数据分布',                 subtext: '数据仅供参考',                 left: 'center'             },             tooltip: {                 trigger: 'item',                 formatter: '{b}<br/>数值: {c}'             },             legend: {                 orient: 'vertical',                 left: 'left',                 data: ['数据']             },             visualMap: {                 min: 0,                 max: 1000,                 text: ['高', '低'],                 realtime: false,                 calculable: true,                 inRange: {                     color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']                 }             },             toolbox: {                 show: true,                 orient: 'vertical',                 left: 'right',                 top: 'center',                 feature: {                     dataView: {readOnly: false},                     restore: {},                     saveAsImage: {}                 }             },             series: [                 {                     name: '数据',                     type: 'map',                     map: 'china',                     roam: true,                     emphasis: {                         label: {                             show: true                         }                     },                     data: [                         {name: '北京', value: 934},                         {name: '天津', value: 743},                         {name: '上海', value: 1023},                         {name: '重庆', value: 567},                         {name: '河北', value: 456},                         {name: '河南', value: 378},                         {name: '云南', value: 289},                         {name: '辽宁', value: 654},                         {name: '黑龙江', value: 432},                         {name: '湖南', value: 345},                         {name: '安徽', value: 321},                         {name: '山东', value: 543},                         {name: '新疆', value: 187},                         {name: '江苏', value: 765},                         {name: '浙江', value: 876},                         {name: '江西', value: 234},                         {name: '湖北', value: 432},                         {name: '广西', value: 321},                         {name: '甘肃', value: 198},                         {name: '山西', value: 345},                         {name: '内蒙古', value: 276},                         {name: '陕西', value: 387},                         {name: '吉林', value: 456},                         {name: '福建', value: 543},                         {name: '贵州', value: 234},                         {name: '广东', value: 987},                         {name: '青海', value: 123},                         {name: '西藏', value: 98},                         {name: '四川', value: 654},                         {name: '宁夏', value: 176},                         {name: '海南', value: 287},                         {name: '台湾', value: 432},                         {name: '香港', value: 765},                         {name: '澳门', value: 154}                     ]                 }             ]         };                  // 使用配置项显示图表         myChart.setOption(option);                  // 响应式调整         window.addEventListener('resize', function() {             myChart.resize();         });     </script> </body> </html>