echarts v3.5 发布:新增日历坐标系、坐标轴指示器;同时统计扩展 v1.0 发布

在 echarts 新发布的 3.5 版本中,新增了日历坐标系,增强了坐标轴指示器。同时,echarts 统计扩展 1.0 版本发布了。日历坐标系用于在日历中绘制图表,坐标轴指示器方便用户观察数据内容,统计扩展是一个专门用来进行数据分析的工具。

统计扩展

统计扩展是一个专门用来进行数据分析的工具,目前主要包含了二维的回归、多维的聚类以及一些常用的统计功能。

扩展中的回归算法不仅包含了常用的线性回归,还包含了指数回归、对数回归、以及多项式回归。

线性回归的示例:

对数回归的示例:

秉承了可视分析的宗旨,我们的多维聚类分析,不仅可以静态地产出数据集聚类的结果,还可以动态地查看整个聚类分析的过程。

静态地产出数据集聚类的结果的示例:

动态地查看整个聚类分析的过程的示例:

和 echarts 中的原生图表不一样,统计扩展是作为一个扩展工具发布的。这意味着,在 echarts 官网下载的完整版本将不包含该扩展包。统计扩展和 echarts 结合使用时,需要在引入 echarts.js 之后,另外引入统计扩展对应的 ecStat.js。可以在 这里 (GitHub) 找到最新版本,其中 dist/ecStat.js 可作为单文件引用。

如果想了解更多内容请前往 统计扩展 GitHub 首页

日历坐标系

日历坐标系,是一种新的 echarts 坐标系,提供了在日历上绘制图表的能力。例如可以在日历坐标系上放置热力图、散点图、关系图等。如下示例:

在日历坐标系中使用热力图:

在日历坐标系中使用散点图:

还可以混合放置不同的图表,例如下例子,同时放置了热力图和关系图:

水平和垂直放置日历

在日历坐标系可以水平放置,也可以垂直放置。如上面的例子,使用热力图时,经常是水平放置的。但是如果需要格子的尺寸大些,水平放置就过于宽了,于是也可以选择垂直放置。参见 calendar.orient

尺寸的自适应

日历坐标系支持不同尺寸的容器(页面)大小变化的自适应。首先,和 echarts 其他组件一样,日历坐标系可以选择使用 leftrighttopbottomwidthheight 来描述尺寸和位置,从而将日历摆放在上下左右各种位置,并随着页面尺寸变动而改变自身尺寸。另外,也可以使用 cellSize 来固定日历格子的长宽。

中西方日历习惯的支持

中西方日历有所差别,西方常使用星期日作为一周的第一天,中国使用星期一为一周的第一天。日历坐标系做了这种切换的支持。参见 calendar.dayLabel.firstDay

另外,日历上的『月份』和『星期几』的文字,也可以较方便的切换中英文,甚至自定义。参见 calendar.dayLabel.nameMap calendar.monthLabel.nameMap

其他更丰富的效果

灵活利用 echarts 图表和坐标系的组合,以及 API,可以实现更丰富的效果。

例如,制作农历:

下面这个例子,使用 chart.convertToPixel 接口,实现了饼图放置在日历坐标系中的效果。

坐标轴指示器

坐标轴指示器 (axisPointer)指的是,鼠标悬浮到坐标系上时出现的竖线、阴影区域等。它能帮助用户观察数据。echarts 原有的坐标轴指示器本次被整理和增强了,加入了文本标签,自动吸附到数据,以及移动触屏的手柄拖拽交互,以及支持了多个坐标系中指示器的联动。

下面是一个K线图的示例。使用坐标轴指示器,能够比较方便得观察到每一项对应的 y 值。

上例中,使用了 axisPointer.link 来关联上下两个直角坐标系的 axisPointer,使他们同步运动。

坐标轴指示器也提供了一种适合触屏的交互方式,使用手柄来拖拽坐标轴指示器。如果触屏上和鼠标操作一样,在坐标系内部拖拽操作坐标轴指示器,那么手指可能会挡住图表,并且可能和『数据区域缩放移动』操作冲突。用单独的拖拽手柄,可以改善这个问题。

