案例: http://www.internetke.com/jsEffects/2018040406/

前段时间用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

---------------------
作者:symoriaty
来源:CSDN
原文:https://blog.csdn.net/symoriaty/article/details/86220114
版权声明:本文为博主原创文章,转载请附上博文链接!

可视化-echarts流向图制作的更多相关文章

  1. arcgis制作风或水流速流向图

    制作风或水流速流向图 风速风向图或流速流向图相信大家都已经见过不少,但不知道有多少人会制作这样炫的专题图,下面这边文章向我们展示了当基本数据U和V矢量被存储时,怎样计算风或水流的速度和方向和对其进行符 ...

  2. Echarts数据可视化series-radar雷达图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  3. Echarts数据可视化series-line线图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  4. Echarts数据可视化series-graph关系图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  5. 前端数据可视化echarts.js使用指南

    一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...

  6. 前端数据可视化echarts.js

    一.echarts.js的优势与总体情况 echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目,总体上来说有这样的一些优点 1.容易使用 echarts.js的官方文档比 ...

  7. d3.js 教程 模仿echarts折线图

    今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...

  8. echarts雷达图

    用echarts展现雷达图的定制 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  9. echarts柱图自定义为硬币堆叠的形式

    看这标题,可能会有一些人不太明白,那么直接上图,就是柱图展示形式如下图(兼容IE8) 要想实现这样展示效果.我们想用echarts直接实现不行的,即使是纹理填充也不可行的,但是我们可以借助echart ...

随机推荐

  1. 让docker容器开机启动

    网上有些文章说,要让docker 的容器自动在开机启动,是写脚本,比如在 rc.local 中写.其实完全没必要这么麻烦,docker 有相关指令,docker run 指令中加入 --restart ...

  2. 用变量替换指定的字符串,sed: -e 表达式 #1, 字符 29: “s”的未知选项

    在shell脚本里,使用sed,然后用变量替换指定的字符串,一直出现这个错误:但是单独运行在外面可以 把分隔符/替换成#就可以: sed "s#revision=.*#revision=$s ...

  3. redis 的备份策略,最好使用:RDB-AOF 混合持久化

    相关资料: Redis 4.0 新功能简介:RDB-AOF 混合持久化:http://blog.huangz.me/2017/redis-rdb-aof-mixed-persistence.html ...

  4. 【java】final修饰符介绍

    final: 最终,作为一个修饰符特点:1.可以修饰类,函数,变量2.被final修的的类不能被继承.因此类用final修饰可以避免被继承,被子类重写功能.3.被final修饰的方法不可以被重写.4. ...

  5. Excel函数之sumifs应用

    这个函数是用来进行多条件求和的一个函数 示例:根据表格求出“鼎盛书店”2012年度所有图书小计的总和,这里就用sumifs计算 首先定位结果输出单元格,祭出函数. sum_range参数就是筛选后需要 ...

  6. zip()函数,max()和min(),built-in function,import模块,read(),readlines(),write(),writelines(),with..as..文件处理方式

    zip()函数:将可迭代对象作为参数,将对象中的对应元素打包成一个个元组. #map()普通的输出例子 print(list(zip(('a','n','c'),(1,2,3)))) print(li ...

  7. ionic3使用cordova创建自定义插件

    1 安装 plugman 插件 npm --registry https://registry.npm.taobao.org install -g plugman 2 新建组件 新建一个插件文件夹,进 ...

  8. problem:浏览器如何区分html超文本和普通文本

    运营同学问:后端返回的一串元素标签,我想在网页中显示的时候,将标签中的内容渲染出来,不希望直接显示标签. 回答:bootstrap加模版组织的网页,模版渲染的数据只能渲染字符串,不能转化富文本. 运营 ...

  9. linux添加zabbix service并开机自动启动

    最近有个数据库相关操作后需要重启操作系统,重启后发现zabbix监控一直没有数据,迷了半天原来zabbix压根就没有启动.想了半天决定把zabbix添加到系统服务,并设置开机启动. 1.按一定的规则编 ...

  10. Core Graphices 设置渐变

    Core Graphices 设置渐变 Quartz 提供了两种设置渐变的方式  CGShadingRef and CGGradientRef 尝试CGGradientRef 的使用 import & ...