Apache ECharts 5 系列教程（2）视觉设计

本文主要是介绍Apache ECharts 5 系列教程（2）视觉设计，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在 Apache ECharts 5 系列教程（1）中，我们介绍了动态叙事中应用的动画能力。

Apache ECharts 5 还根据可视化理论在细节的设计上做了全面优化，将在本文中具体介绍。

从默认的样式、动画设计，到针对各种图表类型以及组件针对性的优化，ECharts 5 通过在视觉上调整增强更有价值的数据内容，节制弱化辅助性和装饰性的元素，提高了信息墨水比，让读者更专注在重要的数据信息上。在视觉效果这一模块，我们首先会看到 ECharts 5 在默认设计上的整体优化，我们将会为大家讲述这些调整背后的思考和其中一些典型的图表类型和组件上的优化调整，以及我们如何做到让图表默认设计优雅，又能提供足够的灵活度让不同开发者根据项目需求进行定制。

视觉设计

此次 Apache ECharts 5，我们对产品视觉进行了全新的升级设计
从提供全新的配色方案，图表文本的调整，优化图表最佳的默认样式，以及图表组件的优化多个方向着手，在视觉上帮助用户创造出更符合可视化规范的、更优雅的、更友好的图表。

默认设计

此次 Apache ECharts 5，我们对产品视觉进行了全新的升级设计。从提供全新的配色方案，图表文本的调整，优化图表最佳的默认样式，以及图表组件的优化多个方向着手，在视觉上帮助用户创造出更符合可视化规范的、更优雅的、更友好的图表。

配色方案

ECharts 5 提供了全新的配色方案。对比原来的配色方案，我们在颜色选择和搭配上都更加成熟和理性。

在这套定性的配色方案里，我们将原本系列色第一个颜色的红色更改为蓝色，将蓝色作为默认单系列的数据色，这个改变一是因为红色在情绪表达上并不太冷静冷静，我们希望可以尽量客观冷静的呈现数据。二是因为，蓝色更加通用，可以兼容大多可视化图表的应用场景。

我们对颜色的顺序也做了反复的斟酌，在保证足够的区分度可以清晰识别数据的基础上，我们选择了相邻色来获取更和谐的搭配效果，并且在色彩的选择上覆盖了整个色环，保证颜色的多样性。同时避免了具有特殊含义的颜色例如红色和绿色的相邻，避免数据的呈现从颜色上带有误导。我们还对相邻颜色的明度和色值进行了反复测试，尽力获得更好的兼容效果。

ECHARTS 5 还贴心地提供了 light 和 dark 两种默认的配色方案，满足用户不同的可视化图表的使用场景。

文本

经过反复的调整，在 ECharts 5 中我们确定了图表文本的规范，规定了不同文本的字体、颜色、尺寸。例如我们图表主标题设为最高层级结构的文本，因此使用了粗体、较深的颜色、和最大的字号，其次是数据文本，除了使用了粗体和较深的颜色之外，稍微降低了字号，保证可以在 tooltip 的区域内完整显示。

通过对图表中不同层级的文本做区分，凸显关键信息，更便于我们的查看图表数据。

此次 ECharts 5 我们对图表的默认设计做了很多细致贴心的调整，来提供给大家最佳的默认的图表样式。我们主要从图表动画、图表样式优化两方面对图表默认的状态进行提升。

常用图表优化

在此，我们重点看对折、柱、饼三类最基础的图表做了哪些优化升级。

首先看一下针对折线图的优化，左侧是原本默认的折线图的样式，其实通过中间的几条数据分割线，我们就已经可以定位折线图的每个数据值，
因此我们做的比较直观的一个改变就是去掉了直角坐标系最左侧数据轴Y轴的默认显示，希望通过减少不必要的图形元素，来达到更清晰地传递信息的目的。

ECharts 5 的柱状图动画效果

ECharts 4 的柱状图动画效果

这是我们对柱状图优化前后的示例对比，同样我们去掉了直角坐标系最左侧数据轴Y轴的默认显示，另一个比较大又很细腻的调整是对：默认的柱状图柱子的宽度以及柱与柱之间的间距的调整。

基于一些可视化理论研究和大量实际的应用场景，在 ECharts 5 中我们调整了默认的柱状图样式，将柱与柱之间的间距设定为柱宽的1/2，用最合理的展示布局来呈现树状图的数据。

标签优化

标签，用来作为解释数据的辅助图形，一直是图表中非常重要的一部分，优雅的标签可以帮助用户更好的读懂图表。

在数据比较多的场景中，如果大家设置示显示全部标签，这些标签就很可能会出现互相重叠或者超出画布的情况，导致标签几乎没有可读性。下面的这些截图都是大家在 issue 中提到的折线图、柱状图、饼图标签显示的 bad case。

为了解决这些标签的显示问题。我们在 5.0 中对标签做了这四点优化，从而可以尽可能去更优雅得显示标签。

首先是更灵活的标签位置。开发者可以在默认位置基础上去调整标签的位置，而不再局限于上下左右中间这样的固定位置、其次是标签的自动布局，ECharts 会在前面指定位置的基础上，再去智能的布局标签，以防止出现标签的重叠。

