ECharts 3.4 发布：新增象形柱图、主题河流图、水球图
发布于 2017-01-13 10:26:52 | 369 次阅读 | 评论: 0 | 来源: 网友投递
ECharts Javascript免费图表库
ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
在 ECharts 新发布的 3.4 版本中，新增象形柱图、主题河流图、水球图三种新图表。象形柱图利用图片和形状表现数据，主题河流图可以用来表示事件或主题等在一段时间内变化，水球图常用来展现百分比数据。
象形柱图
象形柱图是可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图。往往用在信息图中，用于有至少一个类目轴或时间轴的直角坐标系上。
它既可以用图形的长宽变形表现数据，也可以用图形的个数、甚至是图形的颜色、透明度变化表现数据。
在下面的例子中，右边的两座山分别是一个图片，而最左侧的纸是由多个图片堆加成的，象形柱图会根据它们所在系列对应的数值，决定其高度。配合动画效果，能够实现很好的视觉效果。
在 ECharts 圣诞活动页中，我们制作了以下这个驯鹿和交通方式的速度对比图，这样的图表可以使用 ECharts 象形柱图方便地实现。下图包含两个系列，一个是显示在上方的交通方式矢量图标，象形柱图默认会将每个图标放在对应值所在位置的下方，通过 symbolSize 指定图标大小；另一个系列是显示在图标下方的山峰，在不指定 symbolSize 的情况下，将填充满所在的“柱子”，因而就有了图示效果。
除此之外，象形柱图还可以用同一图形的个数表现数值，实现类似 ECharts 圣诞活动页中一群小精灵的效果。因而象形柱图可以很大程度上满足信息图的制图需求。
从 3.4 版本起，象形柱图将被包含在 ECharts 下载页面的“完整”版本中，无需引入额外文件，通过将系列名称设为 pictorialBar 即可使用。
更多例子请前往官网例子查看。
主题河流图
主题河流图是一种特殊的流图，它主要用来表示事件或主题等在一段时间内的变化。
主题河流中不同颜色的条带状河流分支编码了不同的事件或主题，河流分支的宽度编码了原数据集中的 value 值。此外，原数据集中的时间属性，映射到单个时间轴上。
图中的每一个系列，可以是一个产品市场占有率的变化，也可以表示国家人口的变化等等事件或主题。
更多例子请前往官网例子查看。
水球图
水球图的使用方式非常简单，实现以下这样的效果，只需要将系列类型设为 liquidFill，并且指定数据即可。
对应的代码为：
水球图的个性化程度非常高，你可以为每个波指定波长、周期、相位、颜色、阴影、透明度等等属性，“水球”的形状可以是圆形、方形、三角形等等，甚至可以指定任意的 SVG PathData，因此可以制作出变化非常的效果。
我们在 ECharts 圣诞主题页实现的雪球下降的效果，即是用水球图实现的。
和象形柱图、主题河流图不同的是，水球图是作为插件发布的。这意味着，在 ECharts 官网下载的完整版本将不包含水球图，使用时，需要在引入 echarts.js 之后，另外引入水球图对应的 echarts-liquidfill.js，可以在 GitHub 找到最新版本。
如果感兴趣的话，可以前往水球图 GitHub 项目页面了解更多，或者在 Gallery 页面查看更多效果。
其他更新内容
-
[+] map series 可以使用用户指定的 geo 坐标系 了（原先是只能使用内置的 geo 坐标系）。从而，geo 坐标系可以使用 map series 控制自身的颜色，并且 map series 可以和其他类型的 series（如 scatter series）共享 geo 坐标系。参见 series-map.geoIndex。
-
[+] 增加了 focusNodeAdjacency action，从而能用 API 控制 graph 的连接高亮。
-
[+] 增加了 series-pie.animationType，支持不同的饼图动画效果。
-
[+] animationDuration 增加了回调函数支持，可以根据不同的数据项得到不同的动画时长。
-
[+] category axis 支持了 min max 的设置。
-
[+] category axis 默认情况会显示所有的类目，不论是否有类目中没有数据（原先两端的没有数据的类目不会被显示）。
-
[+] singleAxis 中的 data 支持了一维数组的数据格式，如 [11, 23, 44]。
-
[+] dataZoom 支持了 singleAxis。
-
[+] 开放了 throttle 工具方法：chart.util.throttle。
-
[+] 优化了 直角坐标系 中数据全不显示时的显示效果。
-
[+] K 线图 支持了 barWidth，barMinWidth，barMaxWidth 设置。参见 #4783。
-
[+] 线图 支持了 symbol, symbolSize 设置。
-
[+] 支持了 visualMap-piecewise 中数据标签和首尾的文本同时显示。参见 visualMap-piecewise.showLabel 参见 #4845。
-
[+] 支持了 visualMap 支持系列中的某些数据不受 visualMap 控制。
-
[^] 在 showTip 事件中开放了 dataIndex 参数。
-
[^] 修复了 tooltip 中的 XSS 隐患。参见 #4769。
-
[^] 修复了 series-graph.edgeLabel 中部分属性无效的问题。参见 #4555。
-
[^] 修复了 series-gauge 中 min max 是 stirng 时的 tick 渲染问题。参见 #4617。
-
[^] 修复了 series-gauge.pointer.show 的问题。参见 #4618。
-
[^] 修复了 series-radar 在无数据时渲染可能抛错的问题。
-
[^] 修复了 markArea.label.normal.show 的问题。参见 #4723。
-
[^] 优化了 log 数轴 中，数据小于等于 0 时的处理。参见 #4743 和 #3161。
欢迎前往 ECharts Gallery 创建自己的 ECharts 图表，更方便地提问，以及建立自己的作品集。2017 年，让我们一起将可视化做得更棒！
历史版本 :
ECharts v4.0.2 发布：修复了用户反馈的三个问题
ECharts 全新大版本 4.0 正式发布：带来 8 项全新特性
ECharts v3.8 发布，新增支持多种布局的树图
ECharts v3.7.1 发布：改善了 K 线图边界模糊的问题
ECharts v3.7 发布：增加富文本标签、可滚动图例
ECharts 3.6.2 发布，增强了自定义系列和矩形树图
ECharts 3.6.1 发布，JavaScript 图表库
ECharts 3.6.0 发布，新增自定义系列和极坐标柱状图
ECharts 3.5.4 发布，JavaScript 图表库
ECharts 3.5.3 发布，JavaScript 图表组件
ECharts GL 1.0 alpha 发布
ECharts GL 1.0 alpha 发布