这是另一个例子:

坐标轴指示器在多轴的场景能起到辅助作用,清晰得显示出对比数值,甚至可以在坐标轴指示器的文本标签内定制表达更多信息:

最后提供一个内容更丰富些的例子,其中也使用了 axisPointer.link 来联动不同的坐标轴指示器。他关联和高亮了处于不同坐标系中的相互对应的点。

ECharts v3.5 Released, Publishing Calendar Coordinate System and Enhanced Axis Pointer, Meanwhile Statistic Extension v1.0 Released

We are releasing echarts v3.5, where calendar coodinate system is supported and axis pointer is enhanced. Meanwhile echarts statistic extension v1.0 is published.

Calendar coordiante system is a new type of echarts coordiante system, which can used to locate different charts (For example, scatter, heatmap, graph, pie, or even other coordinate systems like cartesian).

The original axis pointer is enhance significantly, which currently supports text label, a new interaction approach for touch device, and other detailed configurations. Besides, that synchronization between axis pointers of different coordinate systems is supported.

Statistic extension is a JavaScript liberary for statistics and data mining, including two-dimensional regression, multi-dimensional clustering and some commonly used statistical functions in v1.0.

Statistical Extension

Statistical extension is a statistical and data mining tool for echarts. At present, it mainly includes two-dimensional regression, multi-dimensional clustering and some commonly used statistical functions.

The regression algorithm in the extension not only contains the commonly used linear regression, but also contains exponential regression, logarithmic regression, and polynomial regression.

An example of linear regression:

An example of logarithmic regression:

Adhering to the purpose of visual analysis, our multi-dimensional clustering analysis, can not only statically produce the results of clustering of dataset, but also dynamically view the entire clustering analysis process.

An example of the result of dataset clustering:

An example demonstrating the entire process of clustering:

Unlike built-in charts in echarts, Statistical Extension is a extension of echarts, which is not intergrated by echarts by default, and you need to inclued ecStat.js after echarts.js. You can find the file dist/ecStat.js in the latest released version at here (GitHub).

If you would like to know more, please visit the Statistical Extension GitHub Home

Calendar Coordinate System

Calendar coordiante system is a new type of echarts coordiante system, which can used to locate different charts (For example, scatter, heatmap, graph, pie, or even other coordinate systems like cartesian).

Using heatmap in calendar:

Using scatter in calendar:

Different types of chart can be place on calendar coordinate system together.

Both place heatmap and graph chart in calendar:

Calendar layout:

Calendar coordinate system can be placed horizontally or vertically. By convention, the heatmap calendar is horizontal. But if we need bigger cell size in other cases, the total width may be too wide. So calendar.orient can help in this case.

Adapt to container size:

Calendar coordinate system can be configured to adapt to container size, which is useful when page size is not sure. First of all, like other components, those location and size configurations can be specified on canlendar: left, right, top, bottom, width, height, which make calendar possible to modify its size according to container size. Besides, cellSize can be specified to fix the size of each cell of calendar.

More effects:

Feel free to combination charts and calendar coordinate systems. You may achieve awesome effects.

For example, using API chart.convertToPixel to locate pie charts on calendar.

Axis Pointer

The term “Axis Pointer” refers the appearing line, shadow block and text label when mouse hovering or clicking on a coordinate system, which helps users to have insight into the data.

The original axis pointer is enhance significantly, which currently supports text label, a new approach of interaction on touch device, and other detailed configurations. Besides, that synchronization between axis pointers of different coordinate systems is supported.

An example, where axis pointers can be displayed in candlestick.

In the example above, axisPointer.link is used to synchronize axes from the two different cartesian coordiante system.

Besides, a approach of interaction on touch devices is supported, where axis pointer is alwayed displayed, and a handle button can be dragged to move the axis pointer, which makes the finger not block the view to charts any more.

