案例: 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. Written a lua threadpool

    工作原理 由于lua只能单线程运行,该lib要求所有lua代码在单线程,而多线程部分只能为c代码 具体用法上要求多线程部分必须用c实现 相关模块 线程池 异步函数实现框架 Now only a sle ...

  2. LOJ 2546 「JSOI2018」潜入行动——树形DP

    题目:https://loj.ac/problem/2546 dp[ i ][ j ][ 0/1 ][ 0/1 ] 表示 i 子树,用 j 个点,是否用 i , i 是否被覆盖. 注意 s1<= ...

  3. 阅读 Device Driver Programmer Guide 笔记

    阅读 Device Driver Programmer Guide 笔记 xilinx驱动命名规则 以X开头 源文件命名规则 以x打头 底层头文件与高级头文件 重点来了,关于指针的使用 其中 XDev ...

  4. windows下matplotlib编译安装备忘

    windows下,codeblocks,mingw安装matplotlib. python下一些源码的编译安装,备忘. matplotlib官网编译好的版本只支持到3.3.我不慎刚下了python3. ...

  5. Windows Azure Virtual Network (13) 跨数据中心之间的虚拟网络点对点连接VNet Peering

    <Windows Azure Platform 系列文章目录> 今天是大年初二,首先祝大家新年快乐,万事如意. 在笔者之前的文章中:Windows Azure Virtual Networ ...

  6. Azure VMSS (1) 入门

    <Windows Azure Platform 系列文章目录> 在使用云计算服务的时候,我们经常需要有自动横向扩展的功能.比如: 1.在业务高峰期,根据负载的增加,自动打开若干台VM 2. ...

  7. 【C++】读取参数的类

    在C++程序中,如果我们把程序中的参数都保存在txt文本中,运行时再去读取.这样的好处是,当我们需要调参的时候,不需要每次都重新编译程序,大大提升了效率. 今日分享一份实现以上功能的代码,代码来源:h ...

  8. Java Web参考资料

    Maven Maven学习 Eclipse 使用Maven 构建Web项目的最佳方式:总的来说就是先要修改项目的Project facets来更改Java版本.Servlet版本. 错误Cannot ...

  9. [蓝桥杯]PREV-44.历届试题_青蛙跳杯子

    问题描述 X星球的流行宠物是青蛙,一般有两种颜色:白色和黑色. X星球的居民喜欢把它们放在一排茶杯里,这样可以观察它们跳来跳去. 如下图,有一排杯子,左边的一个是空着的,右边的杯子,每个里边有一只青蛙 ...

  10. jdk8 Metaspace 调优

    简介 jdk8的元空间的初始大小是21M,如果启动后GC过于频繁,请将该值设置得大一些. 更多Meatspace内容见<Metaspace 之一:Metaspace整体介绍(永久代被替换原因.元 ...