layout: post enUrl: ‘2017/01/13/new-release-en.html’ title: ECharts 3.4 版本发布:新增象形柱图、主题河流图、水球图 description: “在 ECharts 新发布的 3.4 版本中,新增象形柱图、主题河流图、水球图三种新图表。象形柱图利用图片和形状表现数据,主题河流图可以用来表示事件或主题等在一段时间内变化,水球图常用来展现百分比数据。” tags: [新版本, 扩展, 教程] image: feature: post/2017-01-13-new-release-theme-river.png

在 ECharts 新发布的 3.4 版本中,新增象形柱图、主题河流图、水球图三种新图表。象形柱图利用图片和形状表现数据,主题河流图可以用来表示事件或主题等在一段时间内变化,水球图常用来展现百分比数据。

象形柱图

象形柱图是可以设置各种具象图形元素(如图片、SVG PathData 等)的柱状图。往往用在信息图中,用于有至少一个类目轴或时间轴的直角坐标系上。

它既可以用图形的长宽变形表现数据,也可以用图形的个数、甚至是图形的颜色、透明度变化表现数据。

在下面的例子中,右边的两座山分别是一个图片,而最左侧的纸是由多个图片堆加成的,象形柱图会根据它们所在系列对应的数值,决定其高度。配合动画效果,能够实现很好的视觉效果。

ECharts 圣诞活动页中,我们制作了以下这个驯鹿和交通方式的速度对比图,这样的图表可以使用 ECharts 象形柱图方便地实现。下图包含两个系列,一个是显示在上方的交通方式矢量图标,象形柱图默认会将每个图标放在对应值所在位置的下方,通过 symbolSize 指定图标大小;另一个系列是显示在图标下方的山峰,在不指定 symbolSize 的情况下,将填充满所在的“柱子”,因而就有了图示效果。

除此之外,象形柱图还可以用同一图形的个数表现数值,实现类似 ECharts 圣诞活动页中一群小精灵的效果。因而象形柱图可以很大程度上满足信息图的制图需求。

从 3.4 版本起,象形柱图将被包含在 ECharts 下载页面的“完整”版本中,无需引入额外文件,通过将系列名称设为 pictorialBar 即可使用。

更多例子请前往官网例子查看。

主题河流图

主题河流图是一种特殊的流图,它主要用来表示事件或主题等在一段时间内的变化。

主题河流中不同颜色的条带状河流分支编码了不同的事件或主题,河流分支的宽度编码了原数据集中的 value 值。此外,原数据集中的时间属性,映射到单个时间轴上。

图中的每一个系列,可以是一个产品市场占有率的变化,也可以表示国家人口的变化等等事件或主题。

更多例子请前往官网例子查看。

水球图

水球图的使用方式非常简单,实现以下这样的效果,只需要将系列类型设为 liquidFill,并且指定数据即可。

对应的代码为:

option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3]
    }]
};

水球图的个性化程度非常高,你可以为每个波指定波长、周期、相位、颜色、阴影、透明度等等属性,“水球”的形状可以是圆形、方形、三角形等等,甚至可以指定任意的 SVG PathData,因此可以制作出变化非常的效果。

我们在 ECharts 圣诞主题页实现的雪球下降的效果,即是用水球图实现的。

和象形柱图、主题河流图不同的是,水球图是作为插件发布的。这意味着,在 ECharts 官网下载的完整版本将不包含水球图,使用时,需要在引入 echarts.js 之后,另外引入水球图对应的 echarts-liquidfill.js,可以在 GitHub 找到最新版本。

如果感兴趣的话,可以前往水球图 GitHub 项目页面了解更多,或者在 Gallery 页面查看更多效果。

其他更新内容

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