ECharts又搞大动作!3.5 版本提供更多数据可视化图表

在 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 来联动不同的坐标轴指示器。他关联和高亮了处于不同坐标系中的相互对应的点。

注:点击阅读原文查看超链。

END.

来源: 36大数据

原文发布于微信公众号 - PPV课数据科学社区(ppvke123)

原文发表时间:2017-03-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CSDN技术头条

利用GPU和Caffe训练神经网络

本文为利用GPU和Caffe训练神经网络的实战教程,介绍了根据Kaggle的“奥托集团产品分类挑战赛”的数据进行训练一种多层前馈网络模型的方法,如何将模型应用于...

223100
来自专栏落影的专栏

OpenGL ES实践教程(四)VR全景视频播放

教程 OpenGL ES实践教程1-Demo01-AVPlayer OpenGL ES实践教程2-Demo02-摄像头采集数据和渲染 OpenGL ES实践...

47240
来自专栏PPV课数据科学社区

【学习】SPSS探索分析实践操作

SPSS为我们提供了探索分析,所谓探索分析之所以是探索,是因为有时候我们对于变量的分布特点不是很清楚,探索的目的在于帮助我们完成以下的工作:识别...

39380
来自专栏数说工作室

【分类战车SVM】附录:用Python做SVM模型

本集目录为: 一、简化版SMO算法 二、LIBSVM包 1.简介 2.数据格式 3.安装 4.简单的使用方法 三、题外话 上一集介绍了SMO的算...

301100
来自专栏大数据挖掘DT机器学习

文本自动分类案例(源码)

使用机器学习方法 做文档的自动分类 套路: 1.根据每个文件 生成该文件的一个特征 2.根据特征 选择 分类器 进行文本分类 3.(可选)根据 2 步结果,调...

488120
来自专栏大数据挖掘DT机器学习

用Python开始机器学习:文本特征抽取与向量化

假设我们刚看完诺兰的大片《星际穿越》,设想如何让机器来自动分析各位观众对电影的评价到底是“赞”(positive)还是“踩”(negative)呢? 这类问题就...

873140
来自专栏wOw的Android小站

[MachineLearning][转载]LSTM

转载自http://blog.csdn.net/jerr__y/article/details/58598296

11620
来自专栏人工智能头条

利用GPU和Caffe训练神经网络

16750
来自专栏北京马哥教育

Python数据挖掘:Kmeans聚类数据分析及Anaconda介绍

糖豆贴心提醒,本文阅读时间8分钟 今天我们来讲一个关于Kmeans聚类的数据分析案例,通过这个案例让大家简单了解大数据分析的基本流程,以及使用Python实现...

657130
来自专栏互联网杂技

A*算法详解

概述 虽然掌握了 A* 算法的人认为它容易,但是对于初学者来说, A* 算法还是很复杂的。 搜索区域(The Search Area) 我们假设某人要从 A 点...

46790

扫码关注云+社区

领取腾讯云代金券