
Echarts 是一款由百度开源的数据可视化库,可用于生成各种类型的图表,包括地图。在 Echarts 中,可以通过地图下钻来实现地图的层级展示,同时也可以在地图上添加散点图等元素来丰富地图的内容。本文将介绍如何使用 Echarts 实现地图下钻和散点功能。
首先需要准备好 Echarts 的相关资源文件,包括 echarts.js 和 echarts-gl.js(用于支持 3D 效果)。这些文件可以从 Echarts 官网或 GitHub 上下载。同时,还需要准备好相应的地图数据,例如中国地图、各省市地图等。这些地图数据可以在 echarts-cities-js 或 echarts-countries-js 等仓库中找到并下载。
地图下钻是指从一个地图区域(例如国家)进入到该区域的下一级区域(例如省份),以此类推。在 Echarts 中,可以通过 series 属性中的 data 属性来配置地图数据,并通过 visualMap 属性来控制地图颜色。同时,还需在 series 中配置鼠标事件来实现地图下钻的效果。
以下是一个简单的地图下钻示例:
var chart = echarts.init(document.getElementById('main')); // 配置地图数据 var geoData = [
{ name: '北京', selected: false },
{ name: '上海', selected: false },
{ name: '天津', selected: false }, // 其他省市数据... ]; // 配置系列数据 var seriesData = [
{ name: '中国', type: 'map', mapType: 'china', selectedMode: 'single', roam: true, itemStyle: { normal: { label: { show: true } }, emphasis: { label: { show: true } },
}, data: geoData,
},
]; // 配置鼠标事件 chart.on('click', function (params) { var name = params.name; if (name === '北京') {
chart.setOption({ series: [
{ name: '北京', type: 'map', mapType: '北京', label: { show: true }, data: [],
},
],
});
} else if (name === '上海') {
chart.setOption({ series: [
{ name: '上海', type: 'map', mapType: '上海', label: { show: true }, data: [],
},
],
});
} else if (name === '天津') {
chart.setOption({ series: [
{ name: '天津', type: 'map', mapType: '天津', label: { show: true }, data: [],
},
],
});
} else { // 其他省市下钻... }
}); // 设置地图颜色 var visualMap = { type: 'piecewise', pieces: [
{ min: 10000, color: '#ff3333' },
{ min: 5000, max: 9999, color: '#ffa533' },
{ min: 1000, max: 4999, color: '#ffff33' },
{ min: 500, max: 999, color: '#33ff33' },
{ min: 1, max: 499, color: '#cccccc' },
{ value: 0, color: '#ffffff' },
], textStyle: { color: '#666666' },
}; // 渲染地图 chart.setOption({ tooltip: { show: true }, visualMap: visualMap, series: seriesData,
});
在上面的示例中,通过设置 series 类型为 'map',并指定 mapType 属性来显示中国地图。当用户点击某个省市时,会触发 chart 的 click 事件,在事件回调函数中根据不同的省市名称设置对应的地
图数据,实现地图下钻效果。同时,通过 visualMap 属性来设置地图颜色,并在 series 中配置 label 属性来显示省市名称。
除了地图下钻,还可以在地图上添加散点图等元素来丰富地图的内容。在 Echarts 中,可以通过 series 属性中的 type 属性来指定散点图类型,并通过 data 属性来配置散点数据。同时,还需在 geo 属性中配置地理坐标系相关信息,以便正确显示散点图位置。
以下是一个简单的地图散点示例:
var chart = echarts.init(document.getElementById('main')); // 配置地图数据 var geoData = [
{ name: '北京', selected: false },
{ name: '上海', selected: false },
{ name: '天津', selected: false }, // 其他省市数据... ]; // 配置系列数据 var seriesData = [
{ name: '散点', type: 'scatter', coordinateSystem: 'geo', data: [
{ name: '北京', value: [116.407394, 39.904211] },
{ name: '上海', value: [121.473662, 31.230372] },
{ name: '天津', value: [117.190182, 39.125596] }, // 其他城市数据... ], itemStyle: { normal: { color: '#ff8800',
},
},
},
]; // 配置地理坐标系 var geo = { map: 'china', roam: true, itemStyle: { normal: { label: { show: true } }, emphasis: { label: { show: true } },
},
}; // 设置地图颜色 var visualMap = { type: 'piecewise', pieces: [
{ min: 10000, color: '#ff3333' },
{ min: 5000, max: 9999, color: '#ffa533' },
{ min: 1000, max: 4999, color: '#ffff33' },
{ min: 500, max: 999, color: '#33ff33' },
{ min: 1, max: 499, color: '#cccccc' },
{ value: 0, color: '#ffffff' },
], textStyle: { color: '#666666' },
}; // 渲染地图 chart.setOption({ tooltip: { show: true }, visualMap: visualMap, geo: geo, series: seriesData,
});
在上面的示例中,通过设置 series 类型为 'scatter',并指定 coordinateSystem 为 'geo' 来实现散点图。通过在 data 中配置每个城市的经纬度来显示散点图位置,并在 itemStyle 中设置颜色。同时,在 geo 属性中设置地图相关信息,包括地图类型、漫游等。最后,通过 visualMap 属性来设置地图颜色。
以上就是使用 Echarts 实现地图下钻和散点功能的简单介绍。在实际开发中,可以根据具体需求来调整代码,并结合其他功能来实现更加丰富的地图效果。
你是否渴望进一步提升数据可视化的能力,让数据展示更加专业、高效呢?现在,有一门绝佳的课程能满足你的需求 ——Python 数据可视化 18 讲(PyEcharts、Matplotlib、Seaborn)。
学习入口:https://edu.cda.cn/goods/show/3842?targetId=6751&preview=0
这门课程完全免费,且学习有效期长期有效。由 CDA 数据分析研究院的张彦存老师精心打造,他拥有丰富的实战经验,能将复杂知识通俗易懂地传授给你。课程深入讲解 matplotlib、seaborn、pyecharts 三大主流 Python 可视化工具,带你从基础绘图到高级定制,还涵盖多元图表类型和各类展示场景。无论是数据分析新手想要入门,还是有基础的从业者希望提升技能,亦或是对数据可视化感兴趣的爱好者,都能从这门课程中收获满满。点击课程链接,开启你的数据可视化进阶之旅,让数据可视化成为你职场晋升和探索数据世界的有力武器!
数据分析咨询请扫描二维码
若不方便扫码,搜微信号:CDAshujufenxi
PowerBI 累计曲线制作指南:从 DAX 度量到可视化落地 在业务数据分析中,“累计趋势” 是衡量业务进展的核心视角 —— 无论是 “ ...
2025-08-15Python 函数 return 多个数据:用法、实例与实战技巧 在 Python 编程中,函数是代码复用与逻辑封装的核心载体。多数场景下,我们 ...
2025-08-15CDA 数据分析师:引领商业数据分析体系构建,筑牢企业数据驱动根基 在数字化转型深化的今天,企业对数据的依赖已从 “零散分析” ...
2025-08-15随机森林中特征重要性(Feature Importance)排名解析 在机器学习领域,随机森林因其出色的预测性能和对高维数据的适应性,被广 ...
2025-08-14t 统计量为负数时的分布计算方法与解析 在统计学假设检验中,t 统计量是常用的重要指标,其分布特征直接影响着检验结果的判断。 ...
2025-08-14CDA 数据分析师与业务数据分析步骤 在当今数据驱动的商业世界中,数据分析已成为企业决策和发展的核心驱动力。CDA 数据分析师作 ...
2025-08-14前台流量与后台流量:数据链路中的双重镜像 在商业数据分析体系中,流量数据是洞察用户行为与系统效能的核心依据。前台流量与 ...
2025-08-13商业数据分析体系构建与 CDA 数据分析师的协同赋能 在企业数字化转型的浪潮中,商业数据分析已从 “可选工具” 升级为 “核 ...
2025-08-13解析 CDA 数据分析师:数据时代的价值挖掘者 在数字经济高速发展的今天,数据已成为企业核心资产,而将数据转化为商业价值的 ...
2025-08-13解析 response.text 与 response.content 的核心区别 在网络数据请求与处理的场景中,开发者经常需要从服务器返回的响应中提取数 ...
2025-08-12MySQL 统计连续每天数据:从业务需求到技术实现 在数据分析场景中,连续日期的数据统计是衡量业务连续性的重要手段 —— 无论是 ...
2025-08-12PyTorch 中 Shuffle 机制:数据打乱的艺术与实践 在深度学习模型训练过程中,数据的呈现顺序往往对模型性能有着微妙却关键的影响 ...
2025-08-12Pandas 多列条件筛选:从基础语法到实战应用 在数据分析工作中,基于多列条件筛选数据是高频需求。无论是提取满足特定业务规则的 ...
2025-08-12人工智能重塑 CDA 数据分析领域:从工具革新到能力重构 在数字经济浪潮与人工智能技术共振的 2025 年,数据分析行业正经历着前所 ...
2025-08-12游戏流水衰退率:计算方法与实践意义 在游戏行业中,流水(即游戏收入)是衡量一款游戏商业表现的核心指标之一。而游戏流水衰退 ...
2025-08-12CDA 一级:数据分析入门的基石 在当今数据驱动的时代,数据分析能力已成为职场中的一项重要技能。CDA(Certified Data Anal ...
2025-08-12破解游戏用户流失困局:从数据洞察到留存策略 在游戏行业竞争白热化的当下,用户流失率已成为衡量产品健康度的核心指标。一款游 ...
2025-08-11数据时代的黄金入场券:CDA 认证解锁职业新蓝海 一、万亿级市场需求下的数据分析人才缺口 在数字化转型浪潮中,数据已成为企业核 ...
2025-08-11DBeaver 实战:实现两个库表结构同步的高效路径 在数据库管理与开发工作中,保持不同环境(如开发库与生产库、主库与从库)的表 ...
2025-08-08t 检验与卡方检验:数据分析中的两大统计利器 在数据分析领域,统计检验是验证假设、挖掘数据规律的重要手段。其中,t 检验和卡 ...
2025-08-08