Vue项目中Echarts流向图迁徙图实现
在数据可视化中,地图可视化是高频应用的一种。我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图。数据地图可以最直观的表达出数据之间的空间关系,因此在很多数据分析场景中被广泛应用。流向地图也是地图可视化的一种,本文来分享Vue项目中流向地图使用技巧。
什么是流向地图?
流向地图在地图上显示信息或物体从一个位置到另一个位置的移动及其数量。
通常用来显示人物、动物和产品的迁移数据。单一流向线所代表的移动规模或数量由其粗细度表示,有助显示迁移活动的地理分布。
流向地图多应用于区际贸易、交通流向、人口迁移、购物消费行为、通讯信息流动、航空线路等场景,也可应用企业货物运输,供应链管理。
如何快速在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中,数据需要预先进行清洗,再放入代码中。代码块主要分为三部分:字段定义地理位置、字段赋值以及图表框架搭建,部分代码如下所示:
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等。比如我要分析一个企业的区域贸易的销量情况,这里我就用Wyn Enterprise给大家实操一下。
下面是原始数据:
导入数据之后,创建新的仪表板,然后拖拽数据字段制作图表。这里有两种方式来识别地理信息: 一种是让系统根据位置名称来识别,只绑定位置名称,系统会自动根据位置名称识别对应的经纬度,另一种是直接通过经纬度数据来识别,绑定数据系统会自动识别,一键生成流向地图。
这样简单的拖拽就实现了一个流向地图,自动支持数据过滤,钻取联动分析等,还可以根据自己的个人爱好或者分析目标、设置图表颜色或者其他酷炫的动态效果。
最后呢只需要在VUE项目里调用这个仪表板地址即可实现项目需求。
流向地图在Wyn Enterprise可视化大屏中的一个示例:
Vue项目中Echarts流向图迁徙图实现相关推荐
- echarts迁徙图 vue_【可视化插件】Vue项目中Echarts流向图迁徙图实现
public render() { //图表绘制方法 this.chart.clear(); const isMock = !this.items.length; const items = isMo ...
- vue项目中如何引入阿里矢量图
1.首先去阿里矢量图官网 https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.da2e3581b&ty ...
- 在vue项目中 使用swiper轮播图的关于 在ios中图片白边闪屏踩坑记录
场景描述: 近日,接到一个需求,改善APP首页的布局,需要在顶部添加一个可滚动的栏目导航,以切换栏目然后切换栏目内容类似于唯品会目前的切换效果.如下图 问题描述: 在切换顶部栏目的时候,下面内容页的b ...
- Vue 项目中 Swiper(5) 轮播图分页器 swiper-pagination 无法显示问题(解决方案集合)
最近用Vue做项目需要加个轮播效果,安装swiper后,结果分页器死活出不来,但轮播效果和前进后退箭头以及滚动栏都是正常显示的,默认安装的是最新版本swiper@6.4.5,这可把我难住了. < ...
- vue项目中 echarts的渐变色的设置
实现效果 2 设置渐变色 areaStyle: {normal: {color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: ...
- 在Vue项目中使用Gojs
文章目录 前言 1. Gojs的安装 2. 在vue项目中的引用 3. js导入 4. 画布初始化 画布基础配置 主画布layout配置 右侧画布配置 5. 连接线的配置 6. 节点的配置 7. 节点 ...
- 在Vue项目中使用echarts完成迁徙图(Map组件)
在Vue项目中使用echarts完成迁徙图 此章个人理解:参考原有的代码基础上,完成了一个地图迁徙的组件先了解一下整体代码, 有能力的可以参照整体完成, 下面也会列出详细步骤解答 代码我放在了gith ...
- vue项目中使用echarts完成图表类的开发之饼图,环形图
最近在vue项目中使用echarts.js完成诸如饼图,环形图,折线图,折线图加柱状图,和柱状图(水平柱状图和垂直柱状图),以及柱状图堆叠,下面请看图片展示: 如上图所示基本上echarts的简单图表 ...
- vue项目中使用echarts-地图
vue项目中使用echarts-地图 npm install echarts 在使用的页面或main.js中进行引用 import echarts from "echarts"; ...
最新文章
- logback property 默认值_看完这篇文章还不会给spring boot配置logback,请你吃瓜
- 美国疫情加剧:特朗普检测虚惊一场,女儿伊万卡开始“隔离”,马云捐助百万口罩...
- gitignore 文件生效办法
- 王道计算机考研 数据结构 (查找-上)
- linux中的用户、群组和权限
- linkedblockingqueue使用_阿里规范要求不能使用Executors创建线程
- 数据库---练习题(45道)
- [九省联考2018] 一双木棋 chess
- ppt复制切片器_听说你还不会用切片器?比筛选好用100倍,小白也能学会!
- 1999年考研数学一解析pdf
- 现代数字信号处理课后作业【第六章】
- PHP 快递地图模式,使用D3.js创建物流地图的步奏详解
- 用SPSS搞定问卷调查中的决断值
- 微信域名防封、域名检测接口api、域名跳转技术、360防拦截揭秘(二)------传统防封的弊端
- 由海天瑞声支持,全球最大多领域英语开源数据集发布
- 信息与计算机科学丛书,信息与计算科学丛书: 典藏版
- 专注少儿成长,掌门少儿打造多维思维启蒙体验
- 图像修复模型——TV模型
- STM32L0系列之ADC采集
- 美国微软总部SDET实习面经