基于力导向图的-Echarts整理
WEB图形绘制：力导向布局图-Echarts
先介绍一下矢量图的概念：
矢量图使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、 圆和弧线等等，它们都是通过数学公式计算获得的。例如一幅花的矢量图形实际上是由线段形成外框轮廓， 由外框的颜色以及外框所封闭的颜色决定花显示出的颜色。 SVG,VML, HTML5 Canvas 这三个技术绘制的都是矢量图。 只是由不同的厂商开发出来的。 要达成的效果基本是一样的。
1. VML
全称Vector Markup Language(矢量可标记语言)。 是微软1999年9月附带IE5.0发布的。
浏览器支持：
Internet Explorer 5++ -- Internet Explorer 8
IE9 以后就支持SVG了。
IE10 就已经把VML作为过时的技术来看待了。
2. SVG
全称Scalable Vector Graphics(可缩放矢量图形)， 是基于xml,用于描述二维矢量图形的一种图形格式。
在 2003 年一月，SVG 1.1 被确立为 W3C 标准。
浏览器支持：
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。
3. HTML5 Canvas
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
总结
所以在要在 browser 显示图形， 对于不同的浏览器使用的技术不同。
使用VML绘制图形， 速度是比较慢的。 基本上50个节点加上一些关联页面就会比较钝了。
VML会逐渐的退出。 但是目前IE8 及以下版本的IE浏览器的使用量还是很高。所以必须要兼顾。
HTML5 的标准逐步完善中，业界有很多基于js的类库:chartjs，FusionCharts，amCharts，flot，RGraph，jqPlot，gRaphaël等等。有的是免费甚至开源的，有的则是商业的，百度一下就能找到他们。
经过比较，基于html5 canvas的Echarts目前是比较适合当前需求的
不信，请看
先拿Echarts和业界知名度很高的Highcharts做个简单对比
| # | ECharts | Highcharts |
| 柱状图（条形图） | Yes | Yes |
| 折线图（面积图） | Yes | Yes |
| 饼图（环形图） | Yes | Yes |
| 散点图（气泡图） | Yes | Yes |
| 雷达图 | Yes | Yes |
| K线图 | Yes | Highstock |
| 力导布局图 | Yes | No |
| 和弦图 | Yes | No |
| 地图 | Yes | Highmap |
| 事件河流图 | Yes | No |
| 特色图表(如仪表盘) | Yes | Yes |
怎么样，看了表格对比，还是Echarts略胜一筹吧
布局的讨论
这里只讨论两种布局： 树和图。 为什么只讨论这两种？ 饼图， 柱状图相当简单， 而且有大量的现有组件可以使用。
首先需要明确的一个问题是： 树和图的区别？
直观上的感觉好像是： 往左右或是上下两个方向延伸的是树， 往四周任意方向延伸的是图。
这种感觉在科学上是不科学的。 《数据结构》里对树和图有很明确的界定。最大的区别就是
树： 一个节点只有一个父节点。
图： 一个节点可以有任意多个父节点。
从这个意义上来说， 树也可以是环形的。
但是， 这里讨论的layout 讨论的树和图的概念， 还是有点偏向于直观上的理解： 左右或是上下两个方向延伸的是树， 往四周任意方向延伸的是图。
树的布局
树的布局算法相对简单，只需要遵循一些基本的原则就可以了：
1. 在同一层的节点之间应该保持一定的距离
2. 父节点需要位于其包含的所有子节点的中心位置
3. 整个树应尽量保持对称，平衡。
4. 相同子树的呈现效果应尽量相同
5. 在不违反以上规则的状况相， 树应该尽量的省空间。
图的布局
图的布局方式很多， 综合起来， 常见的有以下2种
1. 环形
环形图又分为两种
a) 同心圆： 所有的子节点层都围绕一个圆点展开。
b) 异心圆： 每个子节点都是下一级子节点的圆心。
2. 力导向(Force-directed)
这种布局不关心业务数据的逻辑， 只是单单从展现的效果最美观来显示图形。
使用到了物理学上里的概念。
大数据时代，重新定义数据图表的时候到了
ECharts（Enterprise Charts 商业产品图表库） 是基于Canvas的，纯Javascript 的图 表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等 特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
这是它的项目主页： http://echarts.baidu.com
疑难解答
nodes数组
这个内主要是用于定义结构图的所有节点，其中category是指当前节点属于categories数组内的哪一个分类。脚标从0开始
name表示节点的名称，value表示大小；
links数组
这个主要是用于定义nodes内节点之间相互的关系，只要这里建立关系后，展现出来的关系图节点相互之间会产生一条连接线进行相互之间的链接。在设置这个数组的时候需要注意一下几点：
a、source：表示节点位于nodes数组内的位置，脚标从0开始。这个数字的范围必须是[0,nodes.length]；
b、target：表示链接的目标节点在nodes数组内的位置，脚标从0开始。这个数字的范围必须是[0,nodes.length]；
c、weight：表示当前节点的权重，权重越大距离目标节点的位置越近，也表示越亲近。数字范围不限制，数字越小距离目标节点越远。
下面是一些参考的在线文档
demo下载 :https://files.cnblogs.com/files/leshao/Echarts-demo.rar
==========================
以上资料源自互联网内容整理。
浙公网安备 33010602011771号