可视化-echarts流向图制作及recharts
前段时间用echarts做了流程图,在此记录下制作步骤。
一、Echarts是什么
Echarts,缩写来自 Enterprise Charts,商业级数据图表,是百度的一个开源的数据可视化工具,一个纯 Javascript 的图表库,能够在 PC 端和移动设备上流畅运行,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的 Canvas 库 ZRender,ECharts 提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。
二、Echarts的特点
- ECharts 属于开源软件,并且我们提供了非常炫酷的图形界面,特色是地图,另外还提供了柱状图、折线图、饼图、气泡图及四象限图等;
- ECharts 使用简单,在官网中为我们封装了 JS,只要会引用就会得到完美的展示效果;
- ECharts 种类多,ECharts 实现简单,各类图形都有;相应的模板,还有丰富的 API 及文档说明,非常详细;
- ECharts 兼容性好,基于HTML5,有着良好的动画渲染效果
三、Echarts官网(下载和教程)
echarts 2.0 https://echarts.baidu.com/echarts2/doc/example.html
echarts 3.0 https://echarts.baidu.com/examples/
四、流向图的制作
echarts功能很强大啊,我暂时只用到了流向图。我是在echarts2.0里面制作的。
首先从官网下载2.0的压缩包,解压后,得到echarts2.0文件夹,按照extension→Bmap→doc找到流向图所在的文件夹。
在流向图中js文件中,如果能看懂代码每一部分的意思就很好修改了。
五、论文中使用了echarts,引用格式
摘自echarts官网
Notice
Please cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations, teaching, patents, and other related intelligence activities.
当您在研发项目,研究论文,技术报告,新闻报告,书籍,演示文稿,教学,专利等中使用 ECharts 时,请引用以下论文。
ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization
Deqing Li, Honghui Mei, Yi Shen, Shuang Su, Wenli Zhang, Junting Wang, Ming Zu, Wei Chen.
Visual Informatics, 2018 [PDF]
六、R语言中的Echarts
recharts包
官方文档即详细介绍http://madlogos.github.io/recharts/Basic_Plots_31_Map.html#-en
可视化-echarts流向图制作及recharts相关推荐
- Vue项目中Echarts流向图迁徙图实现
在数据可视化中,地图可视化是高频应用的一种.我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图.数据地图可以最直观的表达出数据之间的空 ...
- echarts迁徙图 vue_【可视化插件】Vue项目中Echarts流向图迁徙图实现
public render() { //图表绘制方法 this.chart.clear(); const isMock = !this.items.length; const items = isMo ...
- 前端数据可视化ECharts使用指南——制作时间序列数据的可视化曲线
我为什么选择ECharts ? 1.容易使用,好上手,官网文档优雅清晰,案例简明美观,学习时间短. 2.开源免费,压根不要什么成本,适合我这种穷屌啊.所以,在比较了MetricGraphics.js后 ...
- 如何使用ArcGIS制作OD图与放射状流向图
一.什么是OD图 OD图,"O"来源于英文ORIGIN,指出行的出发地点,"D"来源于英文DESTINATION,指出行的目的地. 在一些文章当中我们经常可以看 ...
- Echarts数据可视化series-radar雷达图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-line线图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-graph关系图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- arcgis风向_arcgis制作风或水流速流向图
制作风或水流速流向图 风速风向图或流速流向图相信大家都已经见过不少,但不知道有多少人会制作这样炫的专题图,下面这边文章向我们展示了当基本数据U和V矢量被存储时,怎样计算风或水流的速度和方向和对其进行符 ...
- arcgis风向_ArcGIS教程:制作风或水流速流向图
风速风向图或流速流向图相信大家都已经见过不少,但不知道有多少人会制作这样炫的专题图,下面 这边文章向我们展示了当基本数据 U 和 V 矢量被存储时,怎样计算风或水流的速度和方向和对其进行符号 化. 为 ...
最新文章
- 创业丨中国人工智能领域投资机构10强榜单
- 透过现象看本质-使用vs.net第二天
- 【比赛】论如何七天内在研究生电子设计竞赛中拿国奖
- bind-utils.x86_64(dig) 安装失败解决办法
- 【Linux】一步一步学Linux——cksum命令(235)
- 为什么梯度反方向是函数下降最快的方向
- 【Java】深入探讨Java数值舍入问题
- HEVC官方代码下载及码流分析软件使用
- CSS样式布局入门介绍,非常详尽
- MVC HtmlHelperTModel 类
- openresty lua_package_path指令
- vuex页面刷新后数据丢失
- 脚本 - EXCEL
- 码流 / 码率 / 比特率 / 帧速率 / 分辨率 / 高清的区别
- 大学英语B116-写作
- js更换自定义鼠标指针图片
- C++ uint8_t
- 3441. 唐纳德与子串 (Easy)
- Android 基础:Materia Design 定义视图阴影elevation和创建卡片CardView
- C语言指针学习(6)指针数组-字符指针数组
热门文章
- python代码架构_Python架构
- 百度地图海量点清除(始终保留最新的点)
- php cgi漏洞,CGI漏洞攻击合集上
- logback修改日志内容_巧用maven profile动态修改logback日志目录
- crontab 半小时_?用猫粮诱惑,7名消防员花半小时救出困在夹墙间的喵星人
- function_core.php is missing下载,discuz中 function_core.php中的dmkdir有死环bug
- 用邮箱实现多事件的单向同步
- ebs查看服务状态_浅析AWS KMS密钥管理服务
- kvm linux重置密码,kvm虚拟机操作相关命令及虚拟机和镜像密码修改
- c3p0 参数 模糊查询_MySQL模糊查询用法大全(正则、通配符、内置函数等)