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