共计 5710 个字符，预计需要花费 15 分钟才能阅读完成。
在 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 是如何通过进一步优化图表性能，以及引入多状态治理，让用户通过图表交互更好地读懂数据的故事。