This is another example:

These examples demonstrating the effect of mutiple axes with axis pointers:

At last, let’s see a more complicated example, where axisPointer.link is also be used to synchronize axis pointers of different axes.

可视化中的数据

当下随着大数据热潮的到来,数据可视化作为一个新兴的领域,受到了学术界和工业界的重视。从可视分析、数据新闻到商业报表,各个领域都在越来越多的使用它。既然是数据可视化,说明数据是主体,可视化只是将数据以可视的形式表达的手段。接下来小编就与大家一起揭开可视化中数据的面纱,一探究竟。

可视化什么:数据抽象

既然是数据可视化,无可非议,可视化的元素肯定是数据,这里所指的数据是广义上的数据,包括文本、图片、声音等超媒体数据。ECharts在可视化过程中所涉及的四种基本数据集类型分别是表格数据、网状数据、场数据和几何空间(spatial)数据,像集合、列表等也是常用的数据集类型。这些基本数据集类型又是由不同的数据类组合构成的,这里的数据类是指可视化中所涉及的数据种类,主要包括四种数据类,分别是数据项、数据项的属性、链接(links)、位置。数据项的属性又可分为类别型和有序型两种,其中有序型又进一步细分为序数型和数值型,下面将分别介绍数据类,数据集类型,以及属性类型。

数据类

本文主要讨论ECharts中所涉及的四种基本数据类,分别是数据项、数据项的属性、链接、位置。数据项是指一个独立的实体,如关系数据表中的一行,或网络中的一个节点;属性是数据项的某个可被观测的特性,如年龄,性别等;链接是指数据项之间的关系,该数据类型在网状关系型数据集中用的比较多;位置是地理空间数据类型,指代二维或三维空间中的某个具体位置;下图展示了四种不同的数据集类型所包含的数据类。

data

数据集类型

数据集是指为了分析而收集的任何信息,数据集包括数据表,网状数据,场数据(本文主要关注信息可视化,而场数据主要应用于科学可视化,因而在此不作介绍)以及几何空间数据这四种基本类型,而现实世界中的数据集一般是由这四个基本类型中的一个或多个组合而成的。下图展示了四种不同数据集类型具体的内部结构。

data

数据表

数据表是常用的数据集形式,由行和列组成。对于简单的扁平表格来说,每一行代表一个数据项,每一列代表一个属性,表格中的每一个单元格是由行号和列号索引的,保存着某个数据项的某个属性值;多维数据表在数据仓库中用的比较多,具有复杂的结构以及复杂的索引机制,一般来说,简单扁平表格至多具有一个键属性(key attribute),而多维表格具有多个键属性。

网状数据

网状数据主要用来表明数据项之间具有某种关系,在网状数据中数据项通常被称为节点,两个节点之间的关系被称为链接,也就是网络中的边,并且节点和链接都可以拥有与之相关联的属性。树是一种具有层次结构的特殊类型网络数据,与一般网络数据相比,树没有回路,每一个子节点都对应唯一的一个父节点。

几何空间(spatial)数据

几何空间结构数据通过明确的几何空间位置指定数据项的形状信息,这些数据项可以是空间中的点、一维的直线或曲线、二维的平面或区域,以及三维的立方体。空间数据在不同的度量尺度上具有层级结构。这种层级结构要么是原始数据集固有的,要么是从原始数据集派生出来的。 可视化中的数据主要以两种形式存在,一种是静态的数据文件,一种是动态的数据流。静态的数据文件是指可以同时获得完整的数据文件,而动态的数据流是指数据在不断的更新和变化。

属性类型

