HarmonyOS 图表绘制页面：从折线趋势到柱状分布的交互拆解

开场：一个可以直接看懂的图表页面

很多图表页面一打开就把坐标轴、图例、筛选条件、数据请求状态和各种统计卡片全部堆在屏幕上，用户还没有看清标题，就已经被大量信息分散了注意力。这个页面采用了更克制的方式：顶部只有一个蓝色标题栏，下面用三个按钮切换图表类型，中间的白色卡片负责承载当前图表，卡片下面给出数据更新次数和一段说明，最后放置一个刷新按钮。整个页面没有复杂的导航，也没有输入框，用户进入后可以立即看到一组近七日示例数据，并通过按钮观察三种图表表现之间的差异。

这个设计的重点不在于展示一套完整的数据分析系统，而在于把“选择图表类型—观察展示内容—刷新示例数据—确认页面反馈”这条路径做得清楚。页面中的数据是固定的演示数据，图表也是由页面自身根据这些数字计算出高度后绘制出来的视觉效果。它没有连接远端统计服务，也没有从数据库读取访问记录，因此阅读页面时应该把重点放在状态切换、数据呈现和视觉反馈上，而不要把它误解成一个已经接入真实业务数据的报表产品。

一、打开页面后先看什么

首次进入时，顶部显示“图表绘制”，标题区域使用饱和蓝色铺满横向空间，白色文字和较大的字号让页面目的非常明确。标题下方是三个等宽按钮，分别代表折线图、柱状图和饼图。折线图按钮默认处于选中状态，蓝色背景配白色文字；另外两个按钮使用浅色背景和深灰色文字，属于未选中状态。按钮的排列顺序与后续内容的切换顺序保持一致，用户不需要额外学习图标含义，直接阅读文字即可。

页面主背景是很浅的灰色，图表内容放在白色圆角卡片中。灰色背景和白色卡片的对比把注意力集中到了数据区域，卡片内部留出了比较充足的边距，数据文字、图形和标签不会紧贴边缘。卡片上方有一个随图表类型变化的标题：默认状态显示“近 7 日访问趋势”，切换到柱状图后显示“近 7 日数据分布”，切换到饼图后显示“访问来源占比”。这三个标题不是装饰，它们会帮助用户理解同一组页面数据在不同展示方式下承担的不同阅读任务。

图表卡片下方的浅蓝色提示条显示“数据已更新 0 次”，后面跟着一句说明，明确这些内容是用于展示原生绘制数据切换效果的示例图表。这个提示对页面的定位很重要：它告诉使用者，刷新按钮会改变演示数据，而不是向服务器提交查询。最底部的“刷新图表数据”按钮使用和标题栏相同的蓝色，按钮高度较大、圆角明显，便于在手机屏幕上点击。

二、三个按钮实际上切换了三种阅读方式

折线图、柱状图和饼图并不是三张完全独立的页面，它们共享同一个图表卡片和同一组数据来源。用户点击顶部某个按钮后，页面会记录当前选择，并根据这个选择重新决定卡片标题、图形区域和按钮颜色。因为三个按钮的宽度相同，所以切换时页面不会发生整体横向跳动，变化只集中在选中颜色和卡片内容上。

折线图按钮对应的是“近 7 日访问趋势”。在这个模式中，页面用七个竖直数据单元表达一周内不同日期的数值。每个数据单元包含顶部的数字、中间的蓝色竖条以及底部的“周 1”到“周 7”标签。虽然视觉上它更接近一组竖向柱线，但它承担的是趋势阅读：用户可以从左到右比较七个数字，观察高点和低点出现在哪些日期。页面没有额外绘制折线连接点，因此这里的“折线图”更准确地说是一个以趋势为主题的简化数据绘制状态。

