1分钟用js做出一个动态迁徙图
作用
迁徙图，是对收集的用户定位数据，采用基于地理位置的大数据分析后，用“地图+单向迁移线路图”的可视化呈现方式，来动态显示人员的流向情况。具有动态、即时、直观地展现数据流向的射迹与特征。
实现步骤
1. 准备一个有固定宽高的div盒子，也就是DOM容器
css代码
<style>
.box {
width: 600px;
height: 600px;
margin: 20px auto;
}
</style>
html的div盒子
<div class="box"></div>
2. 引入echarts.min.js文件（从Echarts官网下载）
<script src="echarts.min.js"></script>
3. 引入地图的矢量数据
<script src="data.js"></script>
3.1 data.js矢量数据详情
4. 初始化对象,基于准备好的dom，初始化echarts实例
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.querySelector(".box"));
5. 准备好散点图的位置数据和样式
//高亮点的位置和颜色配置（需要设置涟漪效果）
const points = [ { value: [108.2813, 23.6426], itemStyle: { color: "#4ab2e5" } },
{ value: [118.7402, 36.4307], itemStyle: { color: "#4fb6d2" } },
{ value: [110.3467, 41.4899], itemStyle: { color: "#52b9c7" } },
{ value: [113.4668, 33.8818], itemStyle: { color: "#5abead" } },
{ value: [128.1445, 48.5156], itemStyle: { color: "#f34e2b" } },
{ value: [120.0586, 32.915], itemStyle: { color: "#f56321" } },
{ value: [101.8652, 25.1807], itemStyle: { color: "#f56f1c" } },
{ value: [95.7129, 40.166], itemStyle: { color: "#f58414" } },
{ value: [113.4668, 22.8076], itemStyle: { color: "#f58f0e" } },
{ value: [117.5977, 44.3408], itemStyle: { color: "#f5a305" } },
{ value: [111.5332, 27.3779], itemStyle: { color: "#e7ab0b" } },
{ value: [84.9023, 41.748], itemStyle: { color: "#dfae10" } },
{ value: [115.4004, 37.9688], itemStyle: { color: "#d5b314" } },
{ value: [113.4668, 22.8076] },
];
6. 准备好线条的起点和终点数据以及样式
//动态线条的起始点和颜色配置
const lines = [ { coords: [ [108.2813, 23.6426], //起点
[113.4668, 22.8076], //终点
],
lineStyle: { color: "#4ab2e5" },
},
{
coords: [
[118.7402, 36.4307],
[113.4668, 22.8076],
],
lineStyle: { color: "#4fb6d2" },
},
{
coords: [
[110.3467, 41.4899],
[113.4668, 22.8076],
],
lineStyle: { color: "#52b9c7" },
},
{
coords: [
[113.4668, 33.8818],
[113.4668, 22.8076],
],
lineStyle: { color: "#5abead" },
},
{
coords: [
[128.1445, 48.5156],
[113.4668, 22.8076],
],
lineStyle: { color: "#f34e2b" },
},
{
coords: [
[120.0586, 32.915],
[113.4668, 22.8076],
],
lineStyle: { color: "#f56321" },
},
{
coords: [
[101.8652, 25.1807],
[113.4668, 22.8076],
],
lineStyle: { color: "#f56f1c" },
},
{
coords: [
[95.7129, 40.166],
[113.4668, 22.8076],
],
lineStyle: { color: "#f58414" },
},
{
coords: [
[113.4668, 22.8076],
[113.4668, 22.8076],
],
lineStyle: { color: "#f58f0e" },
},
{
coords: [
[117.5977, 44.3408],
[113.4668, 22.8076],
],
lineStyle: { color: "#f5a305" },
},
{
coords: [
[111.5332, 27.3779],
[113.4668, 22.8076],
],
lineStyle: { color: "#e7ab0b" },
},
{
coords: [
[84.9023, 41.748],
[113.4668, 22.8076],
],
lineStyle: { color: "#dfae10" },
},
{
coords: [
[115.4004, 37.9688],
[113.4668, 22.8076],
],
lineStyle: { color: "#d5b314" },
},
];
7.利用Echartsd的注册方法，注册地图的矢量数据
echarts.registerMap("china", geoJson); //利用注册方法，注册地图的矢量数据
8. 设置option,指定图表的配置项和数据
option = {
backgroundColor: "#013954",
//配置项，geo是地图，series是散点图
geo: {
map: "china", //与矢量数据注册的名称一致
aspectScale: 0.75, //长宽比
zoom: 1.1, //倍数
roam: false,
itemStyle: {
normal: {
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "#09132c", // 0% 处的颜色
},
{
offset: 1,
color: "#274d68", // 100% 处的颜色
},
],
globalCoord: true, // 缺省为 false
},
shadowColor: "rgb(58,115,192)",
shadowOffsetX: 10,
shadowOffsetY: 11,
},
emphasis: {
areaColor: "#2AB8FF",
borderWidth: 0,
color: "green",
label: {
show: false,
},
},
},
regions: [
{
name: "南海诸岛",
itemStyle: {
areaColor: "rgba(0, 10, 52, 1)",
borderColor: "rgba(0, 10, 52, 1)",
normal: {
opacity: 0,
label: {
show: false,
color: "#009cc9",
},
},
},
},
],
},
series: [
{
//对象1
type: "map",
roam: false,
label: {
normal: {
show: true,
textStyle: {
color: "#1DE9B6",
},
},
emphasis: {
textStyle: {
color: "rgb(183,185,14)",
},
},
},
itemStyle: {
normal: {
borderColor: "rgb(147, 235, 248)",
borderWidth: 1,
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "#09132c", // 0% 处的颜色
},
{
offset: 1,
color: "#274d68", // 100% 处的颜色
},
],
globalCoord: true, // 缺省为 false
},
},
emphasis: {
areaColor: "rgb(46,229,206)",
// shadowColor: 'rgb(12,25,50)',
borderWidth: 0.1,
},
},
zoom: 1.1,
// roam: false,
map: "china", //使用
// data: this.difficultData //热力图数据 不同区域 不同的底色
},
{
//对象2
type: "effectScatter", //新对象的type
coordinateSystem: "geo", //让散点图使用地图坐标系统
showEffectOn: "render",
zlevel: 1,
//让涟漪的效果更加明显
rippleEffect: {
period: 15,
scale: 4, //效果
brushType: "fill",
},
hoverAnimation: true,
label: {
normal: {
formatter: "{b}",
position: "right",
offset: [15, 0],
color: "#1DE9B6",
show: true,
},
},
itemStyle: {
normal: {
color: "#1DE9B6" /* function (value){ //随机颜色
return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
}*/,
shadowBlur: 10,
shadowColor: "#333",
},
},
symbolSize: 12,
data: points, //高亮点的位置和颜色配置
}, //地图线的动画效果
{
//对象3
type: "lines",
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: "arrow", //箭头图标
symbolSize: 7, //图标大小
},
lineStyle: {
normal: {
color: "#1DE9B6",
/* function (value){ //随机颜色
['#f21347','#f3243e','#f33736','#f34131','#f34e2b',
'#f56321','#f56f1c','#f58414','#f58f0e','#f5a305',
'#e7ab0b','#dfae10','#d5b314','#c1bb1f','#b9be23',
'#a6c62c','#96cc34','#89d23b','#7ed741','#77d64c',
'#71d162','#6bcc75','#65c78b','#5fc2a0','#5abead',
'#52b9c7','#4fb6d2','#4ab2e5']
return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
}*/ width: 1, //线条宽度
opacity: 0.1, //尾迹线条透明度
curveness: 0.3, //尾迹线条曲直度
},
},
//动态线条的起始点和颜色配置（三点数据）
data: lines,
},
],
};
9.使用刚指定的配置项和数据显示图表
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option, true);
注意：步骤中4~9都是js代码哦
总结：
1.迁徙图中运用到了三种类型的可视化图表，都设置在series这个属性中，分别是map（地图）,effectScatter（ 带有涟漪特效动画的散点（气泡）图 ），lines（路径图）
2.三种可视化图表需要设置关联
3.散点图和路径图的数据中均使用了地图中的坐标
4.详细的属性设置可以参考Echats的配置项手册进行席位调整
