ECharts Gallery 快速入门5分钟搞定中国地图可视化附完整代码在数据可视化领域地图展示一直是最直观、最具冲击力的表现形式之一。无论是展示区域销售数据、人口分布还是疫情动态一张精心设计的地图往往能胜过千言万语的文字描述。而ECharts作为百度开源的数据可视化库凭借其丰富的图表类型和灵活的配置选项已经成为前端开发者和数据分析师的首选工具。对于初学者来说直接从零开始编写ECharts地图代码可能会感到有些吃力。幸运的是ECharts Gallery提供了大量现成的模板和示例代码让我们可以快速实现各种复杂的可视化效果。本文将带你一步步利用ECharts Gallery中的资源在5分钟内完成一个专业的中国地图可视化项目。1. 准备工作与环境搭建在开始之前我们需要确保开发环境已经准备就绪。ECharts的引入非常简单只需要几行代码就能完成基础配置。首先创建一个基本的HTML文件结构!DOCTYPE html html head meta charsetutf-8 title中国地图可视化/title !-- 引入ECharts核心库 -- 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 // 在这里编写我们的ECharts代码 /script /body /html提示建议使用最新版本的ECharts可以通过修改CDN链接中的版本号来获取特定版本。本文示例使用的是5.4.3版本。2. 在ECharts Gallery中寻找合适模板ECharts Gallery是官方提供的示例集合包含了各种图表类型的实现代码。访问ECharts官网示例在搜索框中输入map可以找到大量地图相关的示例。对于中国地图可视化以下几个模板特别实用基础中国地图展示各省份的基本轮廓气泡地图在地图上用气泡大小表示数据量热力地图用颜色深浅表示数据密度迁徙地图展示区域间的流动关系选择模板后点击下载示例按钮可以获取完整代码。我们以气泡地图为例看看如何快速应用到自己的项目中。3. 实现基础中国地图让我们先从最简单的基础地图开始。将以下代码复制到HTML文件的script标签中// 初始化ECharts实例 var myChart echarts.init(document.getElementById(map-container)); // 准备配置项 var option { title: { text: 中国地图基础展示, left: center }, tooltip: { trigger: item, formatter: {b} }, series: [{ name: 中国, type: map, map: china, label: { show: true, color: #333 }, itemStyle: { areaColor: #e0f7fa, borderColor: #81d4fa }, emphasis: { label: { color: #fff }, itemStyle: { areaColor: #4fc3f7 } } }] }; // 应用配置 myChart.setOption(option);这段代码会生成一个基础的中国地图具有以下特点显示所有省份名称标签默认淡蓝色填充鼠标悬停时区域会高亮显示简洁的提示信息4. 添加实际数据展示静态地图虽然美观但加入数据才能真正发挥可视化的价值。让我们扩展前面的例子展示各省份的模拟数据。首先准备一组模拟数据var data [ {name: 北京, value: 2154}, {name: 天津, value: 1478}, {name: 上海, value: 3045}, {name: 重庆, value: 987}, // 其他省份数据... {name: 广东, value: 4321}, {name: 四川, value: 2567} ];然后修改配置项加入视觉映射组件option { // ...保留之前的title和tooltip配置 visualMap: { min: 0, max: 5000, text: [高, 低], realtime: false, calculable: true, inRange: { color: [#e0f7fa, #00838f] } }, series: [{ // ...保留之前的series配置 data: data, emphasis: { // ...保留之前的emphasis配置 } }] };现在地图会根据数据值显示不同深浅的颜色数值越大颜色越深。视觉映射组件还提供了交互式滑块可以动态过滤显示范围。5. 进阶效果气泡地图为了更直观地展示数据差异我们可以将基础地图升级为气泡地图。气泡的大小可以直接反映数据量的大小。修改series配置添加一个新的effectScatter系列series: [ // 保留基础地图系列 { name: 基础地图, type: map, map: china, // ...其他配置不变 }, // 添加气泡系列 { name: 数据气泡, type: effectScatter, coordinateSystem: geo, data: data.map(function(item) { return { name: item.name, value: [/* 经度 */, /* 纬度 */, item.value], // 可以根据需要添加其他属性 }; }), symbolSize: function(val) { return Math.sqrt(val[2]) * 3; }, showEffectOn: render, rippleEffect: { brushType: stroke }, itemStyle: { color: #ff5722, shadowBlur: 10, shadowColor: #ff5722 }, label: { formatter: {b}, position: right, show: true }, emphasis: { scale: true }, zlevel: 1 } ]注意实际使用时需要为每个省份添加正确的经纬度坐标。可以从ECharts的地图数据中获取这些信息。6. 优化与自定义现在我们已经有了一个功能完整的中国地图可视化接下来可以进一步优化视觉效果和用户体验。调整颜色方案itemStyle: { areaColor: { type: linear, x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: #f5f7fa }, { offset: 1, color: #c3cfe2 }] }, borderColor: #4b6584 }添加缩放和平移功能geo: { map: china, roam: true, // 开启缩放和平移 scaleLimit: { min: 1, max: 3 } }响应式调整window.addEventListener(resize, function() { myChart.resize(); });通过这些优化我们的地图可视化变得更加专业和实用。最终效果应该是一个交互流畅、视觉美观、数据表达清晰的中国地图应用。
ECharts Gallery 快速入门：5分钟搞定中国地图可视化（附完整代码）
ECharts Gallery 快速入门5分钟搞定中国地图可视化附完整代码在数据可视化领域地图展示一直是最直观、最具冲击力的表现形式之一。无论是展示区域销售数据、人口分布还是疫情动态一张精心设计的地图往往能胜过千言万语的文字描述。而ECharts作为百度开源的数据可视化库凭借其丰富的图表类型和灵活的配置选项已经成为前端开发者和数据分析师的首选工具。对于初学者来说直接从零开始编写ECharts地图代码可能会感到有些吃力。幸运的是ECharts Gallery提供了大量现成的模板和示例代码让我们可以快速实现各种复杂的可视化效果。本文将带你一步步利用ECharts Gallery中的资源在5分钟内完成一个专业的中国地图可视化项目。1. 准备工作与环境搭建在开始之前我们需要确保开发环境已经准备就绪。ECharts的引入非常简单只需要几行代码就能完成基础配置。首先创建一个基本的HTML文件结构!DOCTYPE html html head meta charsetutf-8 title中国地图可视化/title !-- 引入ECharts核心库 -- 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 // 在这里编写我们的ECharts代码 /script /body /html提示建议使用最新版本的ECharts可以通过修改CDN链接中的版本号来获取特定版本。本文示例使用的是5.4.3版本。2. 在ECharts Gallery中寻找合适模板ECharts Gallery是官方提供的示例集合包含了各种图表类型的实现代码。访问ECharts官网示例在搜索框中输入map可以找到大量地图相关的示例。对于中国地图可视化以下几个模板特别实用基础中国地图展示各省份的基本轮廓气泡地图在地图上用气泡大小表示数据量热力地图用颜色深浅表示数据密度迁徙地图展示区域间的流动关系选择模板后点击下载示例按钮可以获取完整代码。我们以气泡地图为例看看如何快速应用到自己的项目中。3. 实现基础中国地图让我们先从最简单的基础地图开始。将以下代码复制到HTML文件的script标签中// 初始化ECharts实例 var myChart echarts.init(document.getElementById(map-container)); // 准备配置项 var option { title: { text: 中国地图基础展示, left: center }, tooltip: { trigger: item, formatter: {b} }, series: [{ name: 中国, type: map, map: china, label: { show: true, color: #333 }, itemStyle: { areaColor: #e0f7fa, borderColor: #81d4fa }, emphasis: { label: { color: #fff }, itemStyle: { areaColor: #4fc3f7 } } }] }; // 应用配置 myChart.setOption(option);这段代码会生成一个基础的中国地图具有以下特点显示所有省份名称标签默认淡蓝色填充鼠标悬停时区域会高亮显示简洁的提示信息4. 添加实际数据展示静态地图虽然美观但加入数据才能真正发挥可视化的价值。让我们扩展前面的例子展示各省份的模拟数据。首先准备一组模拟数据var data [ {name: 北京, value: 2154}, {name: 天津, value: 1478}, {name: 上海, value: 3045}, {name: 重庆, value: 987}, // 其他省份数据... {name: 广东, value: 4321}, {name: 四川, value: 2567} ];然后修改配置项加入视觉映射组件option { // ...保留之前的title和tooltip配置 visualMap: { min: 0, max: 5000, text: [高, 低], realtime: false, calculable: true, inRange: { color: [#e0f7fa, #00838f] } }, series: [{ // ...保留之前的series配置 data: data, emphasis: { // ...保留之前的emphasis配置 } }] };现在地图会根据数据值显示不同深浅的颜色数值越大颜色越深。视觉映射组件还提供了交互式滑块可以动态过滤显示范围。5. 进阶效果气泡地图为了更直观地展示数据差异我们可以将基础地图升级为气泡地图。气泡的大小可以直接反映数据量的大小。修改series配置添加一个新的effectScatter系列series: [ // 保留基础地图系列 { name: 基础地图, type: map, map: china, // ...其他配置不变 }, // 添加气泡系列 { name: 数据气泡, type: effectScatter, coordinateSystem: geo, data: data.map(function(item) { return { name: item.name, value: [/* 经度 */, /* 纬度 */, item.value], // 可以根据需要添加其他属性 }; }), symbolSize: function(val) { return Math.sqrt(val[2]) * 3; }, showEffectOn: render, rippleEffect: { brushType: stroke }, itemStyle: { color: #ff5722, shadowBlur: 10, shadowColor: #ff5722 }, label: { formatter: {b}, position: right, show: true }, emphasis: { scale: true }, zlevel: 1 } ]注意实际使用时需要为每个省份添加正确的经纬度坐标。可以从ECharts的地图数据中获取这些信息。6. 优化与自定义现在我们已经有了一个功能完整的中国地图可视化接下来可以进一步优化视觉效果和用户体验。调整颜色方案itemStyle: { areaColor: { type: linear, x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: #f5f7fa }, { offset: 1, color: #c3cfe2 }] }, borderColor: #4b6584 }添加缩放和平移功能geo: { map: china, roam: true, // 开启缩放和平移 scaleLimit: { min: 1, max: 3 } }响应式调整window.addEventListener(resize, function() { myChart.resize(); });通过这些优化我们的地图可视化变得更加专业和实用。最终效果应该是一个交互流畅、视觉美观、数据表达清晰的中国地图应用。