柱状图按钮对应的是“近 7 日数据分布”。切换后七个数据单元仍然存在，日期标签和数字也保留，但每个竖条的高度计算方式改变，画面强调的是各个数据项之间的相对分布。折线图状态使用一种高度比例，柱状图状态使用另一种高度比例，因此同一个数值在两个模式下的图形高度并不相同。这个差异可以让使用者直观看到：图表类型状态不仅改变文字，还会参与图形尺寸计算。

饼图按钮对应的是“访问来源占比”。进入这个状态后，页面不再显示七个竖条，而是在卡片内部展示三个带颜色的来源标签：“移动端 48%”“平板 28%”“桌面 24%”。三个标签分别使用蓝色、紫色和绿色文字，外面包裹浅色圆角背景。当前页面实际呈现的是来源占比标签行，并没有绘制真正的圆形饼图，也没有使用扇区角度去画圆盘。因此文章和页面都应该把它理解成饼图主题下的占比摘要展示，不能把这三个标签描述成已经完成的环形图或可交互饼图。

三、折线趋势状态如何阅读

默认状态下，图表卡片标题是“近 7 日访问趋势”。七个数据单元沿水平方向排列，容器高度固定并且底部对齐，竖条从底部向上伸展。这样处理的好处是所有柱线的底端处在同一条基准线上，即使数值不同，用户也能快速比较它们的高度。每个竖条宽度固定，条形之间使用一致的间距，左右排列不会因为数字位数不同而改变整体节奏。

初始数值依次为 48、72、57、86、64、91、53。第六个数据单元数值为 91，是这一组数据中最高的一个；第一个数据单元数值为 48，相对较低。页面先显示数字，再显示图形，再显示周次标签，这个顺序让用户即使不依赖柱线高度，也能从文字中获得准确数值。数字使用较小的灰色文字，不会抢过图形的视觉重点；周次标签同样采用灰色，承担定位作用。

竖条颜色采用两种蓝色交替显示，偶数位置使用较深的蓝色，奇数位置使用较浅的蓝色。交替颜色并不表示数据状态好坏，也没有额外的业务含义，它主要是为了让相邻数据单元更容易区分。由于七个条形均为圆角矩形，底部对齐后会呈现出清楚的节奏感。页面没有显示纵坐标刻度、网格线和单位说明，所以它更适合观察一组示例数据的相对差异，不适合作为精确读数的专业统计图。

点击柱状图按钮后，七个单元仍然沿用同样的日期标签和数字，但图形高度会依据另一种比例计算。这里可以观察到一个很有价值的界面规律：数据文本和图形尺寸属于两个相互关联但不完全相同的展示层。文字负责传达原始数字，图形负责形成视觉对比。即使图形缩放比例变化，数字仍然保持不变，用户不会因为显示尺寸改变而误认为数据本身发生了变化。

四、柱状分布状态如何体现差异

柱状图状态的标题是“近 7 日数据分布”。它继续使用七个周次单元，但页面将阅读重点从“连续几天的走势”转向“多个数据项之间的分布”。这并不意味着页面引入了新的数据集合，实际仍然是同一组七个数字。变化发生在图表模式选择、卡片标题和竖条高度比例上，因此用户可以把它当成同一数据的另一种视觉解释。

在手机小屏幕上，七个单元横向排列时必须控制宽度和间距，否则最后一个数据项可能被挤出可视区域。页面为每个条形固定宽度，并给横向容器设置统一的间距，同时让图表区域占满卡片宽度。数字字号较小，也是为了让七个单元能够在一行内完整展开。这样的取舍说明这个页面更重视一屏内展示完整七项数据，而不是让单个数字变得非常醒目。

如果用户先点击柱状图，再点击刷新按钮，会同时看到两类变化。首先，底部的更新次数加一；其次，七个竖条和上方数字会替换成刷新后的数据。刷新后的数字是 64、42、81、56、88、61、75，其中第五个数据项较高，第二个数据项较低。页面没有显示“请求中”“加载失败”或“数据来源”等网络状态，刷新操作在本地回调中立即完成，所以看到的是同步的演示反馈。

