0

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

 11 months ago
source link: https://efe.baidu.com/blog/echarts-3-5-0/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

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

banner.png

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

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

线性回归的示例:

对数回归的示例:

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

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

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

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

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

日历坐标系

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

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

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

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

水平和垂直放置日历

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

尺寸的自适应

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

中西方日历习惯的支持

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

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

其他更丰富的效果

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

例如,制作农历:

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

坐标轴指示器

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

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

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

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

这是另一个例子:

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

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


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK