实现echarts中国地图迁徙图

最近做的项目需要实现一个中国地图上烟草流动走向的需求，因为之前没有做过，遇到了不少问题，因此将过程记录下来
首先安装echarts,可以参考另一篇博文,链接如下：
angular项目中使用echarts

安装好以后测试一下页面中是否可以正常使用，就可以开始实现迁徙图了，

第一步，首先要将中国地图显示出来，即引入china.js文件，因为echarts现在不提供地图文件了，所以我使用了网上大佬提供的china.js文件，放到你的工具文件夹下面，然后在页面中引入，比如在ts文件里如下引入，
我使用的require，当然也可以使用import

require('../../shared/util/china');

第二步，文件引入后就可以开始初始化地图了，

        let option = {tooltip: {extraCssText:'border:0;background: linear-gradient(180deg, rgba(7, 37, 115, 0.7) 0%, rgba(1, 13, 60, 0.8) 100%);box-shadow:0px 0px 11px 0px rgba(96, 150, 255, 0.7);color:#fff',trigger: 'item',formatter: function(params) {if (params.componentSubType === 'lines') {var res = params.data.fromName + '-' + params.data.toName + '<br/>' + params.data.numValue;return res;} else if (params.componentSubType === 'effectScatter') {var res = '流入' + params.data.eValue + '<br/>' + '流出' + params.data.value[2];return res;}}},geo: {map: 'china',    //说明你的地图类型scaleLimit: 3,   zoom: 1.2,    // 放大倍数top: 60,label: {emphasis: {show: false}},roam: true,   //是否可以缩放和拖拽itemStyle: {normal: {areaColor: '#041E87',borderColor: '#0F72B1',borderWidth: 2},emphasis: {areaColor: '#041b75'}}},series: series   // 数据数组};this.chart3 = echarts.init(document.getElementById('echart3'));this.chart3.setOption(option, true);this.chart3.resize();

可以先将series设为空数组看一下地图效果，具体样式和色调可以在itemStyle里设置，

第三步，这个时候就要看具体的数据结构了，
迁徙图的数据结构一般分为三层，一层是线，一层是点，一层是线上的动画，所以每一个数据都由三个对象构成
也就是series的数据结构是这样的，
（迁徙图其实就是两个点两个点连起来的轨迹，一条轨迹为一个单位，一个单位需要定义三个对象，datac是原始数据，大家的原始数据都不一样，处理方法也不同，我会附上我的原始数据）

        let dataC = [['广东省揭阳市',[[{ xy: ['116.37851218033846', '23.555740488275587'], name: '广东省揭阳市' },{ xy: ['118.80242172124585', '32.06465288561847'], name: '南京市', value: 1 }],[{ xy: ['116.37851218033846', '23.555740488275587'], name: '广东省揭阳市' },{ xy: ['118.80441263574761', '32.05475668294885'], name: '玄武区', value: 1 }],[{ xy: ['116.37851218033846', '23.555740488275587'], name: '广东省揭阳市' },{ xy: ['118.7765189920351', '32.07240516055662'], name: '鼓楼区', value: 7 }]]],['广东省汕头市潮南区', [Array(2)]],['福建省泉州市鲤城区', [Array(2)]]];
//大数组中包含所有的点，每个点又是一个数组包含点的名字，和所有流出的轨迹组成的数组。一个轨迹又是一个数组，包含两个对象，一个起点信息，一个终点信息
// 我的原始数据结构比较复杂，实际开发可以跳过这段介绍

        dataC.forEach(function(item, i) {series.push({name: item[0] + ' Top10',type: 'lines',      //这层是线上的特效zlevel: 1,effect: {show: true,period: 6,trailLength: 0.7,color: '#fff',symbolSize: 3},lineStyle: {normal: {color: function(params) {var num = params.data.numValue;if (num >= 0 && num <= 100) {return '#94F522';} else if (num > 100 && num <= 200) {return '#FFE43E';} else if (num > 200 && num <= 300) {return '#FF864A';} else {return '#FF2F49';}},width: 1,curveness: 0.2}},data: that.convertData(item[1])   // 这里是线条需要的数据结构},{name: item[0] + ' Top10',type: 'lines',   //这层是线zlevel: 2,lineStyle: {normal: {color: function(params) {var num = params.data.numValue;if (num > 0 && num <= 100) {return '#94F522';} else if (num > 100 && num <= 200) {return '#FFE43E';} else if (num > 200 && num <= 300) {return '#FF864A';} else {return '#FF2F49';}},width: 1,opacity: 0.4,curveness: 0.2}},data:that.convertData(item[1])    // 这里同样是线条需要的数据结构，文章最后附有具体函数},{name: item[0] + ' Top10',type: 'effectScatter',   // 这层是点，其实就是散点图coordinateSystem: 'geo',zlevel: 3,rippleEffect: {brushType: 'stroke'},symbol: 'emptyCircle',label: {normal: {show: true,position: 'right',formatter: '{b}'}},itemStyle: {normal: {color: '#a6c84c'}},data: datapop  // 这里是散点需要的数据结构});});

[
{fromName: "广东省揭阳市", toName: "南京市", numValue: 1, coords: [["116.37851218033846", "23.555740488275587"],["118.80242172124585", "32.06465288561847"]]},
{fromName: "广东省揭阳市", toName: "玄武区", numValue: 1, coords: Array(2)},
{fromName: "广东省揭阳市", toName: "鼓楼区", numValue: 7, coords: Array(2)},
]
// 线的数据结构dataline
[
{ name: '北京', value: [116.46, 39.92, 36006], eValue: 7878 }, // value里面的数字是这个城市所有流出的
{ name: '上海', value: [121.48, 31.22, 454545], eValue: 7878 }, // evalue里面的数字是这个城市所有流入的 可能需要循环遍历处理一下
{ name: '广州', value: [113.23, 23.16, 234234], eValue: 7878 } // 暂时写死
]
// 点的数据结构datapop ，value[0]和value[1]是经纬度。剩下的自由定义

第四步，数据定义好以后基本上地图就可以出来了，剩下的就是一些调整的问题了，要注意经纬度如果是可枚举的话，前端可以写个文件，列出所有经纬度，这样在循环的时候可以直接获取经纬度，比如

convertData(data) {var res = [];for (var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = this.geoCoord.getData()[dataItem[0].name]; //出发地坐标获取var toCoord = this.geoCoord.getData()[dataItem[1].name]; //目的地坐标获取if (fromCoord && toCoord) {res.push({fromName: dataItem[0].name, //出发地名称toName: dataItem[1].name, //目的地名称numValue: dataItem[1].value, //数值coords: [fromCoord, toCoord]});}}return res;}

ok,结束

实现echarts中国地图迁徙图相关推荐

Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图(带炫光特效)
场景 Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图: Leaflet中使用leaflet-echarts插件实现Echarts的Migration ...
Mapbox + ECharts 实现简单迁徙图
文章目录概述预览效果实现代码说明相关链接概述 ECharts是开源的可视化图表库,其中有丰富的图表.本文使用Mapbox结合ECharts插件实现了简单的迁徙地图. 预览效果实现代码 & ...
Echarts中国地图三级钻取
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站:https://www.captainai.net/dongkelun 前言最近其实一直在用Echa ...
Echarts中国地图背景颜色渐变
摘要:关于Echarts地图的问题,在第一篇就说过引入等相关问题(如还有疑惑请先看之前的文章传送门).地图的背景颜色如何实现渐变呢?主要利用的是Echarts中的geo和visualMap结合实现.v ...
Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
echarts 中国地图世界地图
最近项目中用到了echarts 中国地图世界地图,特在这记录一下. world.js 下载链接(world_new.js带有中国地区名称,另一个只是用来显示中国地图) 链接:https://pan. ...
【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图前置条件,必看首先你需要安装echarts并引入然后你需要下载china.json文件并注册引入,不然不生效当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
HTML中地图根据数据变色,echarts中国地图根据数据对省份渲染不同的颜色
echarts中国地图 .centerItem { width: 856px; height: 640px; background-color: #fff; margin: 110px auto 0 ...
【echarts 中国地图增加南海九段线】
echarts 中国地图增加南海九段线最近在开发echarts 中国地图时,客户提出中国地图要完整,需要增加南海九段线. 这是个政治任务,但是echarts里面的文档没有关于南海诸岛九段线的相关配置 ...

实现echarts中国地图迁徙图

实现echarts中国地图迁徙图相关推荐

最新文章

热门文章