刷新后的新数据不仅影响柱线高度，也会影响数字文本。由于图表卡片依赖这组数据，状态发生变化后，七个数据单元会按照新数组重新生成。当前选择的图表类型不会因为刷新而回到折线图，用户如果处于柱状图状态，刷新后仍然停留在柱状图；如果处于饼图状态，刷新后来源占比标签仍然保持原来的三项文字。这表明“当前图表类型”和“刷新次数/数据”是两条相对独立的状态路径。

五、饼图主题实际展示了什么

点击“饼图”按钮后，卡片标题变为“访问来源占比”。七个周次数据单元被替换为一行三个标签，标签内容分别是移动端 48%、平板 28%和桌面 24%。三个百分比相加为 100%，因此用户可以把它理解为访问来源的完整分布摘要。标签使用不同颜色区分来源，浅色背景和圆角让每一项像一个独立的小卡片，三个标签之间留有间距，避免文字粘连。

这个状态最容易被误读。页面名称使用了“饼图”，但实际内容并不是圆形扇区，而是占比标签行。它没有绘制圆盘，也没有显示扇区起止角度，没有点击某个来源后突出显示的行为，更没有图例与图形之间的联动。因此阅读时应该以可见内容为准：这是一个“饼图主题的来源占比摘要”。这种写法既能准确反映当前页面，也能避免把展示占比文字夸大成完整的图表组件。

刷新按钮在饼图状态下仍然可点击，数据更新次数也会继续增加，但来源标签本身仍然显示移动端、平板和桌面三项固定比例。原因是页面刷新动作只替换七项趋势数据，没有为来源比例准备第二组数据。也就是说，刷新对折线图和柱状图的视觉影响比较明显，对饼图主题主要体现为更新次数的变化。用户可以通过这个现象看出不同展示状态对同一个刷新操作的响应范围并不完全相同。

六、刷新操作的反馈闭环

页面底部的刷新按钮承担了唯一的数据变更入口。未点击时，提示条中的更新次数为 0。第一次点击后，数字变为 1；连续点击第二次、第三次，数字继续累加。这个计数并不代表网络请求次数，也不代表真正从服务器取得了多少批数据，它只是记录刷新按钮被点击了多少次。提示文字将“数据已更新”和“示例图表用于展示原生绘制数据的切换效果”放在一起，已经对这个行为作出清楚限定。

刷新动作会将七项趋势数据替换成一组新的固定数字。第一次刷新之后，再次刷新仍然使用同一组新数字，不会每次随机生成，也不会随时间变化。用户可以反复点击按钮确认计数递增，同时观察图形在第一次刷新时发生变化、后续刷新时保持同样数值的特点。这种可重复的反馈对理解页面很有帮助，因为每一次操作的结果稳定，便于对照前后状态。

如果当前处于折线图或柱状图状态，刷新后数字和竖条都会变化；如果当前处于饼图状态，三个来源标签保持不变，而更新计数仍会增加。切回折线图或柱状图后，可以看到刷新后的七个数字仍然被保留。由此可以确认，刷新不会只修改当前屏幕上正在显示的局部内容，而是更新页面共享的趋势数据，只是不同图表模式选择了不同的呈现方式。

刷新按钮使用较大的触控高度和明显的蓝色，和顶部选中按钮、标题栏保持统一。用户不需要精准点击一小块文字，点击整块按钮都可以触发操作。按钮圆角与卡片圆角相互呼应，页面的视觉语言比较一致。按钮点击后没有弹出对话框，也没有额外 Toast 文案，变化主要通过提示条的次数和图表内容完成，这使交互链路保持简短。

七、页面状态之间的关系

这个页面可以用两个状态维度来理解。第一个维度是图表类型，决定顶部哪一个按钮被选中、卡片标题显示什么，以及卡片内部采用七个竖条还是三个占比标签。第二个维度是刷新状态，记录操作次数并保存刷新后的趋势数据。两种状态共同决定当前画面，但职责不同：切换图表类型不会改变刷新次数，刷新数据也不会把当前图表类型改回默认值。

