原标题：如何快速在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';
const options = this.properties;
let planePath = options.effect ? options.symbol : options.symbolStyle;
let departureValue = isMock ? ['北京', '上海', '广州市'] : this.legendData;
let color = isMock ? ['#a6c84c', '#ffa022', '#46bee9'] : options.palette;
var series = [];
items.map((item: any, i: number) => {
if (item.length) {
let j = i % color.length;
series.push({
name: item[0].fromName,
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: options.period,
trailLength: 0.7,
color: color[j],
symbolSize: 4},
lineStyle: {
normal: {
color: color[j],
width: 0.1,
curveness: 0.2 } },
data: item },
{
name: item[0].fromName,
type: 'lines',
zlevel: 2,
symbol: ['none', 'arrow'],
symbolSize: 10,
effect: {
show: true,
period: options.period,
trailLength: 0,
symbol: planePath,
symbolSize: options.symbolSize },
lineStyle: {
normal: {
color: color[j],
width: 1,
opacity: 0.6,
curveness: 0.2 } },
data: item},
{
name: item[0].fromName,
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke' },
label: {
normal: {
show: true,
position: "right", //显示位置
offset: [5, 0], //偏移设置
formatter: "{b}" //圆环显示文字 },
emphasis: {
show: true } },
symbolSize: options.pointSize,
itemStyle: {
normal: {
color: color[j] } },
data: this.parseData(item) } ); } });
var option = {
tooltip: {
trigger: 'item',
formatter: function (params, ticket, callback) {
if (params.seriesType == "lines") {
return params.data.fromName + " --> " + params.data.toName + "
" + params.data.value;
} else {
return params.name; } } },
legend: {
show: options.showLegend,
orient: 'vertical',
top: 'bottom',
left: 'right',
data: departureValue,
textStyle: {
color: '#fff' },
selectedMode: 'multiple', },
geo: {
map: options.mapName,
label: {
emphasis: {
sfalsehow: true,
color: '#fff' } },
roam: options.roam,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: "125%",
itemStyle: {
normal: {
borderColor: options.borderColor,
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: options.startColor // 0% 处的颜色
}, {
offset: 1,
color: options.endColor // 100% 处的颜色 }], },
shadowColor: options.shadowColor,
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10 },
emphasis: {
areaColor: options.emphasisColor,
borderWidth: 0 } } },
series: series };
this.chart.setOption(option); }
(模拟数据)
写了大约300多行代码，完成了Echarts的流向地图，效果如下：
(流向地图，GIF动图)
小结
使用代码开发，让Echarts在实现地图可视化的过程中具有极大的自由度(任何用代码开发的操作都是如此)。虽然稍学习一下都能很快掌握简单的JS技巧，但要深入做一些和数据的交互，会有难度；涉及到后端数据整理和传输，复杂度会更高一些，不在本文的示例范围。总体来看，Echarts作为一款国产工具，可以说瑕不掩瑜，推荐有编程基础的读者使用。
实现方案B：嵌入式商业智能软件
除了Echarts之外，还有更快的数据地图制作方法，那就是利用一些可视化地图制作软件，比如一些BI工具Wyn Enterprise、tableau等。那具体如何实现呢？以下，我们以Wyn Enterprise嵌入式商业智能和报表软件作为工具、以一个企业的区域贸易的销量情况为场景，做一些具体介绍。
(原始数据)
首先导入数据，然后创建新的仪表板，拖拽数据字段制作图表。这里有两种方式来识别地理信息：一种是让系统根据位置名称(如城市名)来识别，只绑定位置名称，系统会自动根据位置名称识别对应的经纬度，另一种是直接通过经纬度数据来识别，绑定数据系统会自动识别，一键生成流向地图。
(拖拽式设计流向地图，GIF动图)
我们使用Wyn Enterprise就这样简单拖拽，实现了一个流向地图。地图还自动支持数据过滤，钻取联动分析等功能，最终用户也可以根据自己的个人爱好或者分析目标、设置图表颜色或者其他酷炫的动态效果。
流向地图在Wyn Enterprise可视化大屏中的一个示例：
(Wyn Enterprise可视化大屏)
最后，我们只需要在VUE项目里调用这个仪表板地址即可实现项目需求。借助强大的开发工具，开发效率有了大幅提升。
立即开始
如果您正在寻找快速实现流向地图的方案，来展示流向或迁徙状况，除了传统的图表组件库，Wyn Enterprise等嵌入式商业智能软件不容错过。欢迎通过搜索"Wyn Enterprise"访问官网了解详情，下载试用。返回搜狐，查看更多
责任编辑：

转载： 详解python 利用echarts画地图(热力图)(世界地图，省市地图，区县地图)

         Pyecharts绘制全球流向图

           pyecharts中文教程官网

