为了提供敏捷、高效的数据分析模型，促进开发者（开发者、数据分析师、数据科学家等）体验高效的数据处理服务，炎黄数据推出了一站式异构数据分析平台——鸿鹄。 鸿鹄提供了从数据访问、存储查询到底层应用的整体解决方案。 本文将分享如何利用鸿鹄实现数据价值的可视化呈现。
明天的演讲将围绕以下四个部分进行：
1.Echarts基本介绍
2. 配置选项和自定义属性
3. 扩展和自定义类型图表
4.场景展示数据可视化
分享嘉宾｜李洪吉炎黄数据软件开发工程师
编辑｜杨克行韩数智科技
制作社区｜DataFun
01
前言
内容开始之前，先介绍一下炎黄数据的洪湖平台。 它是一站式异构数据分析平台，提供从数据访问、存储查询到底层应用的整体解决方案。 鸿鹄提供开箱即用的数据低级格式化功能，只需点击键盘即可快速生成查询结果并添加到仪表盘中。 鸿湖还提供了折线图、面积图、条形图、柱形图、散点图、地图、饼图、仪表图和词云图等丰富的嵌入式图表。
洪湖一站式异构数据实时分析平台
洪湖典型场景展示
作为鸿鹄可视化部分的基础图表库，首先介绍一下Echarts的基本概念和特点。
02
Echarts基本介绍
1.Echarts的历史
ApacheEcharts官网及Echarts下载截图
根据官网的定义，Echarts是一个基于JavaScript的开源可视化图表库。 其历史可以追溯到2013年，由百度发起。 2018年1月，进入Apache软件孵化器。 在此期间，其发展势头依然良好。 它的促销类型和样品，以及一些使用配置项，在这段时间里已经稳步建立。 2021 年 1 月 26 日，Apache 软件基金会宣布 Echarts 为顶级项目。 当时最新版本发布会的参与人数达到了5000人，用户热度非常高，并且持续走高。 截至目前，GitHub 上的 star 数已超过 4000 人，NPM 的每周下载量已超过 57 万次。
Echarts最新版本是5.4.1。 经过多个大版本迭代，也积累了丰富的经验。 可以看出它的使用越来越广泛，也得到了大家的认可。
2. Echarts的特点
Echarts的特点和优势有很多，主要包括以下几个方面。
Echarts的特点
① 丰富的配置选项和可视化图表类型
Echarts提供的图表类型非常丰富，后面会详细介绍。 常规的折线图、直方图、散点图、饼图、烛台图等。还有用于统计的图表、用于数据可视化的地图、热力图、用于关系数据库的关系图、用于BI的漏斗图。
② 强大的交互组件
交互是从数据中发现信息的重要手段。 Echarts提供了开箱即用的图例、可视化地图、数据区域缩放、工具栏、数据过滤等交互组件，可以对数据进行多维度过滤和详细展示。 不仅是交互组件还有暴风雨响应，比如点击、鼠标联通、拖拽等。Echarts对这种交互动作的支持也比较好。
③ZRenderCanvas和SVG渲染器支持
Echarts底层是依靠通用矢量库ZRender实现的，所以天然对Canvas和SVG渲染器有相对透明的支持。 Canvas更适合绘制更多的图形元素，比如热图，或者地理坐标系和平行坐标系下的大比例线图。 SVG 有其优点，但显存占用可能较高。 解决这个问题对于中国联通来说更为重要。 用户在使用浏览器的外部缩放功能时，不会感到模糊。 一般来说，在软硬件条件或者环境都比较好的场景，数据量不是很大的情况下，可以选择任何一种渲染器，必要的时候可以进行切换。
④对联通设备的支持和跨平台
Echarts针对联通端做了更细致的优化，而且由于支持SVG，所以联通端的内存占用问题得到了一定程度的缓解。
⑤浏览器兼容性
实现对多种浏览器的支持，包括对历史版本的支持，这是现在大家购买图表库的基本要求。 Echarts支持大多数浏览器，如IE、Chrome、Firefox、Safari等。Echarts的另一个优势在于它的文档，包括使用指南、配置项指南等，示例详细全面，有中英文版本。 社区也非常积极地提供反馈和问题修复。 如果遇到问题可以用英语交流，很多问题可以直接在社区找到解决方案。
03
配置选项和自定义属性
对Echarts有了基本的了解后echarts显示角度，我会介绍如何在鸿鹄上应用这个配置以及如何自定义配置项。
1.Echarts配置项
Echarts配置项
Echarts提供了丰富的配置项，使用起来特别灵活方便。 无论是最常见的标题组件、图例组件，还是坐标系组件以及各种图表组件，其配置属性值都比较大，基本可以满足大部分图表开发的需求。
以最常见的图例组件配置为例。 下面的示例生成地形统计数据的直方图。 其中，选项对象包含很多属性，包括数据集的数据源。 这里的数据按年份分为5组，从2012年到2016年。每组包含4种类型的数据，即森林、草原、沙漠和沼泽。 此外，该组件还包括颜色和图例（legend）等其他配置项。 此处图例中显示的值是 false。
图例配置项及显示图例
拿出来简单修改一下，就可以实现这个图例的显示了。 您可以直接将 false 更改为 true，然后图例将显示在直方图的正上方。 其实图例的位置、整体的显示方式等都可以通过在图例组件上找到相应的属性来调整。
2.Echarts设置选项
介绍完option对象，我们来看看它的setOption方法。 setOption 由 echartsInstance 实例使用。 该实例由echarts.init创建。 这里不仅可以修改配置项，其他包括数据在内的所有参数都可以通过setOption来完成。
我们来看一个反例。 右图左侧的直方图内部叠加了一个折线图。 用于生成条形和线条的两组数据都是随机的。 X 轴是时间轴。
Echarts图表setOption方法示例
在右边的代码中，有一个定期调用的函数setInterval，它几乎每2秒更新一次图表。 其中，调用了图表的setOption方法。 纵轴上的间隔约为2秒。 Echarts手动确定并合并新的参数和数据以刷新图表。 如果开启动画，还可以看到数据之间的差异，并用动画来展现数据的变化，就好像随着时间轴向后移动一样。 整个过程有非常好的用户体验。
3. 鸿鹄的图表配置项
了解了Echarts的数据和参数配置项，以及示例的setOption方法后，我将介绍鸿鹄是如何实现配置项的功效的。
在仪表板中，每个图表对应的图形组件被定义为小部件。 第一步进入编辑模式。 点击图表的编辑按钮（小笔），会弹出拖放模式框。 前面是图表类型的可选下拉框，图表类型可以自由设置为柱状图、折线图、散点图或条形图等。中间是类别标签页。 根据上面常用的类别，将一些更具体的配置项放在不同的选项卡中。
鸿鹄的图表配置项
第一个是常规选项卡。 主要是一些常见的标题显示配置，包括标题显示、标题内容、颜色、字体大小、位置等。
第二个是直方图选项卡。 主要是与直方图相关的配置项，包括显示堆叠、条形长度、是否修改显示值、提示类型等。
第三个是 X 轴或 Y 轴选项卡。 对于二维坐标图表类型，可以在这里配置。 可以修改X轴的名称、标签的位置、样式、显示所有刻度、是否打开刻度等。
4. 鸿鹄的自定义配置项
在商业软件中，没有办法把所有的选项都做成UI操作放到界面中。 Echarts针对这个问题的解决方案是在settingOptions的时候将组件对象放到在线IDE上，编译后渲染配置项生效。
洪湖也有类似的做法，添加自定义标签页，使图表多样化和扩展。
如图所示。 自定义选项卡上方是一个输入文本框，或 AceEditor（用 JavaScript 编写的嵌入式代码编辑器）。 AceEditor对用户输入的配置项进行了包装，让用户有更好的编辑和输入体验。
句型检测和自定义标签的手动完成
这样做有几个好处：
首先是支持JSON句子审核。 比如非法值的高亮，如图中的“validKey”。
另一种是手动完成并突出显示配置选项。 Echarts提供了很多关键词。 鸿鹄的方法是将关键词添加到AceEditor的自动补全中，进行手动补全。 当用户输入时，用户可以立即突出显示提示。
三是应用效果即时预览。 用户在界面上自定义的配置可以立即生效，以便检查是否达到预期的效果。
以下面的饼图为例。 这是一个典型的access_log日志文件方法（例如get、post等技术）返回的状态码生成的饼图。 饼图的配置界面中已经预设了显示标签、详细标签、标签位置等标签。 现在如果你想实现更多的配置或者想要更酷的效果，你可以通过自定义配置编辑器自定义图表。
这里我们规划了一段可以生成玫瑰图效果的代码，直接将代码复制到自定义配置编辑器中，点击应用配置按钮，就可以将这个配置应用到图表中，通过Echarts渲染出来，然后生成类似玫瑰图的功效。
自定义编辑器
实时预览图表功效
此外，用户还可以更改一些参数，例如样式、颜色、半径等。 输入过程中可以查看疗效。 最后，将其另存为小部件并将其保存到仪表板中。 这些自定义输入选项也与图表类型对象一起存储。
04
扩展和自定义类型图表
1.洪湖的图表类型
洪湖的图表类型大致可以分为三类：来自Echarts的图表、自定义图表和第三方图表。
①图表来自Echarts
第一类是继承自Echarts的内置图形。 Echarts 自带许多现成的图表类型，包括折线图、面积图、条形图、直方图、饼图、散点图、气泡图、地图等。
折线图
面积图
条形图
直方图
饼形图
散点图
气泡图
地图
气泡图
泡泡图是洪湖另外包装的一种美食地图。 底层使用地图作为坐标系，上层地图坐标系使用scadchart，它使用类似于散点图的方法来显示值。 图中带有数据的点或者圆圈代表该区域有数据，并且该区域的面积越大，数值越高或者频率越高。
②自定义图表
以下是自定义图表的三个反例。 包括单值趋势图、富文本类型图、表格类型图。
1）单值趋势图
单值趋势图主要用于视觉指标的展示，或者说趋势的展示。
单值趋势图
如图，可以看到中间有一个值21，代表一个变化的值。 值的一侧是趋势标记。 下面的迷你图是根据数据变化的折线图。 为了使个体数值趋势图的颜色适应不同的场景，鸿鹄提供了两种着色方式，可以根据数值着色，也可以根据趋势着色。 数值着色相当于设置数值范围。 例如，在示例中，您可以设置小于 20 且大于 100 的值来显示一种颜色，设置小于 100 或大于 20 的值来显示另一种颜色。 趋势着色是根据趋势变化进行着色，作为对趋势的诠释。 例如，蓝色表示向上，红色表示向下，反之亦然。
2）富文本类型图
富文本类型图方便用户管理一些漂亮的文本，或者插入图片、视频等，其底层实现使用QuillJS，它本身就是一个比较强大的富文本编辑器。 鸿鹄把它变成了一个图形组件，产生了外部图形。
富文本类型图
3) 表类型图
第三种图表在数据可视化中也使用得比较频繁——表格。 鸿湖将表格封装为外部表格图形组件，如图。
表格类型图
这些类型的典型自定义图形仍然需要在某些方面进行适配，并尽量与现有的Echarts图形基本类型保持一致。 例如setOption、setData、convertOptionToForm等。此外，还需要实现一些额外的eventHandles，最常见的是键盘点击事件。
以单值趋势图为例，当点击单值元素21时，传输的数据信息包括点击的数组名称、字段值、数组类型等。
形式也类似。 当点击某个单元格时，需要获取点击的单元格，包括数组名对应的值，以及行列信息。 该信息将在执行工作台钻孔或链接时使用。
表风暴信息
③第三方图表
不仅是自定义图表，还有第三方封装的Echarts图表，例如词云图。 洪湖使用echarts-wordcloud。 词云图是对文本出现频率的数据解释。 文本越大，出现的频率越高。
词云
echarts-wordcloudJS库使用起来也比较方便。 您可以指定图表类型，wordcloud。 词云图提供了一些配置项，比如地图的形状，上图是菱形（矩形），还有颜色、文字角度等选项。
2.洪湖扩展的图表类型
除了外接图形之外，鸿湖还支持用户扩展图表类型。 接下来介绍一下鸿鹄通过APP方式定制图表的流程。
首先指定APP应用中可视化图表的描述文件，即viz.toml，位于APP_HOME下。 其内容如下。
使用APP扩展图表
首先是注册一个键值，这里是sample-chart，它代表展开后的图表。 需要注意的是，密钥是唯一的，即同一个密钥不能在同一个APP中重复注册。
name表示图表后显示的名称，即SampleChart。
option_class表示图表文件的位置，是相对路径。
导出表示图表注册的名称。
把它拿出来，添加一个真实的图表类型，雷达图。 首先修改样本的描述文件viz.toml，如右图。
添加雷达图图表
描述文件完成后，打开图表文件。 对于用户自己创建的图表，需要在setData方法中添加图形处理方法。 传入的参数包括数据和尺寸。
自定义图表文件
data是图表对应的数据集，是一个对象字段，每个对象是一行。 维度是对数据集的描述，包括列名、数据类型等信息。 最终绘制时，图表组件会将这些参数传递给Echarts。 疗效如图所示。
扩展雷达图
图表类型为雷达图，图表名称为描述文件中定义的名称。 通过这些方式，可以添加自定义图表。
04
场景展示数据可视化
刚才讨论了图表库和丰富的配置项，接下来我就直观的展示一下。 这部分分为图表布局、图表调整大小、钻取行为和仪表板标记。
1. 图表布局
图表布局
首先介绍一下Echarts的图表容器大小。 在初始化图大小时，通常建议将图传入一个Div节点作为父容器，这样Echarts图的默认大小就是该节点的大小。
另外，Echarts在响应容器大小变化时提供了resize方法，可以改变图表的大小。 例如，如果在主容器上定义了一个高度为400、宽度为页面100%的节点，则希望当浏览器的长度改变时，图表的长度始终为页面的100%变化。 在这些情况下，我们可以在窗口的storm bug中窃听浏览器尺寸变化，然后调用Echarts的resize方法来改变图表的尺寸。
利用窗口风暴bug调用图表的resize方法
值得一提的是，Echarts的resize方法默认是没有参数的，但是可以通过参数传递来设置参数值，比如过渡动画（animation）、持续时间（duration）或者缓动（easing）。
接下来我们看看洪湖的图表布局的具体实现。
洪湖图布局示例
反例是一个react项目，它是用reactgridlayout组件库实现的。 ReactGridLayout类似于网格布局系统，它是响应式的，支持断点布局、拖放和项目缩放。 这里，一条线默认分为24份。
2. 图表调整大小
接下来介绍一下resize方法的具体实现。 右侧的图像创建了一个用于网站流量统计的示例仪表板。 仪表板图表组件使用网格布局进行布局。
洪湖图表仪表盘
当图表组件的尺寸发生变化时，组件会获取最新的图表高度信息和尺寸信息，并会在数据更新时调用resize方法，通过监听页面尺寸是否发生变化来改变图表的规格。 在这个例子中，通过拖放图表来完成调整大小的过程是比较顺利的。
更改图表大小
3. 钻井行为
演习行为
仪表板作为最常用的功能组件，不仅实现了数据的可视化，还满足了用户对数据的交互探索。 对于Echarts来说，用户对图表的操作往往会触发相应的干扰。 开发者可以监听到这种干扰，并通过反弹功能进行处理。 比如跳转到某个地址，或者弹出一个对话框，或者做数据下钻等。
Echarts上的键盘干扰包括click、doubleClick、mouseDown、mouseMove、mouseUp、mouseOver等。所有的键盘事件都会包含一个像EventsParams这样的参数包，它是一个包含当前图形数据信息的对象，如上图所示。 例如，seriesType表示当前图表的类型，例如折线图、条形图或饼图。
以上就是Echarts的风暴处理，接下来介绍一下洪湖常用的演练交互行为。 钻取在数据可视化分析中非常常见。 它的特点是能否逐层下钻到数据，挖掘数据背后的关联。 在鸿鹄上，钻取更像是一个配置工具，当点击仪表板上的数据点、表格行或其他可视元素时，可以触发配置的操作。 例如，将钻取链接配置为默认搜索进行手动辅助查询，并点击图表上的可视化元素获取数组值，然后通过完成查询中的搜索语句打开查询页面来完成查询。
获取EventsParams后，就可以执行点击风暴反弹，即钻取动作。 以下代码演练的动作包括：链接URL、自动辅助查询、自定义查询语句、设置标签。
钻行为代码
4. 仪表板标记
洪湖中的标签类似于程序变量，输入标签由标签名和标签值组成。 如果在仪表板图表的搜索中使用该标签，则可以传递所需的值。 标签名称的句子使用 $...$ 分隔符。 例如，如果查询数组输入标签定义为“field”，数据源定义为“source”，则搜索为 SELECT $field$from $source$。
天鹅身上有几种不同类型的标记。
① 文字类型标记
首先进入仪表盘编辑状态，点击仪表盘标题左侧的“添加输入”操作按钮，弹出“添加输入”对话框。
在仪表板中添加文本类型标记
默认token类型为文本框echarts显示角度，输入token名称“token”，token值为“accessToken”，
然后点击“确定”按钮完成添加输入。 如右图所示。
定义文本类型标签
② 选择器型号标记
第二个是选择器类型。 有两种类型的选择器类型标签。 第一种可以支持预定义选项，即定义一些选项作为选择器的选项值。
预定义选项
另一个支持从查询中提取结果。 如右图所示。 图中的例子中，将返回的distinct2.country值作为主键信息（标记选项）。
从查询中提取
③时间类型标记
时间类型输入可用于控制图表的查询时间范围。 您可以将时间查询范围作为标记，并在需要更改时间的地方使用。 下面介绍时间型标记的操作方式。
首先，展开“输入类型”下拉选项，然后单击“时间”。
定义时间类型标记
接下来，将“标签名称”设置为时间，将“显示标签”设置为输入时间戳，将“默认标签值”设置为选择相对时间和最近（过去）三天。
输入需要绑定的标签
最后，点击“确定”按钮完成添加后，即可得到显示标记为“时间标记”的时间输入，其默认选项值为“最近（过去）三天”。
时间类型 标记功效
④钻头设置标记
第四个是钻头设置标签，在上一个示例中介绍过。
下面显示了一个示例仪表板，以展示标记的工作原理。 首先在仪表板中配置几种不同类型的标签，从上到下分别是文本类型、选择器类型、时间类型、钻取设置类型。
示例文本输入标记
在第一种情况下，过滤是通过配置文本标签来完成的。 两边输入access，可以查看accesslog相关的数据，并显示在右侧。 每当文本标记更新时，相应的查询语句，包括整个图表的数据也会相应更新。
第二个反例是选择器类型标签。 计数器示例中预定义了请求状态选项，分别为 2XX、3XX、4XX、5XX 以及所有请求状态。 每次切换选项时，都会触发左侧关联的图表，重新查询并得到新的结果，最后显示更新后的结果。
选择器输入标记示例
第三个实例是时间类型标签。 您可以以时间查询范围为标记，计数器示例中选择30分钟，通过时间标记值的变化来更新图表信息。
时间类型标签示例
最后一个反例是向下钻取设置标志。 反例中，点击左边的饼图，比如日本，也会触发旁边的联动图做新的查询。
钻孔设置标签样本
关于可视化技术的内容也非常丰富，比如：
① 大数据图表可视化优化；
②仪表板可视化框架；
③ 颜色和自定义主题等等。
欢迎大家一起讨论。 有兴趣的同学可以扫描下方二维码加入我们的【技术交流群】，免费使用我们的大数据分析平台，随时交流更多可视化技术。
