5分钟搞定ECharts Gallery中国地图新手也能快速上手的可视化教程第一次接触数据可视化时我被那些酷炫的地图图表深深吸引但总觉得需要编程基础才能实现。直到发现了ECharts Gallery这个宝藏资源库才发现原来制作专业级中国地图可以如此简单。本文将带你从零开始用最短时间完成第一个ECharts地图项目。1. 准备工作搭建基础环境在开始之前我们需要准备三样东西一个文本编辑器、现代浏览器和网络连接。推荐使用VS Code或Sublime Text这类支持代码高亮的编辑器它们能让你更清晰地查看代码结构。首先创建一个空白HTML文件命名为china-map.html。这个文件将作为我们项目的基础框架。在文件头部添加以下基础结构!DOCTYPE html html head meta charsetutf-8 title中国地图可视化/title script srchttps://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js/script script srchttps://cdn.jsdelivr.net/npm/echarts5.4.3/map/js/china.js/script style #map-container { width: 800px; height: 600px; margin: 0 auto; } /style /head body div idmap-container/div script // 这里将放置我们的JavaScript代码 /script /body /html提示建议使用CDN引入ECharts资源这样无需下载文件即可快速开始。如果需要离线使用可以从官网下载完整包。2. 从Gallery获取地图模板ECharts Galleryhttps://gallery.echartsjs.com/是官方提供的示例库里面有大量可直接复用的模板。我们以中国地图为例访问ECharts Gallery官网在搜索框输入china map选择一个你喜欢的地图样式推荐选择基础地图开始点击View Full Code查看完整代码复制JavaScript部分的代码找到类似这样的代码片段var myChart echarts.init(document.getElementById(map-container)); var option { // 这里是地图的各种配置项 }; myChart.setOption(option);将这段代码粘贴到我们之前创建的HTML文件的script标签内。现在你的文件应该包含完整的ECharts初始化代码。3. 自定义地图样式与数据直接从Gallery复制的代码可能不完全符合你的需求我们可以进行一些简单调整3.1 修改地图颜色找到option对象中的itemStyle部分可以调整地图区域的颜色。例如itemStyle: { normal: { areaColor: #e6f7ff, borderColor: #1890ff, borderWidth: 1 }, emphasis: { areaColor: #1890ff } }常用配色方案风格类型主色调边框色高亮色科技蓝#e6f7ff#1890ff#096dd9自然绿#f6ffed#52c41a#389e0d商务灰#f0f0f0#8c8c8c#5959593.2 更新数据点地图上的数据点通常在series数组中定义。假设我们要显示各省份的GDP数据series: [{ type: map, map: china, data: [ {name: 北京, value: 36102.6}, {name: 上海, value: 38700.6}, {name: 广东, value: 110760.9}, // 其他省份数据... ] }]注意省份名称必须与ECharts内置的中国地图区域名称完全一致否则无法正确显示。4. 常见问题与解决方案4.1 地图显示空白如果打开HTML文件只看到空白页面可以按以下步骤排查检查浏览器控制台是否有错误按F12打开开发者工具确认echarts.js和china.js已正确加载确保DOM容器ID与代码中的选择器一致查看网络请求是否成功获取了地图资源4.2 数据不显示当数据点没有出现在地图上时检查省份名称拼写是否正确确认数据格式是否符合要求尝试调整symbolSize参数使标记更明显4.3 性能优化技巧对于大型数据集使用dataZoom组件实现区域缩放考虑使用large模式提升渲染性能对数据进行分组或抽样处理dataZoom: [{ type: inside, start: 0, end: 100 }, { start: 0, end: 100, handleIcon: M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z, handleSize: 80%, handleStyle: { color: #fff, shadowBlur: 3, shadowColor: rgba(0, 0, 0, 0.6), shadowOffsetX: 2, shadowOffsetY: 2 } }]5. 进阶技巧与扩展应用掌握了基础地图后可以尝试以下增强功能5.1 添加交互效果通过ECharts的事件系统可以实现点击省份显示详细信息的功能myChart.on(click, function(params) { console.log(params.name : params.value); // 可以在这里添加自定义弹窗或跳转逻辑 });5.2 组合多种图表类型在地图上叠加柱状图或饼图创建更丰富的数据展示series: [ // 地图系列 { type: map, map: china, // ...其他配置 }, // 散点图系列 { type: scatter, coordinateSystem: geo, // ...散点图配置 } ]5.3 响应式设计让地图适应不同屏幕尺寸window.addEventListener(resize, function() { myChart.resize(); });在项目开发中我发现最实用的技巧是保持代码模块化。将地图配置单独保存为一个JSON文件这样可以在多个项目中复用也方便非技术人员修改样式参数。
5分钟搞定ECharts Gallery中国地图：新手也能快速上手的可视化教程
发布时间：2026/7/9 9:48:27
5分钟搞定ECharts Gallery中国地图新手也能快速上手的可视化教程第一次接触数据可视化时我被那些酷炫的地图图表深深吸引但总觉得需要编程基础才能实现。直到发现了ECharts Gallery这个宝藏资源库才发现原来制作专业级中国地图可以如此简单。本文将带你从零开始用最短时间完成第一个ECharts地图项目。1. 准备工作搭建基础环境在开始之前我们需要准备三样东西一个文本编辑器、现代浏览器和网络连接。推荐使用VS Code或Sublime Text这类支持代码高亮的编辑器它们能让你更清晰地查看代码结构。首先创建一个空白HTML文件命名为china-map.html。这个文件将作为我们项目的基础框架。在文件头部添加以下基础结构!DOCTYPE html html head meta charsetutf-8 title中国地图可视化/title script srchttps://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js/script script srchttps://cdn.jsdelivr.net/npm/echarts5.4.3/map/js/china.js/script style #map-container { width: 800px; height: 600px; margin: 0 auto; } /style /head body div idmap-container/div script // 这里将放置我们的JavaScript代码 /script /body /html提示建议使用CDN引入ECharts资源这样无需下载文件即可快速开始。如果需要离线使用可以从官网下载完整包。2. 从Gallery获取地图模板ECharts Galleryhttps://gallery.echartsjs.com/是官方提供的示例库里面有大量可直接复用的模板。我们以中国地图为例访问ECharts Gallery官网在搜索框输入china map选择一个你喜欢的地图样式推荐选择基础地图开始点击View Full Code查看完整代码复制JavaScript部分的代码找到类似这样的代码片段var myChart echarts.init(document.getElementById(map-container)); var option { // 这里是地图的各种配置项 }; myChart.setOption(option);将这段代码粘贴到我们之前创建的HTML文件的script标签内。现在你的文件应该包含完整的ECharts初始化代码。3. 自定义地图样式与数据直接从Gallery复制的代码可能不完全符合你的需求我们可以进行一些简单调整3.1 修改地图颜色找到option对象中的itemStyle部分可以调整地图区域的颜色。例如itemStyle: { normal: { areaColor: #e6f7ff, borderColor: #1890ff, borderWidth: 1 }, emphasis: { areaColor: #1890ff } }常用配色方案风格类型主色调边框色高亮色科技蓝#e6f7ff#1890ff#096dd9自然绿#f6ffed#52c41a#389e0d商务灰#f0f0f0#8c8c8c#5959593.2 更新数据点地图上的数据点通常在series数组中定义。假设我们要显示各省份的GDP数据series: [{ type: map, map: china, data: [ {name: 北京, value: 36102.6}, {name: 上海, value: 38700.6}, {name: 广东, value: 110760.9}, // 其他省份数据... ] }]注意省份名称必须与ECharts内置的中国地图区域名称完全一致否则无法正确显示。4. 常见问题与解决方案4.1 地图显示空白如果打开HTML文件只看到空白页面可以按以下步骤排查检查浏览器控制台是否有错误按F12打开开发者工具确认echarts.js和china.js已正确加载确保DOM容器ID与代码中的选择器一致查看网络请求是否成功获取了地图资源4.2 数据不显示当数据点没有出现在地图上时检查省份名称拼写是否正确确认数据格式是否符合要求尝试调整symbolSize参数使标记更明显4.3 性能优化技巧对于大型数据集使用dataZoom组件实现区域缩放考虑使用large模式提升渲染性能对数据进行分组或抽样处理dataZoom: [{ type: inside, start: 0, end: 100 }, { start: 0, end: 100, handleIcon: M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z, handleSize: 80%, handleStyle: { color: #fff, shadowBlur: 3, shadowColor: rgba(0, 0, 0, 0.6), shadowOffsetX: 2, shadowOffsetY: 2 } }]5. 进阶技巧与扩展应用掌握了基础地图后可以尝试以下增强功能5.1 添加交互效果通过ECharts的事件系统可以实现点击省份显示详细信息的功能myChart.on(click, function(params) { console.log(params.name : params.value); // 可以在这里添加自定义弹窗或跳转逻辑 });5.2 组合多种图表类型在地图上叠加柱状图或饼图创建更丰富的数据展示series: [ // 地图系列 { type: map, map: china, // ...其他配置 }, // 散点图系列 { type: scatter, coordinateSystem: geo, // ...散点图配置 } ]5.3 响应式设计让地图适应不同屏幕尺寸window.addEventListener(resize, function() { myChart.resize(); });在项目开发中我发现最实用的技巧是保持代码模块化。将地图配置单独保存为一个JSON文件这样可以在多个项目中复用也方便非技术人员修改样式参数。