属性类型主要分为类别型和有序型两种,有序型又可进一步分为序数型和数值型。有序型数据的排列方向有三种,分别是单向型,有公共零点的双向型,以及环状周期型,如下图所示,除此之外,属性也可能有层级结构。 类别型属性是指名称上的不同,属性的值之间没有明确的排序,例如喜欢的球类运动包括足球、篮球、排球等。虽然类别型属性内部没有明确的排序,但任意外部的排序机制可以被应用在类别型属性上,如将球类运动的名字按字母顺序排列。 有序型属性包括序数型属性和数值型属性,所有有序型属性都有隐含的排列顺序。对于序数型属性,如小中大,虽然我们不能对它进行完全的算术运算,但在属性的内部有明确定义的顺序,如大减去中并不是有意义的概念,但我们知道中介于大和小之间。数值属性与序数属性不同,它具有大小和量级的明确度量,并且支持算术比较,一般以整数和实数形式存在,如76米减去34米是个有意义的数值,并且它们之间的差是可以被度量的,像温度、高度、长度等都是数值属性。 有序型数据可以是单向的有序序列,比如人的年龄,只能往一个方向递增,也可以是有公共零点的对向序列,如温度。有序型数据也可以是环状周期的,如时间相关的属性。 在单个属性内部或者多个属性之间可能具有层级结构,如北京一年的交通事故数量,这是一个时间序列数据,具有时间属性,可以分层级聚合,可以分别按周、月、年聚合,在不同的时间聚合尺度下可能会发现数据集中有趣的模式。除了时间属性之外,地理空间数据也具有层级结构,如可以细分到省、市、县等。

总结

本文简要讨论了可视化中的数据,从数据的种类、数据集的类型以及属性的类型这三个角度阐述了可视化中需要可视表达的数据信息。

参考文献

[1] Tamara Munzner.Visualization Analysis and Design. CRC Press, 2014.

ECharts 水球图教程

水球图是一种适合于展现单个百分比数据的图表类型,ECharts 的水球图插件使你能够通过非常简单的配置,实现酷炫的数据展示效果。

那么,今天我们就一起来学习一下,如何使用 ECharts 水球图。

第一步:引入 JavaScript 文件

ECharts 的水球图是一个插件类型的图表。这意味着,在 ECharts 官网下载的完整版本将不包含水球图——这保证了不需要使用该图表的用户能够获得一个尽可能小的代码版本。使用时,需要在引入 echarts.js 之后,另外引入水球图对应的 echarts-liquidfill.js,可以在 GitHub 找到最新版本。

<script src="echarts.js"></script>
<script src="echarts-liquidfill.js"></script>

<script>
// 使用水球图的代码
</script>

第二步:指定 DOM 元素作为图表容器

和创建 ECharts 的其他图表一样,我们需要指定 DOM 中的一个有高度和宽度的元素作为图表的容器——也就是图表将会绘制的位置。

<div id="liquidfill-chart" style="width=100%; height = 400px"></div>

传入该 DOM 元素,使用 ECharts 初始化图表:

var chart = echarts.init(document.getElementById('liquidfill-chart'));

第三步:设置水球图参数

和其他 ECharts 图表一样,水球图提供将系列的 type 指定为 'liquidFill'(注意大小写)来表明这是一个水球图类型。

一个简单的配置项可以是:

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3]
    }]
};
chart.setOption(option);

这样,就能得到文章开头的水球图效果了:

如果发现图表没有正确显示,你可以检查以下几种可能:

  • JS 文件是否正确加载;
  • echarts 变量是否存在;
  • 控制台是否报错(如果报错显示 liquidFill 系列不存在,则很可能 echarts-liquidfill.js 没有正确加载);
  • DOM 元素在 echarts.init 的时候是否有高度和宽度。

可以发现,在上面的代码中,我们只指定了图表类型为 'liquidFill',以及把数据设置为 [0.6, 0.5, 0.4, 0.3](对应生成的四个波浪),而其他的参数都是预设的。

即使不配置很多参数,预设的参数也可以使你获得一个优雅的水球图效果。而如果有特定的需求,ECharts 水球图又支持非常高度定制的效果。下面我们具体说明如何定制化你的水球图。

第四步:定制化水球图