目录 

安装对应的python模块

世界地图

中国地图

省市地图

区县地图

热力图

动态流向图

安装对应的python模块


根据 pyecharts使用教程 ：

自从 v0.3.2 开始，为了缩减项目本身的体积以及维持 pyecharts 项目的轻量化运行，pyecharts 将不再自带地图 js 文件。如用户需要用到地图图表，可自行安装对应的地图文件包。下面介绍如何安装。
(1)、全球国家地图: echarts-countries-pypkg (1.9MB): 世界地图和 213 个国家，包括中国地图

(2)、中国省级地图: echarts-china-provinces-pypkg (730KB)：23 个省，5 个自治区

(3)、中国市级地图: echarts-china-cities-pypkg (3.8MB)：370 个中国城市

(4)、中国县区级地图: echarts-china-counties-pypkg (4.1MB)：2882 个中国县·区

(5)、中国区域地图: echarts-china-misc-pypkg (148KB)：11 个中国区域地图，比如华南、华北

需要这些地图的朋友，可以装 pip 命令行:


pip install echarts-countries-pypkg

pip install echarts-china-provinces-pypkg

pip install echarts-china-cities-pypkg

pip install echarts-china-counties-pypkg

pip install echarts-china-misc-pypkg

pip install echarts-united-kingdom-pypkg

更多的地图数据可查看https://github.com/echarts-maps。


世界地图

from pyecharts import Map
  
value = [95.1, 23.2, 43.3, 66.4, 88.5]
attr = ["China", "Canada", "Brazil", "Russia", "United States"]
map0 = Map("世界地图示例", width=800, height=400)
map0.add("世界地图", attr, value, maptype="world", is_visualmap=True, visual_text_color='#000')
map0.render(path="世界地图.html")



中国地图

from pyecharts import Map
  
province_distribution = {'河南': 45.23, '北京': 37.56, '河北': 21, '辽宁': 12, '江西': 6, '上海': 20, '安徽': 10, '江苏': 16, '湖南': 9,'浙江': 13, '海南': 2, '广东': 22, '湖北': 8, '黑龙江': 11, '澳门': 1, '陕西': 11, '四川': 7, '内蒙古': 3, '重庆': 3,'云南': 6, '贵州': 2, '吉林': 3, '山西': 12, '山东': 11, '福建': 4, '青海': 1, '天津': 1,'其他': 1}
provice = list(province_distribution.keys())
values = list(province_distribution.values())
map = Map("中国地图", '中国地图', width=600, height=400)
map.add("", provice, values, visual_range=[0, 50], maptype='china', is_visualmap=True,
  visual_text_color='#000')
map.render(path="中国地图.html")



省市地图

from pyecharts import Map

map2 = Map("贵州地图", '贵州', width=600, height=400)
city = ['贵阳市', '六盘水市', '遵义市', '安顺市', '毕节市', '铜仁市', '黔西南布依族苗族自治州', '黔东南苗族侗族自治州', '黔南布依族苗族自治州']
values2 = [1.07, 3.85, 6.38, 8.21, 2.53, 4.37, 9.38, 4.29, 6.1]
map2.add('贵州', city, values2, visual_range=[1, 10], maptype='贵州', is_visualmap=True, visual_text_color='#000')

map2.render(path="贵州地图.html")



区县地图

from pyecharts import Map
quxian = ['观山湖区', '云岩区', '南明区', '花溪区', '乌当区', '白云区', '修文县', '息烽县', '开阳县', '清镇市']
values3 = [3, 5, 7, 8, 2, 4, 7, 8, 2, 4]

map3 = Map("贵阳地图", "贵阳", width=600, height=400)
map3.add("贵阳", quxian, values3, visual_range=[1, 10], maptype='贵阳', is_visualmap=True)
map3.render(path="贵阳地图.html")



热力图

from pyecharts import Geo

keys = ['上海', '北京', '合肥', '哈尔滨', '广州', '成都', '无锡', '杭州', '武汉', '深圳', '西安', '郑州', '重庆', '长沙', '贵阳', '乌鲁木齐']
values = [4.07, 1.85, 4.38, 2.21, 3.53, 4.37, 1.38, 4.29, 4.1, 1.31, 3.92, 4.47, 2.40, 3.60, 1.2, 3.7]

geo = Geo("全国主要城市空气质量热力图", "data from pm2.5", title_color="#fff",title_pos="left", width=600, height=400,background_color='#404a59')