假设页面刚打开，默认进入折线图，更新次数是 0，趋势数据是第一组七个数字。用户先切换到柱状图，此时顶部选中颜色改变，卡片标题改变，竖条高度依据柱状图比例呈现，更新次数仍然是 0。用户再点击刷新按钮，次数变成 1，数字和竖条替换，仍然保持柱状图状态。接着切换到饼图，七个竖条消失，三项来源标签出现，更新次数保持 1。这个操作顺序能够清楚地说明页面是如何把两个状态维度组合在一起的。

状态驱动的优点是每个可见结果都能从当前状态推导出来。按钮是否选中由当前类型决定，标题由当前类型决定，图表内容由当前类型和趋势数据共同决定，提示条中的次数由刷新状态决定。页面没有让用户手动拖动图形，也没有在多个地方重复维护同一个显示结果，因此切换过程中不容易出现按钮已经变色但内容没有更新的情况。

八、布局为什么采用上下卡片结构

根布局是从上到下的单列结构。顶部标题栏固定在页面最上方，内容区域占据剩余空间，内容内部再按照按钮行、图表卡片、提示条、刷新按钮依次排列。这样的顺序符合用户的操作习惯：先知道页面主题，再选择显示方式，然后观察结果，最后执行数据更新。

标题栏使用整行宽度和较大的上下内边距，形成明确的视觉起点。按钮行将三个操作入口放在同一水平线上，用户不用滚动就可以在三种模式之间往返。图表卡片设置白色背景、圆角和内部边距，图形区域不会直接贴在灰色背景上。提示条使用浅蓝色背景，既与主蓝色形成关联，又比按钮弱一些，不会抢夺图表的注意力。底部刷新按钮则再次使用主蓝色，形成页面最明确的行动入口。

图表卡片的内部布局也有清晰的层次。标题文字位于卡片上方，随后是图形或来源标签。七个数据单元在水平行中均匀分布，每个单元内部按数字、竖条、周次从上到下排列。图形行设置了固定高度，并让内容底部对齐，因此无论竖条长短如何变化，底边都保持一致。饼图主题则改用来源标签的横向排列，让内容高度与文字数量相匹配。

页面使用了多组圆角：图表卡片的圆角较大，提示条和来源标签的圆角较小，按钮也有自己的圆角尺寸。不同层级使用不同圆角半径，能让用户分辨“主要容器”“辅助提示”和“可操作控件”。颜色也遵循同样的层级关系：蓝色用于重要操作和选中状态，灰色用于辅助文字，浅色背景用于未选中按钮和信息承载区域。

九、颜色和文字如何传达状态

顶部标题栏与选中按钮使用同一类蓝色，用户看到蓝色就能联想到当前的主操作和当前选择。未选中按钮使用浅灰蓝背景，文字变成深灰色，既保留可点击感，又不会和选中项竞争。切换按钮时，颜色变化比文字变化更加醒目，即使用户只是快速扫一眼，也能知道当前处在哪个模式。

七个竖条交替使用深浅两种蓝色。交替色并不表示周次状态，也不表示某个数据项异常，页面中没有提供这样的说明。它的作用是帮助相邻竖条分组，让七个单元在狭窄的手机宽度内更容易被逐个识别。数字和周次标签使用中灰色，与蓝色图形拉开层次，避免所有信息都以高饱和颜色显示。

来源占比标签使用三种不同颜色：移动端为蓝色，平板为紫色，桌面为绿色。这里的颜色与来源一一对应，用户可以不依赖复杂图例就区分三项。标签背景统一使用很浅的灰色，说明它们是同一层级的摘要项；文字颜色承担分类作用，背景不承担分类作用。这样的处理既保持一致，又避免页面变成颜色过多的彩色面板。

提示条使用浅蓝背景和灰色文字，语气是说明而不是警告。它没有使用红色或橙色，因为刷新示例数据不是错误处理，也没有失败状态。提示条中同时出现次数和用途说明，前者提供动态反馈，后者解释页面性质。文字字号较小但仍保持足够对比度，适合作为图表卡片下方的补充信息。

