ECharts 3.4 发布:新增象形柱图、主题河流图、水球图

ECharts
 ECharts
发布于 2017年01月13日
收藏 89

在 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 页面查看更多效果。

其他更新内容

欢迎前往 ECharts Gallery 创建自己的 ECharts 图表,更方便地提问,以及建立自己的作品集。2017 年,让我们一起将可视化做得更棒!

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 OSCHINA 社区 [http://www.oschina.net]
本文标题:ECharts 3.4 发布:新增象形柱图、主题河流图、水球图
加载中

精彩评论

随风巽
随风巽
百度唯一良心产品
冬天之雪
冬天之雪
百度唯一的良心产品
金拱门
金拱门
屌!支持。最好的图标工具,没有之一。
总么可能
总么可能
-------------------------------------------------------------
|是什么力量让 珠穆朗玛峰 涨到了 8848km! | 百度一下 |
苍松
苍松
厉害了,百度良心产品

最新评论(30

习近平-
能不能做个前后端能交互的人脉关系图表,要求有头像,鼠标移上去有个人名片。
OSC_Wahson
OSC_Wahson

引用来自“冬天之雪”的评论

百度唯一的良心产品
@随风巽 @冬天之雪 很好
映路似紫霞
映路似紫霞
真的是好东西啊
提督东厂掌印码农
提督东厂掌印码农
百度唯一良心产品
名字都让DOG取了

引用来自“总么可能”的评论

-------------------------------------------------------------
|是什么力量让 珠穆朗玛峰 涨到了 8848km! | 百度一下 |

引用来自“ECharts”的评论

啊呀,小编粗心了呢,嘿嘿~ 应该是 m!发出的文章不能修改,不过多谢指正哦!
然鹅,小编,你依旧错了,最近一次珠峰测量结果是 8844m😆
懒懒想睡觉
我来看看有没有树图了。
吃饼青年
吃饼青年
以前都是用HighCharts,看来以后也要关注下ECharts了,希望越来越好
fingsilver
fingsilver
最近做winform程序,一直找不到一款能跟echarts媲美的图表库啊,都想在winform里嵌网页用echarts了
返回顶部
顶部