对画布中放不下的标签，ECharts 会按照优先级排序，对优先级低的标签做自动隐藏。

最后我们为所有系列都添加了自动计算的引导线功能，可以关联和图形距离较远的标签。

接下来我们通过一个简单的气泡图例子，来看看在 ECharts 5 中可以怎么通过这几点去优化左边这个气泡图的标签，把标签统一在右边对齐显示并加上辅助的引导线。

现在这个气泡图右上角这些标签都重叠在一起，不仅影响阅读，而且还会影响正常的交互。

首先我们通过新提供的 labelLayout 配置将标签都移到右边对齐。
在 labelLayout 中，我们提供了丰富的标签参数，可以在回调函数中根据标签大小，对应图形大小，去灵活调整标签定位和尺寸。这里我们可以简单得统一设置 x 为离最右侧边缘 100 像素实现靠右对齐。

然后我们为标签加上一根引导线指向气泡，从而可以将气泡和标签对应起来
标签引导线原先只有饼图，漏斗图等少数图表才有，我们在 ECharts 5 中为所有有标签的图表都加上了引导线的支持，可以自动从标签计算出一条引导线引向图形，而我们需要配置的仅仅是否显示和引导线的颜色等样式。

在把标签放到右侧后，还是存在部分标签会重叠的情况，所以我们还提供了一些标签重叠时候自动布局的配置，这里我们配置了 moveOverlap 这个为 shiftY，让标签可以在 Y 方向去做防重叠的布局。配合新增的鼠标移到标签上后联动的聚焦高亮功能，我们可以很清楚的去聚焦观察每个数据。

当然这个例子仅仅只是展示了新的布局标签的一种可能性，我们希望通过这个灵活的接口，可以让开发者按照自己想要的方式去排版标签，达到最好的效果

如果画布中实在放不下标签，我们在 EChart 5 中也对所有系列都提供了自动隐藏相对次要标签的功能，只需要配置 hideOverlap 这个配置项为 true 就可以开启。

比如在这个关系图中在开启了标签自动隐藏的功能后，可以在不同的缩放层级下隐藏掉小节点的标签，只显示主要节点的标签，以达到更清晰的显示效果。

在标签超出指定宽度的时候，我们现在也可以通过 overflow: truncate 或者 overflow:: break 分别配置对超出部分是进行裁断还是自动换行。

刚提到的所有这些新增标签的特性都是针对全系列进行通用的优化的，并且同时支持普通文本和富文本模式，SVG 渲染模式以及 Canvas 渲染模式。满足大家在各个平台的需要

最后，在 ECharts 4 中我们的 SVG 渲染模式一直不支持富文本，这使得我们的社区中有很多富有创造力的 富文本例子都无法在 SVG 渲染模式下使用。所以这次我们对文本渲染模块进行了重构。做到对 SVG 和 Canvas 都是完全一样的渲染效果。

扇形圆角设计

之所以考虑加入这个特性，是由于饼图圆角也是社区里一个呼声比较强烈的特性，从 2016 年开始已经有许多开发者先后提出来了。

为什么饼图也需要圆角呢？除了视觉上更美观外，我们认为圆角还可以令饼图更具柔和感、能够赋予饼图更多的创造力。

首先，相比尖角给人尖锐的感觉，圆角显得更加柔和、舒适，给人一种亲和感，视觉效果更佳。其次，圆角也可以让一般的饼图更具丰富的表现形式，搭配圆角和其他效果，我们可以利用这一特性做出更多种不同形式的图表。同时，我们可以设计出更艺术的图形样式，更加贴合流行的设计原则。

透过圆角半径，可以让我们的图表更加耐看，其实使用起来也非常简单。
在 ECharts 5 中，我们为饼图的 itemStyle 添加了一个新的配置项 borderRadius，用于指定单个或多个扇形区块的圆角程度，支持设置固定数值或者相对于扇形区块的半径的百分比值。

圆角特性赋予了饼状图更多的可创造性。

通过配置不同大小的圆角半径，再加上你独特的想象力和创造力，相信你可以制作出比这些示例更棒的图表。
其实不止饼图，我们还为矩形树图 treemap、旭日图 sunburst 添加了圆角支持，大家同样可以利用圆角特性创作出更漂亮的矩形树图和旭日图。

仪表盘升级

除了对饼图添加圆角这种让图表获得更优美的展示效果的贴心功能之外，针对一些图表我们也进行了大刀阔斧的全面升级，例如仪表盘。

左边是之前仪表盘的默认样式，右边是 ECharts 5 仪表盘的默认样式；
可以看到我们对仪表盘的主要元素的样式都进行了调整。此次对仪表盘升级的核心目的就是为了提供更好的仪表盘的默认样式，并且可以实现非常自由的配置。

相较于 ECharts 5 之前，指针的配置更加灵活。我们可以使用 icon 配置项，灵活调整指针样式，除了使用默认的指针，开发者还可以通过图片，矢量路径来自由定制指针样式；以及使用 offsetCenter 配置项，灵活调整指针位置。