水球图支持非常高度定制化的需求,包括颜色(color)、大小(radius)、波的振幅(amplitude)、波长(waveLength)、相位(phase)、周期(period)、移动方向(direction)、形状(shape)、动画(waveAnimation)等等,完整的配置项参数参见水球图 API。文档有针对每个配置项的详细说明,这里我们来介绍一些重要的参数。

形状与动画

除了默认的圆形('circle')水球图,还可以将 shape 设置为 ECharts Symbol 的其他类型:'rect''roundRect''triangle''diamond''pin''arrow'。甚至,使用 'path://...' 的形式,为其指定一个 SVG 路径,得到非常酷炫的效果:

通过将 direction 设为 'left''right',指定波浪的移动方向,或者设为 'none' 表示静止。

上面的例子完整的配置项代码为:

// run at: http://gallery.echartsjs.com/editor.html?c=xry0tUfcBe
var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        radius: '40%',
        shape: 'diamond',
        center: ['25%', '25%']
    }, {
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        direction: 'left',
        radius: '40%',
        shape: 'rect',
        center: ['75%', '25%']
    }, {
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        radius: '40%',
        shape: 'roundRect',
        center: ['25%', '75%'],
        backgroundStyle: {
            borderColor: '#156ACF',
            borderWidth: 1,
            shadowColor: 'rgba(0, 0, 0, 0.4)',
            shadowBlur: 20
        },
        outline: {
            show: false
        },
        waveAnimation: false, // 禁止左右波动
    }, {
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        radius: '50%',
        shape: 'pin',
        center: ['75%', '75%'],
        amplitude: 0,
        waveAnimation: false,
        outline: {
            show: false
        },
        backgroundStyle: {
            shadowColor: 'rgba(0, 0, 0, 0.4)',
            shadowBlur: 20
        }
    }]
};

单个波的配置

除了对所有水波做的设置之外,每个水波可以进行单独的配置。和 ECharts 的其他配置项一样,对单个数据的配置项将覆盖整个系列的配置项。

在这个例子中,我们将第二条水波设为红色,并且改变其移动方向。

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, {
            value: 0.5,
            direction: 'left',
            itemStyle: {
                normal: {
                    color: 'red'
                }
            }
        }, 0.4, 0.3]
    }]
};

可以发现,原先 data 中的一项是一个数字,而在需要做特殊定制的数据中,我们将其设置为一个对象,value 值是原先的数字,其他配置项将覆盖系列配置项的值。

文字显示

水球图中间的文字有个酷炫的效果,在水波和背景前的文字颜色是不同的,可以通过 insideColor 设置水波处的文字颜色,color 设置背景处的文字颜色。

var option = {
    series: [{
        type: 'liquidFill',
        radius: '80%',
        data: [0.5, 0.45, 0.4, 0.3],
        label: {
            normal: {
                textStyle: {
                    color: 'red',
                    insideColor: 'yellow',
                    fontSize: 50
                }
            }
        }
    }]
};

图表中间默认显示百分比数据,如果你需要将其设置为其他文字内容,可以通过 formatter 指定,这与 ECharts 的其他格式化函数也是相同的。

formatter 可以是一个字符串,其中 '{a}''{b}''{c}' 会被分别替换成系列名称、数据名称、数据值。

如:

var option = {
    series: [{
        type: 'liquidFill',
        name: 'Liquid Fill',
        data: [{
            name: 'First Data',
            value: 0.6
        }, 0.5, 0.4, 0.3],
        label: {
            normal: {
                formatter: '{a}\n{b}\nValue: {c}',
                textStyle: {
                    fontSize: 28
                }
            }
        }
    }]
};

此外,formatter 也可以是一个函数,以下代码能得到和上面字符串形式同样的效果。

formatter: function(param) {
    return param.seriesName + '\n'
        + param.name + '\n'
        + 'Value:' + param.value;
}

小结

以上,我们介绍了 ECharts 水球图的一些基本用法,希望能够给大家启发,创作出更多波涛汹涌的作品。

更完整的配置项请参考 GitHub 上详细的文档,或者到 ECharts Gallery 上查看其它水球图作品