在数据可视化中,地图可视化是高频应用的一种。我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图。数据地图可以最直观的表达出数据之间的空间关系,因此在很多数据分析场景中被广泛应用。流向地图也是地图可视化的一种,本文来分享Vue项目中Wyn Enterprise流向地图使用技巧。
什么是流向地图?
流向地图在地图上显示信息或物体从一个位置到另一个位置的移动及其数量。
通常用来显示人物、动物和产品的迁移数据。单一流向线所代表的移动规模或数量由其粗细度表示,有助显示迁移活动的地理分布。
流向地图多应用于区际贸易、交通流向、人口迁移、购物消费行为、通讯信息流动、航空线路等场景,也可应用企业货物运输,供应链管理。
如何快速在Vue项目中实现流向图迁徙图?
一、利用Echarts实现
Echarts百度的开源图表库,是一个纯Java的图表库,因此使用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中,数据需要预先进行清洗,再放入代码中。代码块主要分为三部分:字段定义地理位置、字段赋值以及图表框架搭建,部分代码如下所示:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
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 + "<br />" + 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的流向地图,效果如下:
除了Echarts之外,还有更快的数据地图制作方法,那就是利用一些可视化地图制作软件,比如一些BI工具Wyn Enterprise、tableau等。比如我要分析一个企业的区域贸易的销量情况,这里我就用Wyn Enterprise给大家实操一下。
下面是原始数据:
导入数据之后,创建新的仪表板,然后拖拽数据字段制作图表。这里有两种方式来识别地理信息: 一种是让系统根据位置名称来识别,只绑定位置名称,系统会自动根据位置名称识别对应的经纬度,另一种是直接通过经纬度数据来识别,绑定数据系统会自动识别,一键生成流向地图。
这样简单的拖拽就实现了一个流向地图,自动支持数据过滤,钻取联动分析等,还可以根据自己的个人爱好或者分析目标、设置图表颜色或者其他酷炫的动态效果。
最后呢只需要在VUE项目里调用这个仪表板地址即可实现项目需求。
流向地图在Wyn Enterprise可视化大屏中的一个示例:
相关推荐
Vue3/ECharts5数据可视化(大屏展示)项目案例源码,一个基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化(大屏展示)项目。此项目使用'.vue' 和 '.tsx' 文件实现界面,采用新版动态屏幕适配方案,全局...
大屏可视化vue+dataV+echarts
Vue-Echarts 可视化模板是一个专为 Vue.js 开发者设计的项目模板,它集成了 Echarts 图表库,方便快速构建数据可视化的前端应用。Echarts 是一个基于 JavaScript 的开源图表库,提供了丰富的图表类型,如折线图、...
Echarts+Vue3.0 大数据可视化项目源码及教程 柱状图基本设置, 柱状图效果实现, 柱状图效果实现2--XAxis,yAxis, 饼状图基本设置, 饼状图效果实现, 折线图基本设置, 折线图效果实现, 折线图堆叠效果, 散点...
"可视化大屏Vue3基于Vue3、Typescript、DataV、ECharts5框架的大数据可视化(大屏展示)项目"是一个现代化的解决方案,旨在帮助用户高效地展示和解析大量信息。下面将详细介绍这个项目所涉及的核心技术及其应用。 ...
这是一个基于Vue和Echarts的大屏数据可视化设计,使用Javascript语言开发,包含104个文件。主要文件类型包括51个JSON文件、21个JavaScript文件、14个Vue文件、3个PNG图片文件、2个HTML文件、2个CSS文件、1个...
《基于Vue + ECharts的数据可视化系统的设计与实现》是一份完整的毕业设计项目,结合了现代前端框架Vue.js和数据可视化库ECharts,旨在构建一个高效、直观的数据展示平台。本项目不仅提供了源代码,还包含了PPT演示...
大数据可视化大屏页面 (源码+项目说明)(Vue+Echarts).zip大数据可视化大屏页面 (源码+项目说明)(Vue+Echarts).zip大数据可视化大屏页面 (源码+项目说明)(Vue+Echarts).zip大数据可视化大屏页面 (源码+项目...
标题中的“【源码】数据可视化:基于 Echarts + Vue 实现的大屏范例15-世界人口统计大屏”表明这是一个使用Echarts图表库和Vue.js前端框架创建的数据可视化项目,具体应用在构建一个展示世界人口统计信息的大屏界面...
在本项目中,开发者利用了最新的前端技术栈,包括 Vue3、ECharts、高德地图(Amap)以及Pinia,创建了一个大屏可视化应用,并且实现了动态拖拽布局的功能。以下将详细介绍这些关键技术及其在项目中的应用。 Vue3 是一...
项目概述:本源码是基于Vue.js与ECharts技术实现的数据可视...项目简述:此项目利用Vue.js框架结合vue-echarts插件,打造了一个数据可视化的交互式大屏,适用于各类数据监控与展示场景,实现数据的直观展现与高效分析。
对Echarts中的各项核心图标技术,以及周边技术都进行了详细的讲解, 一套课程让你精通Echarts技术栈,让大数据可视化开发丝般顺滑! 标题:Echarts+Vue3.0 大数据可视化项目构建 Echarts+Vue3.0 大数据可视化项目...
Vue.js负责整个项目的结构和状态管理,ECharts实现了数据的可视化呈现,而iView则提供了丰富的UI组件和美化界面。通过这三者的协同工作,开发者可以高效地创建出功能完善、交互性强的大数据可视化应用。
web 大数据可视化 使用的是echarts图表库,ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,...
【大屏可视化与ECharts Vue Demo】:在IT行业中,"大屏可视化"是指通过大屏幕展示复杂数据的直观方式,常用于企业监控中心、数据分析报告等场景,以清晰、高效地传达关键业务指标。ECharts是百度推出的一款基于...
在“vue+echarts+DataV数据可视化系统源码.zip”中,我们可以看到一个利用Vue.js、ECharts以及DataV进行数据可视化的项目实例。 ECharts 是百度推出的一个开源的JavaScript数据可视化库,它支持丰富的图表类型,如...
项目简介:本项目采用Vue3和ECharts技术栈,构建了一个数据大屏可视化展示的完整案例。项目包含共计73个文件,其中主要包含JSON配置文件(47个),JavaScript脚本(11个),Vue组件(8个),以及其他辅助配置和资源...
内容概要:vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息;增加涟漪特效动画。适合人群:具备一定编程基础,工作1-3年的研发人员能学到什么:- 使用echarts实现省市地图绘制- 根据数据在地图...
在本项目中,我们结合了SpringBoot、Vue和ECharts三个技术栈,旨在实现一个后端数据驱动的前端柱状图展示。以下是关于这些技术及其整合应用的详细知识点: 1. **SpringBoot**: SpringBoot是Spring框架的一个简化...
可视化大屏 Vue3 版本,基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化(大屏展示)开发。此项目使用'.vue' 和 '.tsx' 文件实现界面,采用新版动态屏幕适配方案,全局渲染组件封装,支持数据动态刷新...