geo.add("空气质量热力图", keys, values, visual_range=[0, 5], type='effectScatter',visual_text_color="#fff", symbol_size=15,is_visualmap=True, is_roam=True) # type有scatter, effectScatter, heatmap三种模式可选，可根据自己的需求选择对应的图表模式
geo.render(path="全国主要城市空气质量热力图.html")



动态流向图

更新：    pyecharts已更新，更新方法：

pip install  --upgrade pyecharts

中文官网教程：https://pyecharts.org/#/

此内容具体网址:https://pyecharts.org/#/zh-cn/geography_charts?id=geo%ef%bc%9a%e5%9c%b0%e7%90%86%e5%9d%90%e6%a0%87%e7%b3%bb

根据此方法获得的图示动态的，如果需要动态插入文章中可以制成GIF图片，我的制作方法是利用EV录屏软件录制一个动态周期的视频，然后在利用 动态图(GIF)制作方法这个网址，绘制此gif图片。当然如果你能保证每次截取的图片大小一样，可以直接多截几张图，利用一些网站，将图片合成gif也行。

绘图代码：

#!/usr/bin/env python
# -*- coding: utf-8 -*-
# @Time    : 2020/2/23 13:13
# @Author  : ystraw
# @Site    :
# @File    : t3.py
# @Software: PyCharm Community Edition
# @function: 绘制城市动态流向图

# 导入Geo包，注意1.x版本的导入跟0.x版本的导入差别
# 更新方法：pip install  --upgrade pyecharts
from pyecharts.charts import Geo
# 导入配置项
from pyecharts import options as opts
# ChartType：图标类型，SymbolType：标记点类型
from pyecharts .globals import ChartType, SymbolType

geo = Geo()
# 新增坐标点，添加名称跟经纬度, 也就是当地图中不包含这个地名的坐标时，自己加入！
geo.add_coordinate('新地点', 122.480539, 35.235929)

# 地图类型，世界地图可换为world
geo.add_schema(maptype="china")
# 添加数据点
geo.add("",[("北京",10),("上海",20),("广州",30),("成都",40),("哈尔滨",50),("新地点",40)],type_=ChartType.EFFECT_SCATTER)
# 添加流向，type_设置为LINES，涟漪配置为箭头，提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle',
#'diamond', 'pin', 'arrow', 'none'
geo.add("geo-lines",
        [('北京', '广州'), ('上海', '上海'), ('广州', '成都'),('成都', '哈尔滨'), ('新地点', '哈尔滨')],
        type_=ChartType.LINES,
        effect_opts=opts.EffectOpts(symbol=SymbolType.ARROW,symbol_size=10,color="yellow"),
        linestyle_opts=opts.LineStyleOpts(curve=0.2),
        is_large=True)
# 不显示标签
geo.set_series_opts(label_opts=opts.LabelOpts(is_show=True))
# 设置图标标题，visualmap_opts=opts.VisualMapOpts()为左下角的视觉映射配置项
geo.set_global_opts(visualmap_opts=opts.VisualMapOpts(),title_opts=opts.TitleOpts(title="城市动态流向图"))
# 直接在notebook里显示图表
geo.render_notebook()
# 生成html文件，可传入位置参数
geo.render("城市动态流向图2.html")

异步加载
function initialize() {
var mp = new BMap.Map('map');
mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
}
function loadScript() {
var script = document.createElement("script");
script.src = "http://api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=initialize";//此为v2.0版本的引用方式
// http://api.map.baidu.com/api?v=1.4&ak=您的密钥&callback=initialize"; //此为v1.4版本及以前版本的引用方式
document.body.appendChild(script);
}
window.onload = loadScript;
转自：http://lbsyun.baidu.com/index.php?title=jspopular/guide/introduction

按照教程想通过pip下载地图素材，结果如下图所示——不匹配现有的version。


upgrade pyecharts之后依旧无法satisfies	


在pycharm中输入:

import pyecharts

print(pyecharts.version)

查看pyecharts的version

输出结果为：


哇，这版本好新(2020.11.21)。
在Github上看到了对应的js文件，虽然能了解其js实现原理，但是对这两者如何联系产生的原理实在是不懂。
不得已，只得
pip uninstall pyecharts


把1.9.0版本的pyecharts 剔除。
再找了doubanio镜像的1.7版本进行安装。
pip3 install -i https://pypi.doubanio.com/simple pyecharts==1.7.0


这下可以安装地图js文件了。


应该行了，打开pycharm 在该环境下创建项目进行实验。
输入:

诶，这里的Map还是飘红。
检查了一下是否例子中所使用的标签名是所安装的地图文件不包含的。
核对一下，确实是世界地图部分

echarts-countries-pypkg

那么是怎么回事呢？难道又要装0.5版本的pyecharts嘛？
网上冲浪了一番，在知乎一篇文章中了解到：在Pyecharts1.0版本中，Map放在pyecharts.charts下面。
那么pyecharts 1.7.0应该沿用了这一习惯吧。