十、从用户操作角度完整走一遍页面

第一步是进入页面并观察默认状态。用户会看到折线图按钮为蓝色，卡片标题是近七日访问趋势，七个数据单元从周 1 到周 7 排列，提示条显示更新 0 次。此时不需要进行任何配置，也没有空白加载阶段，页面直接给出可读内容。

第二步是点击柱状图按钮。按钮选中颜色移动到柱状图，卡片标题变为近七日数据分布，七个竖条高度按照新的比例呈现。数字和周次标签仍然存在，说明切换的是展示方式而不是删除数据。用户可以来回点击折线图和柱状图，确认按钮状态、标题和图形高度都会跟随选择变化。

第三步是点击饼图按钮。七个竖条区域被三个来源标签替换，卡片标题改为访问来源占比。移动端、平板和桌面三个标签的百分比加起来为 100%，页面没有显示真正圆饼，但占比关系仍然可以直接阅读。再切回折线图，七个周次单元重新出现，之前的趋势数据仍然可见。

第四步是点击刷新图表数据。提示条中的更新次数增加，折线图或柱状图中的数字换成新的固定组。用户可以先在折线图状态刷新，再切换到柱状图观察同一组新数据的另一种高度表现，也可以在饼图状态刷新后确认来源标签内容保持不变而计数继续增加。

第五步是重复刷新并观察稳定性。每次点击都应该让次数加一，不应该改变当前图表类型，也不应该出现空卡片。第一次刷新完成后，趋势数据已经替换为新的固定组，后续刷新仍然使用这组数字。这个行为适合用来理解“计数状态”和“数据状态”同时更新时的页面反馈。

十一、页面中的图表与真实数据服务边界

这个页面的图表数据直接写在页面展示逻辑中，第一组数据由七个固定数字组成，刷新后替换为另一组固定数字，来源占比也是固定文字。页面没有网络请求、数据库查询、文件读取、时间范围选择、筛选条件输入或账号关联。所谓“近 7 日”是图表标签中的演示语义，不代表页面根据当前日期计算了最近七天。

页面中的“刷新图表数据”也不是从服务器重新拉取数据。它只是执行一次本地的状态更新，让更新次数加一，同时将七项趋势数字替换成预设的新数组。如果设备断网，页面仍然可以完成这个操作；如果重启页面，数据是否恢复到初始状态取决于页面重新创建，当前实现没有持久化缓存和服务端同步。

来源占比同样没有与真实访问日志绑定。移动端 48%、平板 28%、桌面 24%只是页面给出的示例比例，三个标签并不会根据刷新后的七项趋势数字重新计算。页面也没有绘制扇区，所以不能从画面推断出某个来源的真实访问量。将这些边界说明清楚，可以避免把一个用于观察 ArkUI 状态切换的页面误认为完整的数据可视化产品。

如果要把它扩展成真实统计页面，还需要增加数据请求、加载状态、失败状态、时间范围、空数据处理和格式校验等内容，但这些都不属于当前页面已经提供的功能。本文只讨论眼前能够操作和观察到的内容：固定数据如何进入图表、类型选择如何改变呈现、刷新按钮如何带来反馈，以及饼图主题为什么仍然只是标签摘要。

十二、页面交互背后的声明式思路

页面的每个可见结果都可以看成状态的投影。当前类型决定按钮选中态和卡片内容，刷新次数决定提示条中的数字，趋势数据决定七个数据单元上显示的数字和竖条高度。点击事件并不需要找到某个具体的文字组件再手动修改颜色，也不需要直接移动某个竖条；它只需要更新页面状态，界面会按照新的状态重新描述。