在已有指针的基础上，我们还新增了一个固定点的配置项，可以很方便的配置出 如示例所示的效果。跟指针一样，这个固定点也可以配置不同的图形，颜色，位置偏移。

Echarts 5 仪表盘拥有了一种新的数据指示方式——进度条 progress，我们提供重叠和非重叠两种形式，开发者可以根据实际场景，灵活选择。

这里我们提供了一些简单的示例，​开发者可以使用提供的配置项，进行灵活配置。​

相信在新特性的加持下，仪表盘会成为大家挥洒创意的又一个利器，期待大家更多优秀的作品。

数据区域缩放组件优化

ECharts 5 的图表组件主要是辅助我们和图表进行联动、取值、切换、实现不同取值的自由查看。ECharts 5 中，我们针对诸多图表组件，也进行了配套的优化设计，不仅样式上更加好看，交互方式更友好，还有新增加一些很实用的功能。

ECharts 5 的 dataZoom 让我们可以更灵活的去操控取值范围。我们依旧可以分别拖动两端的手柄，但我们不再局限于此，ECHART 5 的 dataZoom 里，我们可以直接移到 dataZoom 上然后刷选即可完成一个取值。这就把原本需要鼠标精准的移到左手柄、拖动左手柄、再移到右手柄、拖动右手柄这4步的操作，精简为2步。而且这个操作和 ECharts 已有的数据区域缩放的交互一样，所以对这个新功能的学习成本很低。

时间轴标签优化

这是一个默认的 ECharts 4 的时间轴，这里的每个时间标签都包含了年份、月份、日期三个信息，这似乎没什么问题。但是如果我们进一步思考这对于用户的理解而言是一种负担。并不是我们提供越多越精准的数据就是一种越合适，可视化就是需要我们设计图表的人去思考如何通过合理的信息隐藏，达到让用户更快速理解信息的目的。

其实相比「开始于2010年1月21日」，结束于「2012年6月1日」这样的信息，在这个例子中，我们可能更关注粗粒度的时间维度，像这样跨年的图表，我们往往只关心一年的开始在什么位置，而并不在意 1 月 21、7 月 30、2 月 5号这样的日子。

所以在 ECharts 5 中，默认会根据不同时间粒度显示不同的标签，并且默认对最粗粒度的时间标签做了加粗处理，使得它的视觉印象更为显著。在这个例子中，我们一眼看过去可以很清楚地了解一年开始的位置，而不需要在这些位置上也显示月份日期信息作为干扰。

此外，分割点都是均匀分布的，开发者无法指定分割点。这样会导致得到的分割点往往不是很具有代表性，比如这个例子中的日期分别是 21 号、30 号、5 号，乍看之下没什么特别的含义，实际上只是因为均匀分割引起的。

而在 ECharts 5 中，分割点不再是均匀分布的，而是倾向于显示更有意义的标签。比如在这个例子中，最大粒度的时间范围是年份，于是我们优先显示年份标签，然后发现空间还能显示每 3 个月的月份标签，于是显示了 4 月 7 月 10 月的标签。对于不同的数据来说，默认的坐标轴标签会根据不同的情况智能地生成分割点和标签内容。

在 ECharts 4 中标签也是支持 formatter 的，但是一方面由于分割点的位置是无法调整的，另一方面 formatter 本身的灵活度也有限，导致开发者对于坐标轴的整体控制能力是比较有限的。很多情况下，开发者为了做出某种特定的效果，不得不使用类目轴去模拟，但是这就让时间轴失去了它本来该有的价值。

而如果开发者不想使用默认的标签内容，也可以用 formatter 定制不同粒度的标签。

具体来说，开发者可以为诸如年份、月份这样不同的粒度指定不同的 formatter，并且在富文本语法的帮助下，做出非常灵活多变的效果。

Tooltip 优化

ECharts 5 中，对 tooltip 做了全新的设计，对比 4 中的样式，ECharts 5 突出了数据主体，数据名和数据值样式有区别，让用户能抓住视觉重点。

容器加了阴影，增加了区域了层级感。同时在单系列中增加了箭头指引，更加有引导性。

ECharts 4 中多系列的数据排列是以系列声明顺序为基准，导致在部分场景值阅读不顺。社区中建议可以为多系列 Tooltip 展示可以进行排序。我们听取了来自社区的建议，增加了一个排序配置项，提供四中排序方式：系列升降序，数据值升降序。

针对 Tooltip 样式上的重新设计，我们的一个核心目的就是希望：数据直观，主次分明的显示信息，重点数据突出，抓住数据可视化视觉重点。这是单系列用新版 Tooltip 在各种图形中的展现形式，可以看出边框颜色和箭头带来的数据效果。

其他

通过在视觉设计方面的调整，我们希望能够让读者更关注图表中重要的信息，而接下来我们要介绍的多状态设计则更进一步地让读者参与交互，交互的丰富性和流畅性使得用户更深刻理解数据之间的关联。

在下一篇文章中，我们将介绍 Apache ECharts 5 是如何通过进一步优化图表性能，以及引入多状态管理，让用户通过图表交互更好地读懂数据的故事。

这篇关于Apache ECharts 5 系列教程（2）视觉设计的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！