果不其然，改成pyecharts.charts在 import时自动提示也出来了


这次应该有戏！
但是运行后……


查阅了各种博客后，发现是不同版本写法的变化。
难道真的要装从前的0.5版本？
事情总要想前看，不跟着新版本走必然要逐渐要被淘汰。
在github翻了一圈没看到20年的与pyecharts/map或者pyecharts/Geo相关的代码可以参考。
不过还好，pyecharts还有中文文档参考（毕竟是百度做的）。
功夫不负有心人，终于在Map_Map_base这里找到了适合的例子。


打开运行生成的html文件：


可以很清楚地看到世界各个地区，通过js脚本可以通过鼠标对地图进行缩放、点击互动效果等。
看到原例子中有关于动态流向图的写法。


对应应该是这段（本来以为名字应该是flow或者arrow之类的。）


在新版(1.7)中又要怎么去做呢？

在原本的文档中找了几个给的实例都没有关于动态流向图。往下查看gallery只在map3d中找到了类似的。

根据上方的代码对应，猜测对应的是trail部分：


查询几个库的用法想转到原来的图中使用


结果对options进行查询时，发现在用户手册查询不到。
在我一筹莫展时，在gallery中看到了pyecharts/geo部分的实例。此前我只把它当作是另一个别名，看来是对应实际不同的需求起的。


我想应该是关于“geo-line”的部分。
查看对应的实例图，果真就是苦苦寻觅的“流向图”：


from pyecharts import options as opts
from pyecharts.charts import Geo
from pyecharts.globals import ChartType, SymbolType

c = (
Geo()
#添加shema地理图china并设置itemsyle_Opt（应该是style，color为区域颜色，border_color为边缘颜色）
    .add_schema(
        maptype="china",
        itemstyle_opts=opts.ItemStyleOpts(color="#323c48", border_color="#111"),
)
#设置城市的属性值 以及图表style，有多种类型可以选择，以及静态箭头和dot颜色。
    .add(
        "",
        [("广州", 55), ("北京", 66), ("杭州", 77), ("重庆", 88)],
        type_=ChartType.EFFECT_SCATTER,
        color="white",
)
#设置箭头（starting point->destination）并设置style。这opts相关配置没有在系统配置项文档中找到
底下的linestyle_opts倒是有，我在文章下方贴出来。
    .add(
        "geo",
        [("广州", "上海"), ("广州", "北京"), ("广州", "杭州"), ("广州", "重庆")],
        type_=ChartType.LINES,
        effect_opts=opts.EffectOpts(
            symbol=SymbolType.ARROW, symbol_size=6, color="blue"
        ),
        linestyle_opts=opts.LineStyleOpts(curve=0.2),
    )
    .set_series_opts(label_opts=opts.LabelOpts(is_show=False))
    .set_global_opts(title_opts=opts.TitleOpts(title="Geo-Lines-background"))
    .render("geo_lines_background.html")
)

（以上为“流向图”对应的代码段，以及调试后增加的注释。以下为测试各个部分中生成的页面图片。）

1、



2、


3、
class LineStyleOpts(
    # 是否显示
    is_show: bool = True,

    # 线宽。
    width: Numeric = 1,

    # 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
    opacity: Numeric = 1,

    # 线的弯曲度，0 表示完全不弯曲
    curve: Numeric = 0,

    # 线的类型。可选：
    # 'solid', 'dashed', 'dotted'
    type_: str = "solid",

    # 线的颜色。
    # 颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)'，如果想要加上 alpha 通道表示不透明度，
    # 可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'。
    # 除了纯色之外颜色也支持渐变色和纹理填充
    # 
    # 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，
    # 如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
    # color: {
    #    type: 'linear',
    #    x: 0,
    #    y: 0,
    #    x2: 0,
    #    y2: 1,
    #    colorStops: [{
    #        offset: 0, color: 'red' // 0% 处的颜色
    #    }, {
    #        offset: 1, color: 'blue' // 100% 处的颜色
    #    }],
    #    global: false // 缺省为 false
    # }
    # 
    # 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
    # color: {
    #    type: 'radial',
    #    x: 0.5,
    #    y: 0.5,
    #    r: 0.5,
    #    colorStops: [{
    #        offset: 0, color: 'red' // 0% 处的颜色
    #    }, {
    #        offset: 1, color: 'blue' // 100% 处的颜色
    #    }],
    #    global: false // 缺省为 false
    # }
    # 
    # 纹理填充
    # color: {
    #    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
    #    repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
    # }
    color: Union[str, Sequence, None] = None,
)