这种方式非常适合当前这种小型演示页面。按钮的颜色、卡片标题和内容分支彼此关联，如果采用大量手动操作，很容易出现只修改了一处的情况。例如按钮已经变成蓝色，但卡片标题仍然显示旧模式；或者数字已经变化，但竖条仍然使用旧高度。状态驱动的写法把这些结果放在同一组条件下，减少了不同步的机会。

页面中的条件分支也比较直观：选择饼图时呈现来源标签，其他两种选择时呈现七个数据单元。这个分支与用户看到的差异完全一致，便于从页面行为反推实现逻辑。对于初学者来说，这个例子比复杂的多页面应用更容易观察，因为一次点击只改变少量区域，状态影响范围清楚，反馈也立即出现。

十三、为什么这个页面没有把所有图表都画得很复杂

在真实产品中，折线图往往需要坐标轴、折线连接、节点、网格线、单位和图例，柱状图可能需要横纵坐标、数值标签、分组、滚动和触摸提示，饼图则需要扇区、图例、百分比和点击高亮。当前页面没有全部加入这些元素，而是用最少的视觉部件保留三类信息：模式名称、数据项差异和切换反馈。

这种取舍让页面更容易在手机屏幕上完整展示。七个数据项不需要横向滚动，三个来源标签不需要单独的图例区域，标题和按钮的位置也始终稳定。对于学习和观察状态切换来说，稳定布局比复杂图形更重要。用户可以把注意力放在“选择改变了什么”上，而不是先花时间理解坐标轴和手势。

同时，简单并不意味着页面没有图表价值。七个数字和七根不同高度的竖条仍然表达了数据差异，三个百分比标签仍然表达了来源占比，刷新后的第二组数字仍然能让用户比较前后变化。页面以展示状态和数据关系为主要目的，而不是追求完整商业图表组件的全部能力。

十四、观察页面时容易产生的几个误会

第一个误会是把标题中的“折线图”理解成已经画出了折线。实际画面是七个竖向条形单元，没有线段连接点。更准确的描述是折线图主题下的趋势条形展示。第二个误会是把“柱状图”理解成真实的统计坐标图。页面没有坐标轴和刻度，只有七个按照比例生成的竖条，因此它是简化的柱状分布演示。

第二个误会是认为点击刷新后每次都会产生随机结果。实际第一次刷新会替换到一组预设数字，后续重复刷新仍然使用这组数字。变化稳定可重复，更新次数则每次累加。第三个误会是认为饼图按钮会显示圆形饼图。当前状态实际显示三个来源占比标签，没有扇区动画和图例联动。

还有一个误会是认为“数据已更新”说明完成了网络同步。提示条的后半句已经说明这是示例图表，刷新动作只发生在页面本地。最后，更新次数也不等于数据条数，它只是按钮操作的累计次数。把这些概念区分开，才能准确理解页面提供的反馈。

十五、可以怎样验证每一种页面状态

打开页面后，先检查标题栏、三种按钮、图表卡片、提示条和刷新按钮是否按顺序出现。默认应当是折线图选中，卡片标题应当是近七日访问趋势，七个周次标签应当完整显示，提示条中的次数应当为 0。

点击柱状图按钮，确认只有选中颜色、卡片标题和竖条高度比例发生对应变化，七个数字和周次标签仍然存在。再点击折线图按钮，确认页面回到趋势标题和相应的条形高度。点击饼图按钮，确认七个数据单元消失，三个来源比例标签出现，三个百分比相加为 100%。

在折线图状态下点击刷新，确认提示条次数变为 1，数字变成 64、42、81、56、88、61、75，竖条高度也跟随新数字变化。再点击一次，次数应变为 2，数据内容保持同一组。切换到柱状图，确认新数据仍然存在；切换到饼图，确认来源标签仍然固定而次数继续保留。

还可以观察快速连续点击按钮时的表现。图表类型按钮应该始终只有一个处于选中样式，卡片内容应该与最后一次选择一致。快速点击刷新按钮时，次数应按点击次数增加，页面不应出现空白卡片或重复的多个图表区域。因为当前操作没有网络等待，所以用户可以直接看到每次点击后的同步反馈。

