js 流向地图_如何快速在Vue中实现流向图或迁徙图？

原标题：如何快速在Vue中实现流向图或迁徙图？

我们经常在一些新闻报道和商业杂志上看到运用地图来展示商业现象的做法。这样利用地图来反映和分析数据的形式，叫数据地图，它可以直观的表达出数据之间的空间关系。

在数据地图中，流向地图属于高频应用场景，但实现起来并不容易，本文来将以Vue这个热门的Web技术为例，探讨如何在项目中快速开发出炫酷的流向地图。

什么是流向地图？

流向地图也称迁徙图，可以在地图上显示信息或物体从一个位置到另一个位置的移动及其数量，通常用来显示人物、动物和产品的迁移数据。单一流向线所代表的移动规模或数量由其粗细度表示，有助显示迁移活动的地理分布。

流向地图多应用于区际贸易、交通流向、人口迁移、购物消费行为、通讯信息流动、航空线路等场景，也可应用企业货物运输，供应链管理。

(流向地图，GIF动图)

实现方案A：Echats

Echarts是百度的开源图表库，其中就包含地图组件。使用Echarts进行地图可视化会稍显复杂，需要有一定JS基础才能上手。

1. 首先打开vue项目，cmd进入命令安装echarts依赖包，默认下载最新版本

npm install echarts –save

2. 进入src目录里的main.js全局引入echarts，以及引入中国地图文件，这样就可以在任何组件中使用了

import * as echarts from 'echarts';

import "echarts/map/js/china.js";

3. 引入相关文件后就开始创建地图实例。在Echarts中，数据需要预先进行清洗，再放入代码中。代码块主要分为三部分：字段定义地理位置、字段赋值以及图表框架搭建，部分代码如下所示：

public render() { //图表绘制方法

this.chart.clear();

const isMock = !this.items.length;

const items = isMock ? Visual.mockItems : this.items;

this.container.style.opacity = isMock ? '0.3' : '1