使用 Echarts 实现热力图 & 迁徙图 |
您所在的位置：网站首页 › 迁徙地图 › 使用 Echarts 实现热力图 & 迁徙图 |
使用 Echarts 实现热力图 & 迁徙图
|
前言
迁徙图一般用于表示数据流向的信息，比如某个位置的数据流入或流出情况。热力图则表示数据的密集程度。最近在工作中的需求也涉及了 2 种图的实现，也踩了一些小坑。本文对这 2 种图的实现做了一个大体的梳理，作为后续相关需求实现的一个参考。 基础地图显示 中国地图数据获取从 datav-地图选择器 获取中国地图数据，存放在一个 js 文件中。 echarts 依赖安装以及全局引入echarts 版本为 4.7.0, 本文实现思路不适用于 5.x 版本。 import echarts from "echarts"; Vue.prototype.$echarts = echarts; 复制代码 地图初始化 模板及样式设置 #cmap { width: 100%; height: 100%; } 复制代码 地图设置设计稿地图外层会有一个绿色荧光效果，为了实现这个效果，我们初始设置时需要 2 个图层，一个是底图图层，用于显示外框荧光效果。一个是深色图层，用于凸显底图边框。最后通过图层叠加的方式来实现我们的想要的效果。PS: 底图可以使用不包含子区域的中国地图。 不明白图层叠加方式的可以看上图。通过图层叠加方式会引入另外一个问题：当我们进行缩放时，各个图层缩放是不会同步的，导致图层显示错位。 主要代码 getBaseOption() { return { .. // 底图 geo: { show: true, map: "china", zoom: 1.1, ... roam: false, itemStyle: { normal: { areaColor: "rgba(0, 0, 0, 0)", borderWidth: 8, //设置外层边框 borderColor: "#00FFD7", shadowColor: "rgba(63, 236, 209, 1)", shadowBlur: 40, //地图外层光晕 }, }, }, series: [ // 深色背景图层 { type: "map", map: "china", zoom: 1.1, geoIndex: 1, aspectScale: 0.75, // 长宽比, 默认值 0.75 showLegendSymbol: false, // 存在legend时显示 ... roam: true, ... ], }; } init(option = null) { if (!option) { return; } const _option = option; // registerMap 需要再 echarts init 之前执行 this.$echarts.registerMap("china", chinaNoIslands); this.chart = echarts.init(this.$refs.cmap); this.chart.setOption(_option, true); this.chart.off("click"); this.chart.on("click", (params) => {}); } // 结合 Vue 生命周期对地图进行处理 mounted() { this.init(this.getBaseOption()); }, beforeDestroy() { this.chart && this.chart.dispose(); this.chart = null; } 复制代码 热力图热力图实质上也是由若干不同大小(半径不同)的点组合而成的，所以格式比较简单，只需要落点的经纬度和数值即可。 export const heatmapData = [ { value: [107.38, 23.19, 120] }, { value: [111, 37.86, 40] } ... ]; 复制代码添加一个 type 为 heatmap 类型的 series 即可，使用上并不复杂。 getHeatmapOption(heatmapData = []) { if (heatmapData.length === 0) { return; } const _option = JSON.parse(JSON.stringify(this.getBaseOption())); // 添加热力图 series 数据 _option.series.push({ name: "热力图", type: "heatmap", coordinateSystem: "geo", data: heatmapData, }); _option.visualMap = [ { show: true, left: "10%", bottom: "5%", max: 20, min: 0, z: 999, calculable: true, text: ["高", "低"], inRange: { color: ["#0033FF", "#FFFF00", "#FF3333"], }, textStyle: { color: "#fff", }, seriesIndex: 1, }, ]; return _option; } 复制代码visualMap 的 calculable 属性值设置为 true 时，可以通过进度条过滤某些范围内的热力点。效果如下： 我们需要一个城市经纬度的映射 Map，用于获取城市的经纬度。 export const geoCoordMap = { 上海: [121.4648, 31.2891], 东莞: [113.8953, 22.901], 东营: [118.7073, 37.5513], ... } 复制代码 流向状态迁徙图通常只有以下 2 种状态。 流出状态，A 位置流向 B、C、D... 位置。格式如下： export const inSZCityData = [ [{ name: "福州" }, { name: "深圳", value: 195 }], [{ name: "太原" }, { name: "深圳", value: 90 }], [{ name: "长春" }, { name: "深圳", value: 40 }], ... ]; 复制代码 流入状态，B、C、D 等位置流向 A 位置。格式如下： export const outSZCityData = [ [{ name: "深圳" }, { name: "福州", value: 95 }], [{ name: "深圳" }, { name: "太原", value: 90 }], [{ name: "深圳" }, { name: "长春", value: 80 }], ... ] 复制代码 数据处理根据指向数据中的城市名。匹配出经纬度，生成地图飞线可用的数据： const _convertLinesData = (data) => { const _dataWithCoord = []; data.forEach((direction) => { const _fromCoord = geoCoordMap[direction[0].name]; const _toCoord = geoCoordMap[direction[1].name]; if (_fromCoord && _toCoord) { _dataWithCoord.push([ { coord: _fromCoord, }, { coord: _toCoord, value: direction[1].value, }, ]); } }); return _dataWithCoord; }; 复制代码散点图数据处理，根据流向状态生成数据，格式为 [经度. 纬度，数值]。效果如下： echarts-热力图&迁徙图 参考 Echarts 迁徙图与地图上绘制散点 Echarts 开发静态数据模拟实现迁徙图步骤详解 Echarts 示例网站 echarts-codepen-迁徙图示例 |
【本文地址】
今日新闻 |
推荐新闻 |