十六、如果页面显示异常，应该从哪些现象判断

如果三种按钮都像未选中，首先观察卡片标题是否仍然能够随点击变化。若标题能变化而按钮颜色不明显，问题可能只是颜色对比度；如果标题和内容都不变化，才说明类型状态没有正确参与页面更新。检查时应该把按钮样式和卡片内容一起看，不能只凭颜色下结论。

如果七个竖条都贴在顶部或底部，应该观察它们是否仍然保留数字和周次标签。当前布局要求图形区域固定高度并在底部对齐，条形高度只负责改变每个柱线的上边缘。若底边不一致，视觉上就无法比较数据；若条形高度变化但底边一致，则属于正常的比例展示。

如果点击刷新后次数增加但图形没有变化，先确认当前是否处于饼图状态。饼图状态使用固定来源标签，刷新只会改变次数；折线图和柱状图才会显示七项趋势数据替换。这个现象是三个展示分支不同导致的，不应直接认为刷新按钮失效。

如果页面出现文字拥挤，应重点观察七个数据单元的横向空间、数字字号和按钮宽度。当前页面选择一屏展示七项数据，因此在更窄的屏幕上，文字和间距需要保持克制。来源标签也需要在一行内排列，若字体或边距被随意放大，就可能破坏页面原有的布局节奏。

十七、这个页面对 ArkUI 学习的实际帮助

这个例子适合用来理解“一个页面如何同时管理选择状态、数据状态和计数反馈”。它没有大量抽象层，用户可以清楚地看到点击按钮如何影响标题和内容，也能看到刷新操作如何影响提示条和图形。对于刚接触声明式 UI 的开发者来说，这种小范围、强反馈的页面更容易建立状态与视图之间的联系。

它还展示了如何使用同一组数据完成不同视觉分支。折线趋势和柱状分布共享七个数字，但根据模式选择采用不同的高度比例；来源占比则使用另一组固定的文字标签。页面没有为了每个模式复制完整布局，而是在同一张卡片内决定当前应该显示哪一种内容。这种结构可以减少页面重复，也让模式之间的切换更加自然。

此外，页面把操作反馈放在用户容易看到的位置。顶部按钮反馈“现在选了什么”，卡片标题反馈“正在看什么”，图形和文字反馈“数据长什么样”，提示条反馈“刷新了几次”，底部按钮提供“下一步做什么”。这些反馈分别承担不同职责，不需要用弹窗打断用户。一个小页面能够把反馈层次安排清楚，往往比加入更多功能更能提升可用性。

十八、结语：把数据切换做成可观察的过程

这个图表页面的价值，在于把一组简单示例数据转换成三种可比较的展示状态。折线图主题使用七个周次单元表达趋势，柱状图主题用另一种高度比例强调分布，饼图主题则用移动端、平板和桌面三个百分比标签表达来源摘要。顶部按钮决定模式，卡片标题解释模式，图形或标签承载内容，底部刷新按钮让数据状态产生可见变化，提示条则记录操作次数。

它没有连接真实访问数据，也没有实现网络刷新、数据库查询、随机采样或真正的圆形饼图。这些边界并不会削弱页面的学习价值，反而让每个变化都更容易被观察和复现。只要按顺序点击三个图表按钮，再点击刷新按钮，就能看到选择状态、图表内容、固定数据和更新计数如何共同构成一个完整的交互闭环。

对于希望练习 ArkUI 声明式布局的人来说，这个页面可以作为一个清晰的起点：先把状态和可见结果对应起来，再观察条件内容的切换，最后理解固定数据与真实数据服务之间的界限。页面不靠复杂代码堆砌功能，而是通过稳定的布局、明确的颜色、可重复的按钮反馈和足够具体的文字，让图表绘制过程变得直观可读。当前操作截图与初始截图没有体现刷新后的数值变化，因此不把它作为刷新结果的证据；刷新后的数据应以页面实际交互显示为准。