CN116664734A - 环形图的显示方法、电子设备及可读存储介质 - Google Patents

Abstract

本申请公开了一种环形图的显示方法、电子设备及可读存储介质，属于终端技术领域。应用于电子设备中，该方法包括：响应于对色彩渐变的环形图的显示操作，展示环形图对应的绘制动画；在展示绘制动画的过程中，若当前已绘制的圆弧的绘制占比值小于目标占比值，则基于环形图中至少一个圆弧的渐变偏移角绘制待展示的图像；若绘制占比值和环形图中最大圆弧的占比值均大于或等于目标占比值，则基于环形图中的最大圆弧的两个半圆弧中每个半圆弧的绘制范围和渐变偏移角，分段绘制最大圆弧，得到待展示的图像；展示待展示的图像。本申请通过渐变偏移角使圆弧的颜色从显示起始点开始显示，并通过分段绘制最大圆弧的方式，解决了环形图中发生的颜色跳变问题。

Description

环形图的显示方法、电子设备及可读存储介质

技术领域

本申请涉及终端技术领域，特别涉及一种环形图的显示方法、电子设备及可读存储介质。

背景技术

随着终端技术的发展，电子设备中各类数据越来越丰富，为了便于用户查看各类数据，通常可以通过圆头画笔绘制进度环形图、占比环形图等环形图，然后显示所绘制的环形图以对各类数据进行呈现。比如，在用户查看电子设备的存储空间的占用情况时，电子设备可以以占比环形图的形式显示各个应用所占存储空间的大小；又如，在用户通过清洁应用程序对电子设备中的垃圾文件进行清扫过程中，为了使用户获知当前清洁进度，电子设备可以以进度环形图的形式显示垃圾文件的清扫进度。

但是，若环形图为色彩渐变的环形图，那么在通过圆头画笔绘制环形图的情况下，环形图中可能会出现色彩跳变的情况，从而影响环形图的展示效果。

发明内容

本申请提供了一种环形图的显示方法、电子设备及可读存储介质，可以用于改善相关技术中环形图中发生颜色跳变的问题。所述技术方案如下：

第一方面，提供了一种环形图的显示方法，应用于电子设备中，所述方法包括：

响应于对色彩渐变的环形图的显示操作，展示所述环形图对应的绘制动画，所述绘制动画为展示所述环形图包括的每个圆弧的占比值由0增长至对应的预设占比值的过程的动画；

在展示所述绘制动画的过程中，若当前已绘制的圆弧的绘制占比值小于目标占比值，则基于所述环形图中至少一个圆弧的渐变偏移角绘制待展示的图像，所述渐变偏移角用于指示所述每个圆弧的绘制起始点颜色发生偏移的弧度范围，所述目标占比值是基于用于绘制圆弧的圆头画笔的半径与所述环形图的半径确定；

若所述绘制占比值和所述环形图中最大圆弧的占比值均大于或等于所述目标占比值，则基于所述环形图中的最大圆弧的两个半圆弧中每个半圆弧的绘制范围和渐变偏移角，分段绘制所述最大圆弧，得到待展示的图像，所述两个半圆弧是对所述最大圆弧分割后确定，所述两个半圆弧的绘制范围为基于分割位置重新确定；

展示所述待展示的图像。

如此，在展示环形图的绘制动画的过程中，通过在每一次绘制待展示的图像时，设置一个渐变偏移角，该渐变偏移角可以使绘制的圆弧的颜色发生偏移，从而使圆弧的颜色从显示起始点开始显示，解决了圆弧的绘制起始点处发生的颜色跳变的问题。另外，在展示环形图的过程中，若当前已绘制的圆弧的绘制占比值达到一定的占比，则通过可以将当前占比值最大的最大圆弧分成两段进行绘制，也即可以将两个半圆弧视为两个不同的个体，由于对于两个不同个体各自具有不同的绘制参数，所以后半段圆弧按照自身的绘制参数进行绘制后，即使后半段圆弧的绘制结束笔迹覆盖在前半段圆弧上，也因与前半段圆弧的绘制参数不同，而不会受到前半段圆弧的绘制参数的影响，从而不会发生颜色跳变的情况，进而提升了环形图的显示效果。

作为本申请的一个示例，所述在展示所述绘制动画的过程中，若当前已绘制的圆弧的绘制占比值小于目标占比值，则基于所述环形图中至少一个圆弧的渐变偏移角绘制待展示的图像之前，还包括：

若所述环形图中所有圆弧的总占比值小于所述目标占比值，或者，在所述环形图为占比环形图的情况下，若所述总占比值大于或等于所述目标占比值，且所述最大圆弧的占比值小于所述目标占比值，则获取所述圆头画笔的半径和所述环形图的半径；

根据所述圆头画笔的半径和所述环形图的半径确定所述每个圆弧的渐变偏移角。

如此，通过圆头画笔的半径和环形图的半径确定每个圆弧的渐变偏移角，可以在每个圆弧的显示起始点与绘制起始点不同的情况下，使得每个圆弧的颜色从显示起始点开始显示，解决了绘制起始点处发生的颜色跳变的问题，提升绘制起始点处的显示效果。

作为本申请的一个示例，所述响应于对色彩渐变的环形图的显示操作，展示对应的绘制动画之后，还包括：

在展示所述绘制动画的过程中，在所述环形图为所述占比环形图的情况下，若所述绘制占比值大于或等于所述目标占比值，且所述最大圆弧的占比值小于所述目标占比值，则基于所述每个圆弧的预设占比值，对参考圆弧进行分割，得到所述参考圆弧的第一半圆弧和第二半圆弧，所述参考圆弧为所述环形图中任意一个圆弧；

确定所述第一半圆弧的绘制次序为第一次序，并确定所述第二半圆弧的绘制次序为最后次序；

基于所述第一半圆弧当前的绘制次序和所述每个圆弧的渐变偏移角，依次绘制所述第一半圆弧、所述环形图中除所述参考圆弧之外的剩余圆弧以及所述第二半圆弧，得到待展示的图像。

如此，通过分段绘制参考圆弧，使得第二半圆弧为最后绘制的一个半圆弧，由于第二半圆弧一端与第一半圆弧相融合，第二半圆弧的另一端的绘制笔迹显示在环形图的上方，从而实现了环形图中各个圆弧的绘制笔迹首尾相连的效果，提升了环形图的显示效果。

作为本申请的一个示例，所述基于所述每个圆弧的预设占比值，对参考圆弧进行分割，得到所述参考圆弧第一半圆弧和第二半圆弧，包括：

根据所述每个圆弧的预设占比值，确定所述每个圆弧在待展示的图像中的增长比例；

根据所述每个圆弧在所述绘制占比值中的占比值和所述增长比例，确定所述参考圆弧在所述待展示的图像中的占比值，以及所述待展示的图像中所述环形图的绘制起始点至所述参考圆弧的绘制起始点之间的圆弧的第一占比值；

根据所述第一占比值和所述参考圆弧在所述待展示的图像中的占比值，确定所述待展示的图像中所述参考圆弧的绘制起始点和绘制结束点；

根据所述参考圆弧的绘制起始点和绘制结束点，确定所述参考圆弧在所述待展示的图像中的中点位置；

将所述参考圆弧从所述中点位置进行分割，得到所述第一半圆弧和所述第二半圆弧，所述第一半圆弧的绘制起始点为所述参考圆弧的绘制起始点，所述第一半圆弧的绘制结束点为所述参考圆弧的中点位置，所述第二半圆弧的绘制起始点为所述参考圆弧的中点位置，所述第二半圆弧的绘制结束点为所述参考圆弧的绘制结束点。

如此，通过每个圆弧在绘制占比值中的占比值和增长比例，确定第一占比值，能够准确地确定参考圆弧在待展示的图像中的绘制起始点，从而提高了确定每个圆弧的位置的准确性，进而提高了绘制环形图中每个圆弧的准确性。

作为本申请的一个示例，所述在展示所述绘制动画的过程中，若当前已绘制的圆弧的绘制占比值小于目标占比值，则基于所述环形图中至少一个圆弧的渐变偏移角绘制待展示的图像之前，还包括：

若所述环形图中所有圆弧的总占比值和所述最大圆弧的占比值均大于或等于所述目标占比值，则基于所述每个圆弧的当前已绘制的占比值，确定所述最大圆弧在所述待展示的图像中的第三半圆弧的绘制范围和第四半圆弧的绘制范围；

基于所述第四半圆弧的绘制范围，确定第四半圆弧的渐变起始位置，所述渐变起始位置为开始发生颜色渐变的位置；

根据所述最大圆弧的绘制起始点、所述最大圆弧的渐变偏移角和所述第四半圆弧的绘制起始点，确定所述第三半圆弧的渐变起始位置；

基于所述最大圆弧的渐变偏移角和所述第三半圆弧的渐变起始位置，或者，基于所述最大圆弧的渐变偏移角和所述第四半圆弧的渐变起始位置，绘制待展示的图像。

如此，通过设置第三半圆弧和第四半圆弧的渐变起始位置，使得绘制环形图的过程中，在环形图的绘制方式发生变化的情况下，显示的绘制动画中渐变色发生位置一致，渐变色不发生突变，提高了绘制动画的流畅性。

作为本申请的一个示例，所述环形图为占比环形图；

所述基于所述每个圆弧的当前已绘制的占比值，确定所述最大圆弧在所述待展示的图像中的第三半圆弧的绘制范围和第四半圆弧的绘制范围，包括：

基于所述每个圆弧的预设占比值，确定每一帧图像中所述每个圆弧的增长比例；

基于所述每个圆弧的当前已绘制的占比值和所述增长比例，确定所述最大圆弧在所述待展示的图像中的占比值；

根据所述环形图的绘制起始点和所述最大圆弧在所述待展示的图像中的占比值，确定所述最大圆弧在所述待展示的图像中的绘制结束点；

根据所述最大圆弧在所述待展示的图像中的绘制结束点和所述最大圆弧的渐变偏移角，确定所述第四半圆弧的绘制起始点；

将所述环形图的绘制起始点与所述最大圆弧的中点位置确定为所述第三半圆弧的绘制范围，并将所述最大圆弧的绘制结束点确定为所述第四半圆弧的绘制结束点，所述第三半圆弧和所述第四半圆弧构成所述最大圆弧，且所述第三半圆弧和所述第四半圆弧部分重叠。

如此，通过每个圆弧在每一帧图像中的增长比例，确定最大圆弧在待展示图像中的占比值，提高了确定最大圆弧在待展示图像中的占比值的准确性，进而提高了确定第三半圆弧和第四半圆弧绘制范围的准确性。

作为本申请的一个示例，在所述环形图为进度环形图的情况下，所述进度环形图中包括的进度圆弧的数量为1，所述进度圆弧为所述进度环形图中表示当前进度的圆弧；

所述基于所述每个圆弧的当前已绘制的占比值，确定所述最大圆弧在所述待展示的图像的第三半圆弧的绘制范围和第四半圆弧的绘制范围，包括：

基于所述进度圆弧的当前已绘制的占比值，确定所述进度圆弧在所述待展示的图像中的占比值；

根据所述进度圆弧的绘制起始点和所述进度圆弧在所述待展示的图像中的占比值，确定所述进度圆弧在所述待展示的图像中的绘制结束点；

根据所述进度圆弧在所述待展示的图像中的绘制结束点和所述进度圆弧的渐变偏移角，确定所述第四半圆弧的绘制起始点；

将所述环形图的绘制起始点与所述进度圆弧的中点位置确定为所述第三半圆弧的绘制范围，并将所述进度圆弧的绘制结束点确定为所述第四半圆弧的绘制结束点，所述第三半圆弧和所述第四半圆弧构成所述进度圆弧，且所述第三半圆弧和所述第四半圆弧部分重叠。

如此，通过设置第三半圆弧和第四半圆弧部分重叠，可以使第三半圆弧和第三半圆弧更好的融合在一起构成最大圆弧，从而不仅解决了颜色跳变问题，同时提升了最大圆弧的显示效果。

作为本申请的一个示例，所述若所述绘制占比值和所述环形图中最大圆弧的占比值均大于或等于所述目标占比值，则基于所述环形图中的最大圆弧的两个半圆弧中每个半圆弧的绘制范围和渐变偏移角，分段绘制所述最大圆弧，得到待展示的图像，包括：

若所述绘制占比值和所述最大圆弧的占比值均大于或等于所述目标占比值，则基于所述每个圆弧的当前已绘制的占比值，对所述最大圆弧进行分割，得到所述第三半圆弧和所述第四半圆弧；

基于所述第三半圆弧的分割位置确定所述第三半圆弧的绘制范围，并基于所述第四半圆弧的分割位置确定所述第四半圆弧的绘制范围；

基于所述第四半圆弧的绘制范围，确定第四半圆弧的渐变起始位置，并根据所述最大圆弧的绘制起始点、所述第三半圆弧的渐变偏移角和所述第四半圆弧的绘制起始点，确定所述第三半圆弧的渐变起始位置；

根据所述第三半圆弧的渐变偏移角、渐变起始位置和绘制范围绘制所述第三半圆弧；

在所述第三半圆弧绘制完成的情况下，绘制所述环形图中除所述最大圆弧之外的其他圆弧；

在所述其他圆弧绘制完成的情况下，根据所述第四半圆弧的渐变偏移角、渐变起始位置和绘制范围，绘制所述第四半圆弧，得到所述待展示的图像。

如此，通过将当前占比值最大的最大圆弧分成两段进行绘制，且两个半圆弧的绘制范围和渐变偏移角都不同，由于两个半圆弧的绘制范围和绘制顺序发生了变化，从而后半段圆弧的绘制结束笔迹覆盖在前半段圆弧上，也不会发生颜色跳变的情况，进而提升了环形图的显示效果。

第二方面，提供了一种电子设备，所述电子设备的结构中包括处理器和存储器，所述存储器用于存储支持电子设备执行上述第一方面所提供的环形图的显示方法的程序，以及存储用于实现上述第一方面所述的环形图的显示方法所涉及的数据。所述处理器被配置为用于执行所述存储器中存储的程序。所述环形图的显示装置还可以包括通信总线，所述通信总线用于在所述处理器与所述存储器之间建立连接。所述处理器被配置为：

响应于对色彩渐变的环形图的显示操作，展示所述环形图对应的绘制动画，所述绘制动画为展示所述环形图包括的每个圆弧的占比值由0增长至对应的预设占比值的过程的动画；

在展示所述绘制动画的过程中，若当前已绘制的圆弧的绘制占比值小于目标占比值，则基于所述环形图中至少一个圆弧的渐变偏移角绘制待展示的图像，所述渐变偏移角用于指示所述每个圆弧的绘制起始点颜色发生偏移的弧度范围，所述目标占比值是基于用于绘制圆弧的圆头画笔的半径与所述环形图的半径确定；

若所述绘制占比值和所述环形图中最大圆弧的占比值均大于或等于所述目标占比值，则基于所述环形图中的最大圆弧的两个半圆弧中每个半圆弧的绘制范围和渐变偏移角，分段绘制所述最大圆弧，得到待展示的图像，所述两个半圆弧是对所述最大圆弧分割后确定，所述两个半圆弧的绘制范围为基于分割位置重新确定；

展示所述待展示的图像。

作为本申请的一个示例，所述处理器还被配置为：

若所述环形图中所有圆弧的总占比值小于所述目标占比值，或者，在所述环形图为占比环形图的情况下，若所述总占比值大于或等于所述目标占比值，且所述最大圆弧的占比值小于所述目标占比值，则获取所述圆头画笔的半径和所述环形图的半径；

根据所述圆头画笔的半径和所述环形图的半径确定所述每个圆弧的渐变偏移角。

作为本申请的一个示例，所述处理器还被配置为：

在展示所述绘制动画的过程中，在所述环形图为所述占比环形图的情况下，若所述绘制占比值大于或等于所述目标占比值，且所述最大圆弧的占比值小于所述目标占比值，则基于所述每个圆弧的预设占比值，对参考圆弧进行分割，得到所述参考圆弧的第一半圆弧和第二半圆弧，所述参考圆弧为所述环形图中任意一个圆弧；

确定所述第一半圆弧的绘制次序为第一次序，并确定所述第二半圆弧的绘制次序为最后次序；

基于所述第一半圆弧当前的绘制次序和所述每个圆弧的渐变偏移角，依次绘制所述第一半圆弧、所述环形图中除所述参考圆弧之外的剩余圆弧以及所述第二半圆弧，得到待展示的图像。

作为本申请的一个示例，所述处理器被配置为：

根据所述每个圆弧的预设占比值，确定所述每个圆弧在待展示的图像中的增长比例；

根据所述每个圆弧在所述绘制占比值中的占比值和所述增长比例，确定所述参考圆弧在所述待展示的图像中的占比值，以及所述待展示的图像中所述环形图的绘制起始点至所述参考圆弧的绘制起始点之间的圆弧的第一占比值；

根据所述第一占比值和所述参考圆弧在所述待展示的图像中的占比值，确定所述待展示的图像中所述参考圆弧的绘制起始点和绘制结束点；

根据所述参考圆弧的绘制起始点和绘制结束点，确定所述参考圆弧在所述待展示的图像中的中点位置；

将所述参考圆弧从所述中点位置进行分割，得到所述第一半圆弧和所述第二半圆弧，所述第一半圆弧的绘制起始点为所述参考圆弧的绘制起始点，所述第一半圆弧的绘制结束点为所述参考圆弧的中点位置，所述第二半圆弧的绘制起始点为所述参考圆弧的中点位置，所述第二半圆弧的绘制结束点为所述参考圆弧的绘制结束点。

作为本申请的一个示例，所述处理器还被配置为：

若所述环形图中所有圆弧的总占比值和所述最大圆弧的占比值均大于或等于所述目标占比值，则基于所述每个圆弧的当前已绘制的占比值，确定所述最大圆弧在所述待展示的图像中的第三半圆弧的绘制范围和第四半圆弧的绘制范围；

基于所述第四半圆弧的绘制范围，确定第四半圆弧的渐变起始位置，所述渐变起始位置为开始发生颜色渐变的位置；

根据所述最大圆弧的绘制起始点、所述最大圆弧的渐变偏移角和所述第四半圆弧的绘制起始点，确定所述第三半圆弧的渐变起始位置；

基于所述最大圆弧的渐变偏移角和所述第三半圆弧的渐变起始位置，或者，基于所述最大圆弧的渐变偏移角和所述第四半圆弧的渐变起始位置，绘制待展示的图像。

作为本申请的一个示例，所述环形图为占比环形图；

所述处理器还被配置为：

基于所述每个圆弧的预设占比值，确定每一帧图像中所述每个圆弧的增长比例；

基于所述每个圆弧的当前已绘制的占比值和所述增长比例，确定所述最大圆弧在所述待展示的图像中的占比值；

根据所述环形图的绘制起始点和所述最大圆弧在所述待展示的图像中的占比值，确定所述最大圆弧在所述待展示的图像中的绘制结束点；

根据所述最大圆弧在所述待展示的图像中的绘制结束点和所述最大圆弧的渐变偏移角，确定所述第四半圆弧的绘制起始点；

将所述环形图的绘制起始点与所述最大圆弧的中点位置确定为所述第三半圆弧的绘制范围，并将所述最大圆弧的绘制结束点确定为所述第四半圆弧的绘制结束点，所述第三半圆弧和所述第四半圆弧构成所述最大圆弧，且所述第三半圆弧和所述第四半圆弧部分重叠。

作为本申请的一个示例，在所述环形图为进度环形图的情况下，所述进度环形图中包括的进度圆弧的数量为1，所述进度圆弧为所述进度环形图中表示当前进度的圆弧；

所述处理器还被配置为：

基于所述进度圆弧的当前已绘制的占比值，确定所述进度圆弧在所述待展示的图像中的占比值；

根据所述进度圆弧的绘制起始点和所述进度圆弧在所述待展示的图像中的占比值，确定所述进度圆弧在所述待展示的图像中的绘制结束点；

根据所述进度圆弧在所述待展示的图像中的绘制结束点和所述进度圆弧的渐变偏移角，确定所述第四半圆弧的绘制起始点；

将所述环形图的绘制起始点与所述进度圆弧的中点位置确定为所述第三半圆弧的绘制范围，并将所述进度圆弧的绘制结束点确定为所述第四半圆弧的绘制结束点，所述第三半圆弧和所述第四半圆弧构成所述进度圆弧，且所述第三半圆弧和所述第四半圆弧部分重叠。

作为本申请的一个示例，所述处理器还被配置为：

若所述绘制占比值和所述最大圆弧的占比值均大于或等于所述目标占比值，则基于所述每个圆弧的当前已绘制的占比值，对所述最大圆弧进行分割，得到所述第三半圆弧和所述第四半圆弧；

基于所述第三半圆弧的分割位置确定所述第三半圆弧的绘制范围，并基于所述第四半圆弧的分割位置确定所述第四半圆弧的绘制范围；

基于所述第四半圆弧的绘制范围，确定第四半圆弧的渐变起始位置，并根据所述最大圆弧的绘制起始点、所述第三半圆弧的渐变偏移角和所述第四半圆弧的绘制起始点，确定所述第三半圆弧的渐变起始位置；

根据所述第三半圆弧的渐变偏移角、渐变起始位置和绘制范围绘制所述第三半圆弧；

在所述第三半圆弧绘制完成的情况下，绘制所述环形图中除所述最大圆弧之外的其他圆弧；

在所述其他圆弧绘制完成的情况下，根据所述第四半圆弧的渐变偏移角、渐变起始位置和绘制范围，绘制所述第四半圆弧，得到所述待展示的图像。

第三方面，提供了一种计算机可读存储介质，用于存储一个或多个程序，其中所述一个或多个程序被配置为被一个或多个处理器执行，所述一个或多个程序包括指令，所述指令使得电子设备执行上述第一方面所述的环形图的显示方法。

第四方面，提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述第一方面所述的环形图的显示方法。

上述第二方面、第三方面和第四方面所获得的技术效果与上述第一方面中对应的技术手段获得的技术效果近似，在这里不再赘述。

附图说明

图1是根据一示例性实施例示出的一种环形图的绘制过程示意图；

图2是根据一示例性实施例示出的一种电子设备的结构示意图；

图3是根据一示例性实施例示出的一种电子设备的软件架构示意图；

图4是根据一示例性实施例示出的一种应用场景的示意图；

图5是根据另一示例性实施例示出的一种应用场景的示意图；

图6是根据另一示例性实施例示出的一种应用场景的示意图；

图7是根据另一示例性实施例示出的一种应用场景的示意图；

图8是根据一示例性实施例示出的一种环形图的显示方法流程示意图；

图9是根据一示例性实施例示出的一种环形图中显示偏移角和目标占比值的示意图；

图10是根据一示例性实施例示出的一种占比环形图的示意图；

图11是根据一示例性实施例示出的一种参考圆弧中两个半圆弧的绘制范围的示意图；

图12是根据另一示例性实施例示出的一种占比环形图的绘制过程示意图；

图13是根据另一示例性实施例示出的一种占比环形图的绘制过程示意图；

图14是根据一示例性实施例示出的一种最大圆弧中两个半圆弧的绘制范围的示意图；

图15是根据另一示例性实施例示出的一种占比环形图的绘制过程示意图；

图16是根据另一示例性实施例示出的一种环形图的显示方法流程示意图；

图17是根据一示例性实施例示出的一种进度环形图的绘制过程示意图；

图18是根据另一示例性实施例示出的一种环形图的显示方法流程示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请的实施方式作进一步地详细描述。

应当理解的是，本申请提及的“多个”是指两个或两个以上。在本申请的描述中，除非另有说明，“/”表示或的意思，比如，A/B可以表示A或B；本文中的“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，比如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，为了便于清楚描述本申请的技术方案，采用了“第一”、“第二”等字样对功能和作用基本相同的相同项或相似项进行区分。本领域技术人员可以理解“第一”、“第二”等字样并不对数量和执行次序进行限定，并且“第一”、“第二”等字样也并不限定一定不同。

在本申请说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本申请的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此，在本说明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例，而是意味着“一个或多个但不是所有的实施例”，除非是以其他方式另外特别强调。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”，除非是以其他方式另外特别强调。

随着终端技术的发展，电子设备中的数据种类越来越多，用户想要获知的数据也越来越多，为了便于用户查看各类数据，电子设备通常可以通过圆头画笔绘制进度环形图或者占比环形图等环形图，且电子设备可以通过边绘制边展示环形图的方式对各类数据进行呈现，也即电子设备每绘制一帧图像后，显示所绘制的图像，并继续绘制下一帧图像。

需要说明的是，电子设备在绘制环形图的过程中，由于不同圆弧中每个圆弧在不同时序的图像中所对应的占比值不同，这样一来每个圆弧在不同时序的图像中的绘制起始点也会因占比值的不同而不同，因此，电子设备可以先确定每个圆弧在待绘制图像中的绘制起始点与占比值(该占比值也可以称为每个圆弧在环形图中所占角度)。另外，各个圆弧在环形图中存在一定的显示顺序，而显示顺序与各个圆弧的绘制顺序是相反的。示例性地，该环形图中包括4个圆弧，4个圆弧在环形图中的显示顺序按照顺时针排序为圆弧1、圆弧2、圆弧3和圆弧4，但是在绘制的过程中，电子设备需要按照圆弧4、圆弧3、圆弧2和圆弧1的顺序进行绘制。参见图1中的(a)图，电子设备在绘制其中一个时序对应的环形图时，可以获取环形图中每个圆弧的绘制起始点和每个圆弧在该时序下的环形图中所占的占比值，然后，电子设备可以先按照圆弧4的绘制起始点a与对应的占比值在顺时针方向上绘制圆弧4，然后按照圆弧3的绘制起始点b与对应的占比值继续在顺时针方向上绘制圆弧3，接着按照圆弧2的绘制起始点c与对应的占比值在顺时针方向上绘制圆弧2，最后按照圆弧1的绘制起始点d与对应的占比值在顺时针方向上绘制圆弧1。在圆弧1绘制完毕后，然后将绘制得到如图1中的(b)图所示的环形图作为一帧图像进行显示。其中，电子设备在绘制过程中，并不会显示绘制圆弧4、圆弧3、圆弧2和圆弧1的绘制过程，而是在每个圆弧绘制完毕后，将待显示图像进行显示。由于电子设备每绘制一帧图像才会显示绘制的图像，且每一帧图像中每个圆弧在环形图中的占比值不同，且每个圆弧在环形图中的占比值随着绘制图像的增多而增长，从而电子设备在依次播放每一帧绘制的图像的过程中，可以达到每个圆弧的占比值逐渐增长的效果。

但是，由于圆头画笔存在一定的宽度，在通过圆头画笔绘制环形图的过程中，笔迹会超出圆弧的绘制起始点，即圆弧的显示起始点与圆头画笔的绘制起始点不相同。示例性地，参见图1中的(b)图，圆弧1的绘制起始点在d点，圆弧1的显示起始点在e点，而在环形图为色彩渐变的环形图的情况下，由于圆弧1的颜色通常是从绘制起始点d开始显示，从而导致圆弧1中逆时针方向超出绘制起始点d的笔迹的颜色与设置的圆弧1的颜色不相同，进而导致环形图中出现颜色跳变的情况。比如，参见图1中的(b)图，原本设置的圆弧1的颜色是由浅蓝到深蓝色渐变，但是由于圆弧1的颜色是从绘制起始点d开始显示，那么圆弧1中的显示起始点e与绘制起始点d之间的弧度范围颜色与圆弧1的颜色不相同，本申请实施例的附图中以设置图案背景表示发生颜色跳变。

另外，无论是进度环形图还是占比环形图，在环形图中的一个圆弧的占比值达到一定的程度时候，同样会因圆头画笔的宽度，导致圆弧的绘制结束点与圆弧的显示结束点不相同，圆弧的绘制结束笔迹中会有部分笔迹超出了圆弧的绘制结束点，如此，将会导致超出的部分与圆弧设置的颜色不相同，且圆弧的显示结束点可能会显示在圆弧的绘制起始点处，这样一来，超出圆弧的绘制结束点那一部分的绘制笔迹的颜色将会与圆弧的绘制起始笔迹的颜色相同，从而发生颜色融合，该圆弧在显示时将会无法显示绘制结束笔迹的形状。示例性地，参见图1中的(c)图，进度环形图中存在一个进度圆弧1，该进度圆弧1的进度达到了100％，且该进度圆弧1的绘制起始点d设置的颜色为浅蓝色，绘制结束点e设置的颜色为深蓝色。即进度圆弧是一个从浅蓝色到深蓝色渐变的圆弧，但是进度圆弧的显示结束点f与绘制结束点e不相同，绘制结束点f与绘制结束点e之间的圆弧将覆盖在进度圆弧的绘制起始点处，且显示结束点f与绘制结束点e之间的圆弧颜色也将与进度圆弧的绘制起始点的颜色相同，从而在进度圆弧显示时无法显示绘制结束笔迹的形状，导致出现颜色跳变的情况，从而影响环形图的展示效果。为了便于理解，在本申请实施例的附图中以虚线绘制出了进度圆弧的绘制结束笔迹的形状，但是实际显示中无法显示该绘制结束笔迹的形状。

为了改善环形图中出现色彩跳变的情况，本申请实施例提供了一种环形图的显示方法，该方法中，在需要显示环形图的情况下，电子设备可以展示环形图的绘制动画，且在展示环形图的绘制动画的过程中，若当前已绘制的圆弧的绘制占比值小于一定的占比值，则在每一次绘制待展示的图像时，可以设置一个渐变偏移角，该渐变偏移角可以使绘制的圆弧的颜色发生偏移，从而使圆弧的颜色从显示起始点开始显示，解决了圆弧的绘制起始点处发生的颜色跳变的问题。另外，在展示环形图的过程中，若当前已绘制的圆弧的绘制占比值达到一定的占比，那么可以将当前占比值最大的最大圆弧分成两段进行绘制，且在绘制过程中，两个半圆弧的绘制范围和渐变偏移角都不同，由于两个半圆弧的绘制范围和绘制顺序发生了变化，从而可以将两个半圆弧视为两个不同的个体，对于两个不同个体可以设置不同的绘制参数，从而就算后半段圆弧的绘制结束笔迹覆盖在前半段圆弧上，也不会发生颜色跳变的情况，进而提升了环形图的显示效果。

在对本申请实施例提供的环形图的显示方法进行详细地解释说明之前，先对本申请实施例涉及的执行主体予以说明。本申请实施例提供的方法可以由电子设备执行，电子设备可以中可以安装有诸如设置、清洁、健身、电量监控等应用程序，这些应用程序均能够以环形图的形式呈现各类数据。作为示例而非限定，电子设备可以是但不限于手机运动相机(GoPro)、数码相机、平板电脑、桌面型、膝上型、手持计算机、笔记本电脑、车载设备、超级移动个人计算机(ultra-mobile personal computer，UMPC)、上网本、蜂窝电话、个人数字助理(personal digital assistant，PDA)、增强现实(augmented reality，AR)\虚拟现实(virtual reality，VR)设备、手机、门锁、智能电器等，本申请实施例对此不作限定。

图2是本申请实施例提供的一种电子设备的结构示意图。参见图2，电子设备100可以包括处理器110，外部存储器接口120，内部存储器121，通用串行总线(universal serialbus，USB)接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，移动通信模块150，无线通信模块160，音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，传感器模块180，按键190，马达191，指示器192，摄像头193，显示屏194，以及用户标识模块(subscriber identification module，SIM)卡接口195等。其中，传感器模块180可以包括压力传感器180A，陀螺仪传感器180B，气压传感器180C，磁传感器180D，加速度传感器180E，距离传感器180F，接近光传感器180G，指纹传感器180H，温度传感器180J，触摸传感器180K，环境光传感器180L，骨传导传感器180M等。

可以理解的是，本申请实施例示意的结构并不构成对电子设备100的具体限定。在本申请另一些实施例中，电子设备100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。

处理器110可以包括一个或多个处理单元，比如：处理器110可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processingunit，GPU)，图像信号处理器(image signal processor，ISP)，控制器，存储器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。

其中，控制器可以是电子设备100的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。

处理器110中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从该存储器中直接调用。避免了重复存取，减少了处理器110的等待时间，因而提高了系统的效率。

在一些实施例中，处理器110可以包括一个或多个接口，如可以包括集成电路(inter-integrated circuit，I2C)接口，集成电路内置音频(inter-integrated circuitsound，I2S)接口，脉冲编码调制(pulse code modulation，PCM)接口，通用异步收发传输器(universal asynchronous receiver/transmitter，UART)接口，移动产业处理器接口(mobile industry processor interface，MIPI)，通用输入输出(general-purposeinput/output，GPIO)接口，用户标识模块(subscriber identity module，SIM)接口，和/或通用串行总线(universal serial bus，USB)接口等。

可以理解的是，本申请实施例示意的各模块间的接口连接关系，只是示意性说明，并不构成对电子设备100的结构限定。在本申请另一些实施例中，电子设备100也可以采用上述实施例中不同的接口连接方式，或多种接口连接方式的组合。

充电管理模块140用于从充电器接收充电输入。其中，充电器可以是无线充电器，也可以是有线充电器。在一些有线充电的实施例中，充电管理模块140可以通过USB接口130接收有线充电器的充电输入。在一些无线充电的实施例中，充电管理模块140可以通过电子设备100的无线充电线圈接收无线充电输入。充电管理模块140为电池142充电的同时，还可以通过电源管理模块141为电子设备100供电。

电源管理模块141用于连接电池142，充电管理模块140与处理器110。电源管理模块141接收电池142和/或充电管理模块140的输入，为处理器110，内部存储器121，外部存储器，显示屏194，摄像头193和无线通信模块160等供电。电源管理模块141还可以用于监测电池容量，电池循环次数，电池健康状态(漏电，阻抗)等参数。在其他一些实施例中，电源管理模块141也可以设置于处理器110中。在另一些实施例中，电源管理模块141和充电管理模块140也可以设置于同一个器件中。

电子设备100的无线通信功能可以通过天线1，天线2，移动通信模块150，无线通信模块160，调制解调处理器以及基带处理器等实现。

电子设备100通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。

显示屏194用于显示图像，视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)，有机发光二极管(organic light-emittingdiode，OLED)，有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrixorganic light emitting diode，AMOLED)，柔性发光二极管(flex light-emittingdiode，FLED)，Miniled，MicroLed，Micro-oLed，量子点发光二极管(quantum dot lightemitting diodes，QLED)等。在一些实施例中，电子设备100可以包括1个或N个显示屏194，N为大于1的整数。

电子设备100可以通过ISP，摄像头193，视频编解码器，GPU，显示屏194以及应用处理器等实现拍摄功能。

视频编解码器用于对数字视频压缩或解压缩。电子设备100可以支持一种或多种视频编解码器。这样，电子设备100可以播放或录制多种编码格式的视频，比如：动态图像专家组(moving picture experts group，MPEG)1，MPEG2，MPEG3，MPEG4等。

外部存储器接口120可以用于连接外部存储卡，比如Micro SD卡，实现扩展电子设备100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信，实现数据存储功能。比如将音乐，视频等文件保存在外部存储卡中。

内部存储器121可以用于存储计算机可执行程序代码，计算机可执行程序代码包括指令。处理器110通过运行存储在内部存储器121的指令，来执行电子设备100的各种功能应用以及数据处理。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，至少一个功能所需的应用程序(比如声音播放功能，图像播放功能等)等。存储数据区可存储电子设备100在使用过程中所创建的数据(比如音频数据，电话本等)等。此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，比如至少一个磁盘存储器件，闪存器件，通用闪存存储器(universal flash storage，UFS)等。

电子设备100可以通过音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D以及应用处理器等实现音频功能，比如音乐播放，录音等。

压力传感器180A用于感受压力信号，可以将压力信号转换成电信号。在一些实施例中，压力传感器180A可以设置于显示屏194。压力传感器180A的种类很多，如电阻式压力传感器，电感式压力传感器，电容式压力传感器等。电容式压力传感器可以是包括至少两个具有导电材料的平行板。当有力作用于压力传感器180A，电极之间的电容改变。电子设备100根据电容的变化确定压力的强度。当有触摸操作作用于显示屏194，电子设备100根据压力传感器180A检测触摸操作强度。电子设备100也可以根据压力传感器180A的检测信号计算触摸的位置。在一些实施例中，作用于相同触摸位置，但不同触摸操作强度的触摸操作，可以对应不同的操作指令。比如：当有触摸操作强度小于压力阈值的触摸操作作用于短消息应用图标时，执行查看短消息的指令。当有触摸操作强度大于或等于压力阈值的触摸操作作用于短消息应用图标时，执行新建短消息的指令。

磁传感器180D包括霍尔传感器。电子设备100可以利用磁传感器180D检测翻盖皮套的开合。在一些实施例中，当电子设备100是翻盖机时，电子设备100可以根据磁传感器180D检测翻盖的开合。电子设备100根据检测到的皮套的开合状态或翻盖的开合状态，设置翻盖自动解锁等特性。

加速度传感器180E可检测电子设备100在各个方向上(一般为三轴)加速度的大小。当电子设备100静止时可检测出重力的大小及方向。加速度传感器180E还可以用于识别电子设备100的姿态，应用于横竖屏切换，计步器等应用。

指纹传感器180H用于采集指纹。电子设备100可以利用采集的指纹特性实现指纹解锁，访问应用锁，指纹拍照，指纹接听来电等。

温度传感器180J用于检测温度。在一些实施例中，电子设备100利用温度传感器180J检测的温度，执行温度处理策略。比如，当温度传感器180J上报的温度超过阈值，电子设备100执行降低位于温度传感器180J附近的处理器的性能，以便降低功耗实施热保护。在另一些实施例中，当温度低于另一阈值时，电子设备100对电池142加热，以避免低温导致电子设备100异常关机。在其他一些实施例中，当温度低于又一阈值时，电子设备100对电池142的输出电压执行升压，以避免低温导致的异常关机。

触摸传感器180K，也称“触控面板”。触摸传感器180K可以设置于显示屏194，由触摸传感器180K与显示屏194组成触摸屏，也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器180K可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中，触摸传感器180K也可以设置于电子设备100的表面，与显示屏194所处的位置不同。

按键190包括开机键，音量键等。按键190可以是机械按键，也可以是触摸式按键。电子设备100可以接收按键输入，产生与电子设备100的用户设置以及功能控制有关的键信号输入。

指示器192可以是指示灯，可以用于指示充电状态，电量变化，也可以用于指示消息，未接来电，通知等。

接下来对电子设备100的软件系统予以说明。

电子设备100的软件系统可以采用分层架构，事件驱动架构，微核架构，微服务架构，或云架构。本申请实施例以分层架构的安卓(Android)系统为例，对电子设备100的软件系统进行示例性说明。

图3是本申请实施例提供的一种电子设备100的软件系统的框图。参见图3，分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将Android系统分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时(Android runtime)和系统层，以及内核层。

应用程序层可以包括一系列应用程序包。如图3所示，应用程序包可以包括设置、清洁、健身、通话，地图，导航，WLAN，蓝牙，音乐，视频，短信息等应用程序。

应用程序框架层为应用程序层的应用程序提供应用编程接口(applicationprogramming interface，API)和编程框架。应用程序框架层包括一些预先定义的函数。如图3所示，应用程序框架层可以包括窗口管理器，内容提供器，视图系统，电话管理器，资源管理器，通知管理器等。窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问，这些数据可以包括视频，图像，音频，拨打和接听的电话，浏览历史和书签，电话簿等。视图系统包括可视控件，比如显示文字的控件，显示图片的控件等。视图系统可用于构建应用程序的显示界面，显示界面可以由一个或多个视图组成，比如，包括显示短信通知图标的视图，包括显示文字的视图，以及包括显示图片的视图。电话管理器用于提供电子设备100的通信功能，比如通话状态的管理(包括接通，挂断等)。资源管理器为应用程序提供各种资源，比如本地化字符串，图标，图片，布局文件，视频文件等。通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如，通知管理器被用于告知下载完成，消息提醒等。通知管理器还可以是以图表或滚动条文本形式出现在系统顶部状态栏的通知，比如后台运行的应用程序的通知。通知管理器还可以是以对话窗口形式出现在屏幕上的通知，比如在状态栏提示文本信息，发出提示音，电子设备振动，指示灯闪烁等。

作为本申请的一个示例，该应用框架层中还可以包括绘制模块和显示模块。其中，绘制模块可以用于在展示环形图的过程中，绘制多帧圆弧占比不同的图像。显示模块用于显示环形图绘制模块绘制的图像。

Android Runtime包括核心库和虚拟机。Android runtime负责安卓系统的调度和管理。核心库包含两部分：一部分是java语言需要调用的功能函数，另一部分是安卓的核心库。应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理，堆栈管理，线程管理，安全和异常的管理，以及垃圾回收等功能。

系统库可以包括多个功能模块，比如：表面管理器(surface manager)，媒体库(Media Libraries)，三维图形处理库(比如：OpenGL ES)，2D图形引擎(比如：SGL)等。表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可以支持多种音视频编码格式，比如：MPEG4，H.264，MP3，AAC，AMR，JPG，PNG等。三维图形处理库用于实现三维图形绘图，图像渲染，合成，和图层处理等。2D图形引擎是2D绘图的绘图引擎。

内核层是硬件和软件之间的层。内核层至少包含显示驱动，摄像头驱动，音频驱动，传感器驱动。

下面结合捕获拍照场景，示例性说明电子设备100软件以及硬件的工作流程。

当触摸传感器180K接收到触摸操作，相应的硬件中断被发给内核层。内核层将触摸操作加工成原始输入事件(包括触摸坐标，触摸操作的时间戳等信息)。原始输入事件被存储在内核层。应用程序框架层从内核层获取原始输入事件，识别原始输入事件所对应的控件。以该触摸操作是单击操作，该单击操作所对应的控件为相机应用图标的控件为例，相机应用调用应用程序框架层的接口，启动相机应用，再调用内核层启动摄像头驱动，通过摄像头193捕获静态图像或视频。

为了便于理解，在对本申请实施例提供的方法进行详细介绍之前，基于上述实施例提供的执行主体，接下来以电子设备是手机为例对本申请实施例涉及的应用场景进行介绍。

请参考图4，图4是根据一示例性实施例示出的一种应用场景的示意图。在一种可能的场景中，若用户想要查看手机的存储空间的占用情况，则参见图4中的(a)图，用户可以点击手机桌面中的设置应用程序的应用标识；手机响应于对设置应用程序的应用标识的点击操作，可以显示如图4中的(b)图所示的设置界面，用户可以点击设置界面中的“存储”选项；手机响应于“存储”选项的点击操作，可以展示如图4中的(c)图所示的存储管理界面。其中，在显示该存储管理界面的过程，可以先显示存储管理界面中除占比环形图之外的内容，然后在该存储管理界面中显示占比环形图的绘制动画。手机在展示占比环形图的绘制动画过程中，手机可以逐帧绘制每一帧图像，且每绘制一帧图像，就展示一帧图像，该每一帧图像中每个圆弧的占比值不同，从而在展示每一帧图像过程中，达到每个圆弧的占比值由0增长至对应的预设占比值的动态效果。参见图4中的(d)图，若该绘制动画包括n帧图像，手机可以逐帧展示每一帧图像，在绘制动画展示结束后，在存储管理界面中显示如图4中的(c)图所示的描述各个应用所占存储空间的大小的占比环形图。

需要说明的是，手机的存储空间通常不会被全部占据，也即是，描述各个应用所占存储控件的大小的占比环形图中的所有圆弧的占比值之和不会达到100％，另外，由于在绘制占比环形图的过程中，为每个圆弧设置有渐变偏移角，使得在每一次绘制图像时，每个圆弧的绘制起始点颜色发生偏移，也即是，使得每个圆弧的颜色是从显示起始点开始显示，从而每一帧图像显示时都不会发生颜色跳变的情况。在绘制动画展示结束后，该图4中的(c)图所示的的占比环形图中也不会发生颜色跳变的情况。

请参考图5，图5根据一示例性实施例示出的另一种应用场景的示意图。在一种可能的场景中，用户在使用手机的过程中，为了清楚知道对手机各个应用的使用时长，可以会查看屏幕使用时间，该种情况下，参见图5中的(a)图，用户可以点击手机桌面中的设置应用程序的应用标识；手机响应于对设置应用程序的应用标识的点击操作，可以显示如图5中的(b)图所示的设置界面，用户可以点击设置界面中的“屏幕使用时间”选项；手机响应于“屏幕使用时间”选项的点击操作，可以展示如图5中的(c)图所示的时间管理界面。其中，在显示该时间管理界面的过程，可以先显示时间管理界面中除占比环形图之外的内容，然后在该时间管理界面中显示占比环形图的绘制动画。手机在展示占比环形图的绘制动画过程中，手机可以逐帧绘制每一帧图像，且每绘制一帧图像，就展示一帧图像，该每一帧图像中每个圆弧的占比值不同，从而在展示每一帧图像过程中，达到每个圆弧的占比值由0增长至对应的预设占比值的动态效果。参见图5中的(d)图，若该绘制动画包括n帧图像，手机可以逐帧展示每一帧图像，在绘制动画展示结束后，在时间管理界面中显示如图5中的(c)图所示的描述各个应用所占时长大小的占比环形图。

需要说明的是，由于用户时间的占比环形图是查看当前所有时长中各个应用所占的使用时长，因此，描述各个应用所占使用时长的占比环形图中的所有圆弧的占比值之和将会达到100％，该占比环形图中各个圆弧首尾相接。

请参考图6，图6根据一示例性实施例示出的另一种应用场景的示意图。在一种可能的场景中，用户在使用手机的过程中，若用户想要清理手机中的垃圾文件，则参见图6中的(a)图，用户可以点击手机桌面中的清洁应用程序的应用标识；手机响应于对清洁应用程序的应用标识的点击操作，显示如图6中的(b)图所示的应用界面，用户可以继续点击该应用界面中的“清洁垃圾”选项；手机响应于对“清洁垃圾”选项的点击操作，显示如图6中的(c)图所示的清洁进度界面，该清洁进度界面中可以显示有进度环形图，该进度环形图可以表示当前垃圾文件的清扫进度，比如，图6中的(c)图中，清洁进度为50％。在所有垃圾文件清洁完毕后，参见图6中的(d)图，该进度环形图中进度值变为100％。其中，在显示该清洁进度界面的过程，可以先显示清洁进度界面中除进度环形图之外的内容，然后在该清洁进度界面中显示进度环形图的绘制动画。手机在展示进度环形图的绘制动画过程中，手机可以逐帧绘制每一帧图像，且每绘制一帧图像，就展示一帧图像，该每一帧图像中进度圆弧的占比值(或者称为进度值)不同，从而在展示每一帧图像过程中，达到进度圆弧的占比值由0增长至100％的动态效果。参见图6中的(e)图，若该绘制动画包括n帧图像，手机可以逐帧展示每一帧图像，在绘制动画展示结束后，在清洁进度界面中显示如图6中的(d)图所示的描述的进度值达到100％的环形图。其中，图6中的(c)图为n帧图像中的其中一帧图像。

请参考图7，图7根据一示例性实施例示出的另一种应用场景的示意图。在一种可能的场景中，用户在使用手机的过程中，若用户想要查看当天运动情况，则参见图7中的(a)图，用户可以点击手机桌面中的健身应用程序的应用标识；手机响应于对健身应用程序的应用标识的点击操作，显示如图7中的(b)图所示的健身管理界面，该健身管理界面中可以显示有关于健身信息的进度环形图，该进度环形图可以表示健身时长和能量消耗进度是否达到要求，比如，图7中的(b)图中，能量消耗进度为70％，健身时长进度为50％。其中，在显示该健身管理界面的过程，可以先显示健身管理界面中除进度环形图之外的内容，然后在该健身管理界面中显示进度环形图的绘制动画。手机在展示进度环形图的绘制动画过程中，手机可以逐帧绘制每一帧图像，且每绘制一帧图像，就展示一帧图像，该每一帧图像中进度圆弧的占比值(或者称为进度值)不同，从而在展示每一帧图像过程中，达到进度圆弧的占比值由0增长至当前进度值的动态效果。参见图7中的(c)图，若该绘制动画包括n帧图像，手机可以逐帧展示每一帧图像，在绘制动画展示结束后，在健身管理界面中显示如图7中的(b)图所示的描述的进度值达到70％的环形图。

需要说明的是，本申请实施例中仅以上述图4-图7所示的应用场景为例进行说明，并不对本申请实施例构成限定。

基于上述实施例提供的执行主体和应用场景，接下来对本申请实施例提供的环形图的显示方法进行介绍。请参考图8，图8是根据一示例性实施例示出的一种环形图的显示方法流程示意图，且图8中是以占比环形图为例进行说明。作为示例而非限定，这里以该方法应用于手机中为例进行说明，该方法可以包括如下部分或者全部内容：

步骤801：响应于对占比环形图的显示操作，获取占比环形图中所有圆弧的总占比值和最大圆弧的占比值。

由于总占比值和最大圆弧的占比值关系到绘制动画中待展示的图像的绘制方式，且由于在显示占比环形图之前，该占比环形图中各个圆弧所对应的预设占比值是固定的，即占比环形图中的总占比值和最大圆弧的占比值是固定的，因此，响应于对占比环形图的显示操作，电子设备可以获取到占比环形图中所有圆弧的总占比值和最大圆弧的占比值。

步骤802：判断总占比值是否大于或等于目标占比值；若是，则执行下述步骤805的操作，若否，则执行下述步骤803的操作。

由于在总占比值小于目标占比值的情况下，该占比环形图中各个圆弧在绘制起始点处易发生颜色跳变问题，因此，电子设备可以通过下述步骤803和步骤804的操作绘制待展示的图像。

由上述可知，圆弧的绘制结束点与圆弧的显示结束点不相同，在任意一个圆弧的占比值较大，或者，占比环形图中总占比值较大的情况下，圆弧的绘制结束笔迹中会有部分绘制笔迹超出了圆弧的绘制结束点，如此，将会导致超出的部分与圆弧设置的颜色不相同，且可能会发生其中一个圆弧的显示结束点会显示在另一个圆弧的起始绘制点之后，从而导致发生颜色跳变的情况。而这一情况是因圆头画笔的存在一定宽度导致的，因此，电子设备可以基于圆头画笔的半径和占比环形图的半径，确定目标占比值。

作为一个示例，电子设备可以根据圆头画笔的半径和占比环形图的半径确定每个圆弧的显示起始点与绘制起始点之间的显示偏移角，然后根据显示偏移角，确定目标占比值。

在一些实施例中，电子设备可以根据圆头画笔的半径和占比环形图的半径，通过下述第一公式确定每个圆弧的显示偏移角。

α＝arcSin(r/R) (1)

需要说明的是，在上述第一公式(1)中，α为每个圆弧的显示偏移角，r为圆头画笔的半径，R为占比环形图的半径。

示例性地，为了便于理解该显示偏移角的确定方式，图9中的(a)图为本申请实施例提供的一种显示偏移角的示意图。

在一些实施例中，电子设备根据显示偏移角，通过下述第二公式(2)确定目标占比值。

T＝100％*(1-2α/360°) (2)

需要说明的是，上述第二公式(2)中，T为目标占比值，α为显示偏移角。

示例性地，为了便于理解该显示偏移角的确定方式，图9中的(b)图为本申请实施例提供的一种目标占比值的示意图。

步骤803：根据圆头画笔的半径和占比环形图的半径确定每个圆弧的渐变偏移角。

由于每个圆弧的显示起始点和绘制起始点相差大小与圆头画笔的大小有关，因此，电子设备可以获取圆头画笔的半径和占比环形图的半径，并根据圆头画笔的半径和占比环形图的半径确定每个圆弧的渐变偏移角。

作为一个示例，由于渐变偏移角是用于使圆弧的颜色从显示起始点开始显示，因此，该渐变偏移角可以为上述第一公式确定的显示偏移角，也即是，该渐变偏移角的确定方式为：电子设备根据圆头画笔的半径和占比环形图的半径，通过上述第一公式确定每个圆弧的渐变偏移角。

步骤804：基于渐变偏移角绘制待展示的图像，并执行下述步骤822的操作，直至绘制动画展示完成。

由于在总占比值小于目标占比值的情况下，在该占比环形图中的绘制起始点处发生颜色跳变的情况，不会在绘制结束点发生颜色跳变的情况，因此，在展示占比环形图对应的绘制动画的过程中，对于每一个待展示的图像，电子设备均可以基于该渐变偏移角绘制待展示的图像，并在每一次绘制得到一个待展示的图像后，执行下述步骤822的操作，以展示占比环形图的绘制动画，直至绘制动画展示结束。

作为一个示例，电子设备可以根据画弧函数、扫描渐变函数和图像旋转函数绘制待展示的图像。其中，图像旋转函数用于设置圆弧中颜色(渐变色)的渐变偏移角，该图像旋转函数可以为MatrixsetRotate()，设置有渐变偏移角的图像旋转函数可以为MatrixsetRotate(float degrees，float px，float py)，该图像旋转函数中，floatdegrees代表渐变色偏移角，float px和float py分别代表占比环形图的圆心x和y。通过该图像旋转函数可以将各圆弧的颜色显示起始点逆时针偏移渐变偏移角α，也即是，在渐变偏移角的作用下，各个圆弧的颜色可以从显示起始点开始显示。另外，该画弧函数可以为canvas.drawArc()函数，在通过该画弧函数绘制环形图的情况下，该画弧函数中可以设置有绘制过程中需要的参数。示例性地，该画弧函数中设置参数后，该画弧函数的形式可以为canvas.drawArc(RectF oval，float startAngle，float sweepAngle，booleanuseCenter，Paint paint)。其中，该画弧函数中，RectF oval代表圆弧对应的外接矩阵，该外接矩阵用于确定每个圆弧的位置，以确保绘制的圆弧均为环形图中圆弧；floatstartAngle代表圆弧的绘制起始点，由于环形图的角度是360度，每个圆弧在环形图的占比值可以是指每个圆弧在环形图中所占的角度，因此，该绘制起始点通过起始绘制角度表示；float sweepAngle代表圆弧当前的占比值对应的角度；boolean useCenter代表圆弧是否与环形图的圆心连接成闭合区域，也即是，该参数可以标识当前绘制的圆弧是否会与圆心形成扇形图；Paint paint代表绘制圆弧的画笔。电子设备在绘制环形图的过程中，为了美观性或者区分不同类型数据，通常会为该环形图中每个圆弧设置不同的颜色，且可以设置每个圆弧为颜色渐变的圆弧。其中，电子设备可以通过扫描渐变函数实现对每个圆弧的颜色设置，该扫描渐变函数可以为SweepGradient()函数。在通过该扫描渐变函数对圆弧的颜色进行设置的情况下，可以在该扫描渐变函数中设置需要的参数。示例性地，扫描渐变函数中设置参数后，该扫描渐变函数的形式可以为SweepGradient(float cx，float cy，int[]colors，float[]positions)。其中，该扫描渐变函数中，float cx和float cy分别代表环形图的圆心的x坐标和y坐标，int[]colors代表渐变色数组，该渐变色数组用于描述圆弧中发生渐变的颜色，比如，设置由浅蓝渐变为深蓝，；float[]positions代表渐变分布数组，该渐变分布数组用于描述圆弧的哪个位置开始发生颜色渐变，到哪个位置结束颜色渐变。

步骤805：判断最大圆弧的占比值是否大于或等于目标占比值；若是，则执行下述步骤810的操作；若否，则执行下述步骤806的操作。

步骤806：判断当前已绘制的圆弧的绘制占比值是否大于或等于目标占比值；若否，则依次执行上述步骤803和步骤804的操作，直至在检测到当前已绘制的圆弧的占比值大于或等于目标占比值的情况下，执行下述步骤807的操作。

在占比环形图的总占比值大于或等于目标占比值，且最大圆弧的占比值小于目标占比值的情况下，若当前已绘制的圆弧的绘制占比值小于目标占比值，则占比环形图的绘制起始点处易发生颜色跳变问题，因此，电子设备可以继续执行上述步骤803和步骤804的操作，并在执行过程中检测当前已绘制的圆弧的绘制占比值，在检测到当前已绘制的圆弧的占比值大于或等于目标占比值的情况下，说明在绘制待显示的图像的过程中，不仅会在占比环形图的绘制起始点处易发生颜色跳变问题，且待显示的图像中最后一个绘制的圆弧的绘制起始笔迹和绘制结束笔迹均会显示在最上方，没有与其他圆弧形成首尾相接的效果，导致占比环形图的显示效果较差。

示例性地，在占比环形图的总占比值大于或等于目标占比值，且最大圆弧的占比值小于目标占比值的情况下，若占比环形图的绘制动画展示完毕，则可以显示图10所示的占比环形图，该占比环形图中包括5个圆弧，5个圆弧中圆弧1为最后一个绘制的圆弧，圆弧1的绘制起始笔迹和绘制结束笔迹均显示在其他圆弧之上，导致占比环形图的显示效果较差。为了提升占比环形图的显示效果，也为了使占比环形图中各个圆弧之间形成首尾相接的效果。电子设备可以执行下述步骤807的操作。

步骤807：对占比环形图中的参考圆弧进行分割，得到参考圆弧的第一半圆弧和第二半圆弧。

需要说明的是，该参考圆弧可以为占比环形图中任意一个圆弧，比如，该参考圆弧可以为占比环形图中的最大圆弧，或者为占比环形图中占比值大于占比阈值的任意一个圆弧。该占比阈值可以根据需求预先进行设置，比如，该占比阈值可以为25％、30％等等。

在一些实施例中，电子设备对占比环形图中的参考圆弧进行分割，得到参考圆弧的第一半圆弧和第二半圆弧的操作可以为：根据每个圆弧的预设占比值，确定每个圆弧在待展示的图像中的增长比例；根据每个圆弧在绘制占比值中的占比值和增长比例，确定参考圆弧在待展示的图像中的占比值，以及待展示的图像中环形图的绘制起始点至参考圆弧的绘制起始点之间的圆弧的第一占比值；根据第一占比值和参考圆弧在待展示的图像中的占比值，确定待展示的图像中参考圆弧的绘制起始点和绘制结束点；根据参考圆弧的绘制起始点和绘制结束点，确定参考圆弧在待展示的图像中的中点位置；将参考圆弧从中点位置进行分割，得到第一半圆弧和第二半圆弧，第一半圆弧的绘制起始点为参考圆弧的绘制起始点，第一半圆弧的绘制结束点为参考圆弧的中点位置，第二半圆弧的绘制起始点为参考圆弧的中点位置，第二半圆弧的绘制结束点为参考圆弧的绘制结束点。

作为一个示例，电子设备可以通过裁剪画布函数对参考圆弧进行分割，该裁剪画布函数可以为canvas.clipPath(Path)函数，该裁剪画布函数中设置的参数Path为需要分割的范围，该分割范围通常为显示范围。

由于占比环形图中每个圆弧所占比例可能是不同的，这样一来，每个圆弧在每一次绘制时所绘制的占比值也不同，因此，电子设备可以根据每个圆弧的预设占比值，确定每个圆弧在待展示的图像中的增长比例；根据每个圆弧在绘制占比值中的占比值和增长比例，确定待展示的图像中占比环形图的绘制起始点至参考圆弧的绘制起始点之间的圆弧的第一占比值，以及参考圆弧在待展示的图像中的占比值。

作为一个示例，电子设备可以根据每个圆弧的预设占比值，确定各个圆弧之间的占比比例，将该占比比例确定为每个圆弧在待展示的图像中的增长比例。

作为一个示例，若每个圆弧在每个待展示的图像中的增长值是固定的，那么电子设备可以将每个圆弧的预设占比值乘以增长比例，得到每个圆弧的增长值；将每个圆弧在绘制占比值中的占比值与对应的增长值相加，得到每个圆弧在待展示的图像中的占比值。

由于在对参考圆弧进行分割时，需要确定参考圆弧在待显示的图像中的的显示起始点和显示结束点，参考圆弧的显示起始点与参考圆弧的绘制起始点相差一个显示偏移角(由于为显示偏移角和渐变偏移角相同，此处也可以称为渐变偏移角)，因此，电子设备可以先确定参考圆弧在待显示的图像中的的绘制起始点，然后根据参考圆弧在待显示的图像中的绘制起始点和显示偏移角确定参考圆弧在待显示的图像中的显示起始点。

又由于当前圆弧在待显示的图像中的绘制起始点与下一个圆弧在待显示的图像中的绘制结束点相同，下一个圆弧为绘制顺序位于当前圆弧之后，且显示位置与当前圆弧相邻的圆弧。因此，电子设备可以根据每个圆弧在待展示的图像中的占比值，确定待展示的图像中占比环形图的绘制起始点至参考圆弧的绘制起始点之间的圆弧的第一占比值。

作为一个示例，电子设备在分割参考圆弧的过程中，可以以参考圆弧的显示起始点和显示结束点为依据进行分割。其中，参考圆弧的绘制起始点减去显示偏移角(若显示偏移角与渐变偏移角相同，此处可以为绘制起始点减去显示偏移角)，可以得到参考圆弧的显示起始点；参考圆弧的绘制结束点加上显示偏移角(若显示偏移角与渐变偏移角相同，此处可以为绘制结束点加上显示偏移角)，得到参考圆弧的显示结束点。

示例性地，参见图11，若该占比环形图中包括5个圆弧，且圆弧3为参考圆弧，则电子设备可以确定圆弧1与圆弧2的占比值之和，该占比值之和即为第一占比值。电子设备可以根据第一占比值确定圆弧2的绘制结束点，该圆弧2的绘制结束点为圆弧3的绘制起始点o。根据圆弧3的绘制起始点o和圆弧3在待展示的图像中的占比值，可以确定圆弧3的绘制结束点p，根据圆弧3的绘制结束点确定圆弧3的圆弧中心点。电子设备可以将圆弧3从圆弧中心点q进行分割，得到第一半圆弧path1和第二半圆弧path2。第一半圆弧的绘制起始点为圆弧3的绘制起始点o，第一半圆弧的绘制结束点为圆弧3的中点位置p，第二半圆弧的绘制起始点为圆弧3的中点位置p，第二半圆弧的绘制结束点为参考圆弧的绘制结束点q。第一半圆弧path1的范围为圆弧3的显示起始点与中心位置p之间的位置，即o点位置逆时针偏移显示偏移角后的位置与中心位置p之间的位置；第二半圆弧path2的范围为圆弧3的中心位置p与圆弧3的显示结束点之间的位置，即中心位置p与q点位置顺时针偏移显示偏移角后的位置。

作为本申请的一个示例，电子设备可以按照上述方式对参考圆弧进行分割，也可以按照其他方式对参考圆弧进行分割。示例性地，电子设备可以根据每个圆弧的预设占比值，确定每个圆弧在待展示的图像中的增长比例；根据每个圆弧在绘制占比值中的占比值和增长比例，确定参考圆弧在待展示的图像中的占比值，以及待展示的图像中环形图的绘制起始点至参考圆弧的绘制起始点之间的圆弧的第一占比值；根据第一占比值、参考圆弧在待展示的图像中的占比值和参考圆弧的显示变偏移角，确定待展示的图像中参考圆弧的显示起始点和显示结束点；根据参考圆弧在待展示的图像中的显示起始点和显示结束点，确定参考圆弧在待展示的图像中的中点位置；将参考圆弧从中点位置进行分割，得到第一半圆弧和第二半圆弧，第一半圆弧的显示起始点为参考圆弧的显示起始点，第一半圆弧的显示结束点为参考圆弧的中点位置，第二半圆弧的显示起始点为参考圆弧的中点位置，第二半圆弧的显示结束点为参考圆弧的显示结束点。

在一些实施例中，电子设备根据第一占比值、参考圆弧在待展示的图像中的占比值和参考圆弧的显示偏移角，可以通过下述第三公式(3)确定待展示的图像中参考圆弧的显示起始点和显示结束点。

需要说明的是，在上述第三公式(3)中，startAngle为参考圆弧的显示起始点(也可以称为在占比环形图中的显示起始角度)，prePercent为第一占比值，α为显示偏移角，centerAngle为中心位置(也可以称为参考圆弧在占比环形图中的中心角度)，currentPercent为参考圆弧在待展示的图像中的占比值endAngle为参考圆弧在待展示的图像中的显示结束点(也可以称为占比环形图中的显示结束角度)。

步骤808：确定第一半圆弧的绘制次序为第一次序，并确定第二半圆弧的绘制次序为最后次序。

为了实现占比环形图中各个圆弧首尾相接的效果，电子设备可以设置第一半圆弧的绘制次序为第一次序，并确定第二半圆弧的绘制次序为最后次序。

步骤809：基于第一半圆弧当前的绘制次序和每个圆弧的渐变偏移角，依次绘制第一半圆弧、环形图中除参考圆弧之外的剩余圆弧以及第二半圆弧，得到待展示的图像，并执行下述步骤822的操作。

作为一个示例，电子设备可以根据第一半圆弧当前的绘制次序，确定占比环形图中剩余圆弧的绘制次序，并根据剩余圆弧的绘制次序和每个圆弧的渐变偏移角，依次绘制第一半圆弧、环形图中除参考圆弧之外的剩余圆弧以及第二半圆弧，得到待展示的图像。

示例性地，参见图12中的(a)图，在占比环形图中包括5个圆弧的情况下，若参考圆弧为圆弧3，则电子设备可以先绘制圆弧3的第一半圆弧A，然后参见图12中的(b)图，电子设备依次绘制圆弧2、圆弧1、圆弧5和圆弧4，最后，参见图12中的(c)图，电子设备绘制圆弧3的第二半圆弧B，得到待展示的图像，该待展示的图像中，各个圆弧的首尾相接。该图12中的(c)图中的占比环形图可以为上述图5所示的占比环形图。

步骤810：判断当前已绘制的圆弧的绘制占比值是否大于或等于目标占比值，若否，则依次执行下述步骤811-步骤815的操作，直至在检测到当前已绘制的圆弧的占比值大于或等于目标占比值的情况下，执行下述步骤816的操作。

由于在总占比值大于或等于目标占比值，且最大圆弧的占比值同样大于或等于目标占比值得情况下，该占比环形图中不仅是在绘制起始点处发生颜色跳变问题，在占比环形图的绘制结束点处同样易发生颜色跳变问题。通过上述步骤802-步骤809所描述的方式已不能解决占比环形图的绘制结束点发生的颜色跳变问题。示例性地，在总占比值和最大圆弧的占比值均大于或等于目标占比值的情况下，若电子设备采用上述步骤802-步骤809的方式绘制待展示的图像，那么在占比环形图中包括2个圆弧，且圆弧2当前的占比值大于或等于目标占比值的情况下，圆弧2在被分割前的状态可以如图13中的(a)图所示，该图13中的(a)图中，圆弧2的绘制起始笔迹与绘制结束笔迹相融合，导致发生颜色跳变。该种情况下，就算对圆弧2进行分割，分割后的第二半圆弧如图13中的(b)图所示，该第二半圆弧中的颜色依然发生跳变，就算按照上述方式分段进行绘制，由于第一半圆弧和第二半圆弧的绘制范围未发生变化，导致对占比环形图绘制后，得到的如图13中的(c)图所示的待展示的图像中，占比环形图中依然存在颜色跳变情况。因此，在最大圆弧的占比值大于或等于目标占比值的情况下，电子设备需要通过与上述不同的方式解决颜色跳变问题。即电子设备在大圆弧的占比值大于或等于目标占比值的情况下，可以判断当前已绘制的圆弧的绘制占比值是否大于或等于目标占比值。

作为一个示例，在总占比值和最大圆弧的占比值均大于或等于目标占比值的情况下，若当前已绘制的圆弧的绘制占比值小于目标占比值，则占比环形图的绘制起始点处易发生颜色跳变问题，因此，电子设备可以依次执行下述步骤811-步骤815的操作，并在执行步骤811-步骤815的操作的过程中，检测当前已绘制的圆弧的占比值是否大于或等于目标占比值，并在检测到当前已绘制的圆弧的占比值大于或等于目标占比值的情况下，执行下述步骤816的操作。

步骤811：确定最大圆弧在待展示的图像中的渐变偏移角。

作为一个示例，电子设备可以根据绘制占比环形图的圆头画笔的画笔半径和环形图的绘制半径，确定最大圆弧的渐变偏移角。也即是，电子设备可以根据上述第一公式确定最大圆弧的渐变偏移角，本申请实施例对此不再进行一一赘述。

步骤812：基于每个圆弧的当前已绘制的占比值，确定最大圆弧在待展示的图像中的第三半圆弧的绘制范围和第四半圆弧的绘制范围。

需要说明的是，在占比环形图中所有圆弧的总占比值和最大圆弧的占比值均大于或等于目标占比值，且当前已绘制的圆弧的绘制占比值小于目标占比值的情况下，电子设备可以不对最大圆弧进行分割，但是需要确定最大圆弧在待展示的图像中第三半圆弧的绘制范围和第四半圆弧的绘制范围。

作为一个示例，电子设备基于每个圆弧的当前已绘制的占比值，确定最大圆弧的第三半圆弧的绘制范围和第四半圆弧的绘制范围的操作包括：基于每个圆弧的预设占比值，确定每一帧图像中每个圆弧的增长比例；基于每个圆弧的当前已绘制的占比值和增长比例，确定最大圆弧在待展示的图像中的占比值；根据占比环形图的绘制起始点和最大圆弧在待展示的图像中的占比值，确定最大圆弧在待展示的图像中的绘制结束点；根据最大圆弧在待展示的图像中的绘制结束点和最大圆弧的渐变偏移角，确定第四半圆弧的绘制起始点；将占比环形图的绘制起始点与最大圆弧的中点位置确定为第三半圆弧的绘制范围，并将最大圆弧的绘制结束点确定为第四半圆弧的绘制结束点，第三半圆弧和第四半圆弧构成最大圆弧，且第三半圆弧和第四半圆弧部分重叠。

作为一个示例，电子设备可以根据当前已绘制的占比值，确定最大圆弧在待展示的图像中的中点位置。

由于绘制动画具有回弹效果，即在显示占比环形图的过程中，若当前绘制的每个圆弧的占比值达到预设占比值，该绘制动画不会停止，绘制笔迹会继续按照顺时针方向向占比环形图的绘制起始点处延伸，并在达到显示的最远位置后，绘制笔迹回弹至占比环形图的显示结束点。因此，电子设备在确定第四半圆弧的绘制起始点时，还可以确定最大圆弧在待展示的图像中的绘制笔迹显示的最远位置，且该显示至最远位置时的占比值小于目标占比值，而最大圆弧的绘制笔迹显示的最远位置通常比最大圆弧的显示结束点远一个渐变偏移角，因此，该最大圆弧的绘制笔迹显示的最远位置为最大圆弧的显示结束点加上一个渐变偏移角后得到的位置。

作为一个示例，电子设备可以根据最大圆弧在待展示的图像中的绘制笔迹显示的最远位置和渐变偏移角确定第四半圆弧的绘制起始点，或者，根据最大圆弧在待展示的图像中的绘制结束点和渐变偏移角确定第四半圆弧的绘制起始点。

作为一个示例，电子设备可以根据最大圆弧的绘制笔迹显示的最远位置和渐变偏移角，通过下述第四公式(4)确定第四半圆弧的绘制起始点，或者，根据最大圆弧的显示结束点和渐变偏移角，通过下述第五公式(5)确定第四半圆弧的绘制起始点。

seconStartAngle＝furthestAngle+α-360° (4)

secondStartAngle＝endAngle1+2α-360° (5)

需要说明的是，在上述第四公式(4)中，seconStartAngle为第四半圆弧的绘制起始点，furthestAngle为最大圆弧的绘制笔迹显示的最远位置(通过对应的角度进行表示)，α为第三半圆弧的渐变偏移角，在上述第五公式(5)中，endAngle1为最大圆弧的显示结束点。

步骤813：基于第四半圆弧的绘制范围，确定第四半圆弧的渐变起始位置。

在一些实施例中，因绘制动画具有回弹效果，因此，第四半圆弧的显示结束点最多会向最大圆弧的绘制起始点偏移2个显示偏移角，因此，可以确定第四半圆弧的渐变起始位置为为2倍的显示偏移角(若显示偏移角与渐变偏移角相同，则为2倍的渐变偏移角)。示例性地，在显示偏移角为上述确定的α的情况下，该第四半圆弧的渐变起始位置为2α。

步骤814：根据最大圆弧的绘制起始点、最大圆弧的渐变偏移角和第四半圆弧的绘制起始点，确定第三半圆弧的渐变起始位置。

为了在当前已绘制的绘制占比值大于或等于目标占比值和绘制占比值小于目标占比值的两种情况下，占比环形图的渐变情况具有一致性，也即是为了使发生渐变的位置不发生突变，电子设备可以根据最大圆弧的绘制起始点、最大圆弧的渐变偏移角和第四半圆弧的绘制起始点，确定第三半圆弧的颜色显示进度值，根据颜色显示进度值，确定第三半圆弧的渐变起始位置。或者，电子设备也可以根据其他方式确定第三半圆弧的颜色显示进度值，比如，电子设备根据最大圆弧当前的占比值和渐变偏移角，确定第三半圆弧的颜色显示进度值。

作为一个示例，电子设备可以根据最大圆弧的绘制起始点、最大圆弧的渐变偏移角和第四半圆弧的绘制起始点，通过下述第六公式(6)确定第三半圆弧的颜色显示进度值。或者，电子设备可以根据最大圆弧当前的占比值和渐变偏移角，通过下述第七公式(7)确定第三半圆弧的颜色显示进度值。

startChangePercent＝((secondStartAngle+2α)-(startAngle1-α))/360°*100(6)

startChangePercent＝(currentPercent/100％*360°-360°+6α)/360°*100％(7)

需要说明的是，在上述第六公式(6)中，startChangePercent为从第三半圆弧的显示起始点起第三半圆弧的颜色显示进度值，secondStartAngle为第四半圆弧的绘制起始位置，startAngle1为最大圆弧的显示起始点，α为最大圆弧的渐变偏移角。在上述第七公式(7)中，currentPercent为最大圆弧当前的占比值。

步骤815：基于最大圆弧的渐变偏移角和第三半圆弧的渐变起始位置，或者，基于最大圆弧的渐变偏移角和第四半圆弧的渐变起始位置，绘制待展示的图像。

由于第三半圆弧的渐变起始位置和第四半圆弧的渐变起始位置在最大圆弧中是同一个位置，因此，电子设备可以基于最大圆弧的渐变偏移角和第三半圆弧的渐变起始位置，绘制待展示的图像，也可以基于最大圆弧的渐变偏移角和第四半圆弧的渐变起始位置，绘制待展示的图像。

作为一个示例，电子设备在绘制最大圆弧的过程中，以最大圆弧的渐变偏移角对最大圆弧的绘制起始点的颜色逆时针进行偏移，并且将第四半圆弧的渐变起始位置作为最大圆弧的渐变起始位置，或者，将第三半圆弧的渐变起始位置作为最大圆弧的渐变起始位置，以在该渐变起始位置开始进行颜色的渐变操作。

步骤816：基于每个圆弧的当前已绘制的占比值，对最大圆弧进行分割，得到第三半圆弧和第四半圆弧。

由于在绘制占比值和占比环形图中最大圆弧的占比值均大于或等于目标占比值的情况下，占比环形图的绘制结束点会发生颜色跳变的情况，需要将最大圆弧进行分段绘制，因此，需要将最大圆弧进行分割。

作为一个示例，电子设备可以根据每个圆弧的当前已绘制的占比值，确定最大圆弧的中点位置、最大圆弧的显示起始点和绘制笔迹显示的最远位置，根据最大圆弧的中点位置、最大圆弧的显示起始点和绘制笔迹显示的最远位置，将最大圆弧分割为第三半圆弧和第四半圆弧，第三半圆弧的分割范围为最大圆弧的显示起始点与中点位置之间的范围，第四半圆弧的分割范围为最大圆弧的中点位置与最大圆弧的绘制笔迹显示的最远位置之间的范围。

示例性地，参见图14中的(a)图，电子设备可以确定最大圆弧的中点位置为centerAngle1，确定最大圆弧的显示起始点为startAngle1，确定最大圆弧的绘制笔迹显示的最远位置为furthestAngle。电子设备对最大圆弧进行分割后，得到如图14中的(b)图所示的第三半圆弧和四半圆弧，其中，第三半圆弧的分割范围path3为[startAngle1，centerAngle1]，第四半圆弧的分割范围path4为[centerAngle1，furthestAngle]。

作为一个示例，若绘制占比值和环形图中最大圆弧的占比值均大于或等于目标占比值，则电子设备在基于每个圆弧的当前已绘制的占比值，对最大圆弧进行分割之前，还可以通过上述第一公式确定最大圆弧的渐变偏移角，并将最大圆弧的渐变偏移角确定为第三半圆弧的渐变偏移角和第四半圆弧的渐变偏移角。

步骤817：基于第三半圆弧的分割位置确定第三半圆弧的绘制范围，并基于第四半圆弧的分割位置确定第四半圆弧的绘制范围。

作为一个示例，电子设备可以将最大圆弧的绘制起始点确定为第三半圆弧的绘制起始点，将最大圆弧的中点位置确定为第三半圆弧的绘制结束点；电子设备可以根据上述第四公式或第五公式确定第四半圆弧的绘制起始点，并将最大圆弧的绘制结束点确定为第四半圆弧的绘制结束点。

需要说明的是，电子设备确定第三半圆弧的分割范围和第四半圆弧的分割范围的方式可以参考上述步骤812的操作，本申请实施例对此不再进行一一赘述。

示例性地，参见图14中的(d)图，第三半圆弧的绘制范围为[startAngle1+α,centerAngle1]，第四半圆弧的绘制范围为[secondStartAngle，endAngle1-α]。

步骤818：基于第四半圆弧的绘制范围，确定第四半圆弧的渐变起始位置，并根据最大圆弧的绘制起始点、最大圆弧的渐变偏移角和第四半圆弧的绘制起始点，确定第三半圆弧的渐变起始位置。

作为一个示例，电子设备可以根据最大圆弧的绘制起始点、最大圆弧的渐变偏移角和第四半圆弧的绘制起始点，根据上述第六公式确定第三半圆弧的渐变起始位置。或者，电子设备按照其他方式确定第三半圆弧的渐变起始位置，比如，电子设备按照上第七公式(7)的方式确定第三半圆弧的渐变起始位置。另外，电子设备还可以基于第四半圆弧的绘制范围，通过上述步骤813的方式确定第四半圆弧的渐变起始位置，本申请实施例对此不再进行一一赘述。

步骤819：根据第三半圆弧的渐变偏移角、渐变起始位置和绘制范围绘制第三半圆弧。

作为一个示例，电子设备可以将第三半圆弧的绘制次序确定为第一次序，并根据第三半圆弧的绘制次序、渐变偏移角、渐变起始位置和绘制范围绘制第三半圆弧。

示例性地，电子设备根据第三半圆弧的渐变偏移角α和绘制范围为[startAngle+α，centerAngle]，渐变起始位置为占比为startChangePercent时对应的位置绘制得到如图15中的(a)图所示的第三半圆弧C。

步骤820：在第三半圆弧绘制完成的情况下，绘制占比环形图中除最大圆弧之外的其他圆弧。

作为一个示例，若占比环形图中除最大圆弧之外存在一个其他圆弧，则直接绘制其他圆弧。若还存在多个其他圆弧，则电子设备可以根据第三半圆弧的绘制次序，确定占比环形图中除最大圆弧之外的多个其他圆弧的绘制顺序，按照绘制顺序依次绘制多个其他圆弧。

示例性地，参见图15中的(b)图，在占比环形图中除最大圆弧1之外存在一个圆弧2的情况下，绘制圆弧2，得到如图15中的(b)图所示的图像。

步骤821：在其他圆弧绘制完成的情况下，根据第四半圆弧的渐变偏移角、渐变起始位置和绘制范围，绘制第四半圆弧，得到待展示的图像。

示例性地，若第四半圆弧的渐变偏移角为α，渐变起始位置为2α，绘制范围为[secondStartAngle，endAngle1-α]，则电子设备可以绘制第四半圆弧D，得到如图15中的(c)图所示的待展示的图像。

步骤822：展示待展示的图像，以展示占比环形图的绘制动画。

作为一个示例，电子设备每得到一个待展示的图像，即可显示该待展示的图像，从而在待展示的图像较多的情况下，形成占比环形图的绘制动画，实现占比环形图的动态增长效果。

步骤823：在展示绘制动画结束后，显示占比环形图。

在本申请实施例中，在需要显示环形图的情况下，电子设备可以展示环形图的绘制动画，且在展示环形图的绘制动画的过程中，若当前已绘制的圆弧的绘制占比值小于一定的占比值，则在每一次绘制待展示的图像时，可以设置一个渐变偏移角，该渐变偏移角可以使绘制的圆弧的颜色发生偏移，从而使圆弧的颜色从显示起始点开始显示，解决了圆弧的绘制起始点处发生的颜色跳变的问题。另外，在展示环形图的过程中，若当前已绘制的圆弧的绘制占比值达到一定的占比，那么可以将当前占比值最大的最大圆弧分成两段进行绘制，也即可以将两个半圆弧视为两个不同的个体，由于对于两个不同个体各自具有不同的绘制参数，所以后半段圆弧按照自身的绘制参数进行绘制后，即使后半段圆弧的绘制结束笔迹覆盖在前半段圆弧上，也因与前半段圆弧的绘制参数不同，而不会受到前半段圆弧的绘制参数的影响，从而不会发生颜色跳变的情况，进而提升了环形图的显示效果。

上述以环形图为占比环形图为例进行说明，接下来再以环形图为进度环形图为例进行说明。请参考图16，图16是根据另一示例性实施例示出的一种环形图的显示方法流程示意图，且图16中是以进度环形图为例进行说明。作为示例而非限定，这里以该方法应用于电子设备中为例进行说明，该方法可以包括如下部分或者全部内容：

步骤1601：响应于对进度环形图的显示操作，获取进度环形图中所有圆弧的总占比值。

需要说明的是，由于进度环形图中存在一个进度圆弧，该进度圆弧的占比值即为进度环形图中的总占比值。因此，获取进度圆弧的占比值即为获取进度环形图中所有圆弧的总占比值。

步骤1602：判断总占比值是否大于或等于目标占比值；若是，则执行下述步骤1605的操作，若否，则执行下述步骤1603-步骤1604的操作。

步骤1603：根据圆头画笔的半径和占比环形图的半径确定每个圆弧的渐变偏移角。

步骤1604：基于渐变偏移角绘制待展示的图像，并执行下述步骤1618的操作，直至绘制动画展示完成。

步骤后1601-步骤1604的操作可以参考上述步骤801-804的操作。

步骤1605：判断当前已绘制的进度圆弧的绘制占比值是否大于或等于目标占比值；若否，则依次执行下述步骤1606-步骤1610的操作，直至在检测到当前已绘制的圆弧的占比值大于或等于目标占比值的情况下，执行下述步骤1611的操作。

步骤1606：确定最大圆弧在待展示的图像中的渐变偏移角。

需要说明的是，由于进度环形图中存在一个进度圆弧，该进度圆弧即为进度环形图中的最大圆弧。

步骤1607：基于每个圆弧的当前已绘制的占比值，确定最大圆弧在待展示的图像中的第三半圆弧的绘制范围和第四半圆弧的绘制范围。

作为一个示例，电子设备基于每个圆弧的当前已绘制的占比值，确定最大圆弧在待展示的图像中的第三半圆弧的绘制范围和第四半圆弧的绘制范围，包括：基于进度圆弧的当前已绘制的占比值，确定进度圆弧在待展示的图像中的占比值；根据进度圆弧的绘制起始点和进度圆弧在待展示的图像中的占比值，确定进度圆弧在待展示的图像中的绘制结束点；根据进度圆弧在待展示的图像中的绘制结束点和进度圆弧的渐变偏移角，确定第四半圆弧的绘制起始点；将环形图的绘制起始点与进度圆弧的中点位置确定为第三半圆弧的绘制范围，并将进度圆弧的绘制结束点确定为第四半圆弧的绘制结束点，第三半圆弧和第四半圆弧构成进度圆弧，且第三半圆弧和第四半圆弧部分重叠。

步骤1606-步骤1610的操作可以参考上述步骤811-步骤815的操作，本申请实施例对此不再进行一一赘述。

步骤1611-步骤-步骤1618的操作可以参考上述步骤步骤后816-步骤823的操作。

示例性地，在对进度圆弧进行分割后，若进度圆弧的第三半圆弧C的渐变偏移角为α，渐变起始位置为占比值为startChangePercent对应的位置，绘制范围为[startAngle1+α,centerAngle1]，则电子设备根据第三半圆弧的渐变偏移角、渐变起始位置和绘制范围为[startAngle1+α,centerAngle1]，绘制得到如图17中的(a)图所示的第三半圆弧，若第四半圆弧的渐变偏移角为α，渐变起始位置为2α，绘制范围为[secondStartAngle，endAngle1-α]，则电子设备可以绘制第四半圆弧D，得到如图17中的(b)图所示的待展示的图像。

在本申请实施例中，在需要显示环形图的情况下，电子设备可以展示环形图的绘制动画，且在展示环形图的绘制动画的过程中，若当前已绘制的圆弧的绘制占比值小于一定的占比值，则在每一次绘制待展示的图像时，可以设置一个渐变偏移角，该渐变偏移角可以使绘制的圆弧的颜色发生偏移，从而使圆弧的颜色从显示起始点开始显示，解决了圆弧的绘制起始点处发生的颜色跳变的问题。另外，在展示环形图的过程中，若当前已绘制的圆弧的绘制占比值达到一定的占比，那么可以将当前占比值最大的最大圆弧分成两段进行绘制，也即可以将两个半圆弧视为两个不同的个体，由于对于两个不同个体各自具有不同的绘制参数，所以后半段圆弧按照自身的绘制参数进行绘制后，即使后半段圆弧的绘制结束笔迹覆盖在前半段圆弧上，也因与前半段圆弧的绘制参数不同，而不会受到前半段圆弧的绘制参数的影响，从而不会发生颜色跳变的情况，进而提升了环形图的显示效果。

接下来，请参考图18，图18是根据另一示例性实施例示出的一种环形图的显示方法流程示意图。作为示例而非限定，该方法应用于电子设备中，且该方法可以包括如下部分或者全部内容：

步骤1801：响应于对色彩渐变的环形图的显示操作，展示环形图对应的绘制动画。

需要说明的是，绘制动画为展示环形图包括的每个圆弧的占比值由0增长至对应的预设占比值的过程的动画。

由于无论是占比环形图还是进度环形图，该环形图中每个圆弧在环形图中的最终呈现的占比值是固定的，因此，绘制动画可以展示每个圆弧的占比值由0增长值预设占比值的过程。

步骤1802：在展示绘制动画的过程中，若当前已绘制的圆弧的绘制占比值小于目标占比值，则基于环形图中至少一个圆弧的渐变偏移角绘制待展示的图像。

需要说明的是，该渐变偏移角用于指示每个圆弧的绘制起始点颜色发生偏移的弧度范围，即，该渐变偏移角可以指示圆弧的颜色显示位置发生偏移，从而使圆弧的颜色从显示起始点开始显示，而不是从绘制起始点开始显示。该目标占比值是基于用于绘制圆弧的圆头画笔的半径与所述环形图的半径确定。

由于无论是占比环形图还是进度环形图，环形图中每个圆弧的占比值都是由0增长至对应的预设占比值，如此，当前已绘制的圆弧的占比值也是由0增长值100％，或者增长至更多的占比。那么当前已绘制的占比值必然存在由小于目标占比值到大于或等于目标占比值的过程，且在当前已绘制的占比值小于目标占比值的情况下，电子设备可以基于环形图中至少一个圆弧的渐变偏移角绘制待展示的图像，该渐变偏移角为在绘制过程中确定的渐变偏移角。

作为一个示例，电子设备在展示绘制动画的过程中，若当前已绘制的圆弧的绘制占比值小于目标占比值，则基于环形图中至少一个圆弧的渐变偏移角绘制待展示的图像之前，若环形图中所有圆弧的总占比值小于目标占比值，或者，在环形图为占比环形图的情况下，若总占比值大于或等于目标占比值，且最大圆弧的占比值小于目标占比值，则获取圆头画笔的半径和环形图的半径；根据圆头画笔的半径和环形图的半径确定每个圆弧的渐变偏移角。

需要说明的是，电子设备根据圆头画笔的半径和环形图的半径确定每个圆弧的渐变偏移角的操作可以参考上述步骤803的操作，本申请实施例对此不再进行一一赘述。

值得说明的是，通过圆头画笔的半径和环形图的半径确定每个圆弧的渐变偏移角，可以在每个圆弧的显示起始点与绘制起始点不同的情况下，使得每个圆弧的颜色从显示起始点开始显示，解决了绘制起始点处发生的颜色跳变的问题，提升绘制起始点处的显示效果。

在一些实施例中，若在展示绘制动画的过程中，在环形图为占比环形图的情况下，若绘制占比值大于或等于目标占比值，且最大圆弧的占比值小于目标占比值，则基于每个圆弧的预设占比值，对参考圆弧进行分割，得到参考圆弧的第一半圆弧和第二半圆弧，该参考圆弧为环形图中任意一个圆弧；确定第一半圆弧的绘制次序为第一次序，并确定第二半圆弧的绘制次序为最后次序；基于第一半圆弧当前的绘制次序和每个圆弧的渐变偏移角，依次绘制第一半圆弧、环形图中除参考圆弧之外的剩余圆弧以及第二半圆弧，得到待展示的图像。

值得说明的是，通过分段绘制参考圆弧，使得第二半圆弧为最后绘制的一个半圆弧，由于第二半圆弧一端与第一半圆弧相融合，第二半圆弧的另一端的绘制笔迹显示在环形图的上方，从而实现了环形图中各个圆弧的绘制笔迹首尾相连的效果，提升了环形图的显示效果。

在一些实施例中，电子设备基于每个圆弧的预设占比值，对参考圆弧进行分割，得到参考圆弧第一半圆弧和第二半圆弧的操作包括：根据每个圆弧的预设占比值，确定每个圆弧在待展示的图像中的增长比例；根据每个圆弧在绘制占比值中的占比值和增长比例，确定参考圆弧在待展示的图像中的占比值，以及待展示的图像中环形图的绘制起始点至参考圆弧的绘制起始点之间的圆弧的第一占比值；根据第一占比值和参考圆弧在待展示的图像中的占比值，确定待展示的图像中参考圆弧的绘制起始点和绘制结束点；根据参考圆弧的绘制起始点和绘制结束点，确定参考圆弧在待展示的图像中的中点位置；将参考圆弧从中点位置进行分割，得到第一半圆弧和第二半圆弧，第一半圆弧的绘制起始点为参考圆弧的绘制起始点，第一半圆弧的绘制结束点为参考圆弧的中点位置，第二半圆弧的绘制起始点为参考圆弧的中点位置，第二半圆弧的绘制结束点为参考圆弧的绘制结束点。

需要说明的是，电子设备基于每个圆弧的预设占比值，对参考圆弧进行分割，得到参考圆弧第一半圆弧和第二半圆弧的操作的具体说明可以参考上述步骤807的操作。电子设备基于第一半圆弧当前的绘制次序和每个圆弧的渐变偏移角，依次绘制第一半圆弧、环形图中除参考圆弧之外的剩余圆弧以及第二半圆弧，得到待展示的图像的操作可以参考上述步骤809的操作，本申请实施例对此不再进行一一赘述。

值得说明的是，通过每个圆弧在绘制占比值中的占比值和增长比例，确定第一占比值，能够准确地确定参考圆弧在待展示的图像中的绘制起始点，从而提高了确定每个圆弧的位置的准确性，进而提高了绘制环形图中每个圆弧的准确性。

在一些实施例中，若环形图中所有圆弧的总占比值和最大圆弧的占比值均大于或等于目标占比值，则电子设备不仅需要确定最大圆弧的渐变偏移，同时，为了使后续发生渐变的位置不发生突变，电子设备还需要确定最大圆弧的渐变起始位置。

作为一个示例，电子设备可以根据绘制占比环形图的圆头画笔的画笔半径和环形图的绘制半径，确定最大圆弧的渐变偏移角。也即是，电子设备可以根据上述第一公式确定最大圆弧的渐变偏移角，本申请实施例对此不再进行一一赘述。

作为一个示例，若环形图中所有圆弧的总占比值和最大圆弧的占比值均大于或等于目标占比值，则电子设备可以基于每个圆弧的当前已绘制的占比值，确定最大圆弧在待展示的图像中的第三半圆弧的绘制范围和第四半圆弧的绘制范围；基于第四半圆弧的绘制范围，确定第四半圆弧的渐变起始位置，该渐变起始位置为开始发生颜色渐变的位置；根据最大圆弧的绘制起始点、最大圆弧的渐变偏移角和第四半圆弧的绘制起始点，确定第三半圆弧的渐变起始位置；基于最大圆弧的渐变偏移角和第三半圆弧的渐变起始位置，或者，基于最大圆弧的渐变偏移角和第四半圆弧的渐变起始位置，绘制待展示的图像。

需要说明的是，电子设备确定第三半圆弧的渐变起始位置和第四半圆弧的渐变起始位置的操作可以参考上述步骤813和步骤814的操作，电子设备基于最大圆弧的渐变偏移角和第三半圆弧的渐变起始位置，或者，基于最大圆弧的渐变偏移角和第四半圆弧的渐变起始位置，绘制待展示的图像的操作可以参考上述步骤815的操作，本申请实施例对此不再进行一一赘述。

值得说明的是，通过设置第三半圆弧和第四半圆弧的渐变起始位置，使得绘制环形图的过程中，在环形图的绘制方式发生变化的情况下，显示的绘制动画中渐变色发生位置一致，渐变色不发生突变，提高了绘制动画的流畅性。

由于环形图可能为占比环形图，也可能为进度环形图，在环形图的类型不同的情况下，电子设备基于每个圆弧的当前已绘制的占比值，确定最大圆弧的第三半圆弧的绘制范围和第四半圆弧的绘制范围的操作也不同。

在一种可能的情况下，若环形图为占比环形图，则电子设备基于每个圆弧的当前已绘制的占比值，确定最大圆弧在待展示的图像中的第三半圆弧的绘制范围和第四半圆弧的绘制范围的操作包括：基于每个圆弧的预设占比值，确定每一帧图像中每个圆弧的增长比例；基于每个圆弧的当前已绘制的占比值和增长比例，确定最大圆弧在待展示的图像中的占比值；根据环形图的绘制起始点和最大圆弧在待展示的图像中的占比值，确定最大圆弧在待展示的图像中的绘制结束点；根据最大圆弧在待展示的图像中的绘制结束点和最大圆弧的渐变偏移角，确定第四半圆弧的绘制起始点；将环形图的绘制起始点与最大圆弧的中点位置确定为第三半圆弧的绘制范围，并将最大圆弧的绘制结束点确定为第四半圆弧的绘制结束点，第三半圆弧和第四半圆弧构成最大圆弧，且第三半圆弧和第四半圆弧部分重叠。

值得说明的是，通过每个圆弧在每一帧图像中的增长比例，确定最大圆弧在待展示图像中的占比值，提高了确定最大圆弧在待展示图像中的占比值的准确性，进而提高了确定第三半圆弧和第四半圆弧绘制范围的准确性。

在另一种可能的情况下，若环形图为进度环形图，则该进度环形图中包括的进度圆弧的数量为1，进度圆弧为进度环形图中表示当前进度的圆弧；电子设备基于每个圆弧的当前已绘制的占比值，确定最大圆弧在待展示的图像中的第三半圆弧的绘制范围和第四半圆弧的绘制范围的操作包括：基于进度圆弧的当前已绘制的占比值，确定进度圆弧在待展示的图像中的占比值；根据进度圆弧的绘制起始点和进度圆弧在待展示的图像中的占比值，确定进度圆弧在待展示的图像中的绘制结束点；根据进度圆弧在待展示的图像中的绘制结束点和进度圆弧渐变偏移角，确定第四半圆弧的绘制起始点；将环形图的绘制起始点与进度圆弧的中点位置确定为第三半圆弧的绘制范围，并将进度圆弧的绘制结束点确定为第四半圆弧的绘制结束点，第三半圆弧和第四半圆弧构成进度圆弧，且第三半圆弧和第四半圆弧部分重叠。

值得说明的是，通过设置第三半圆弧和第四半圆弧部分重叠，可以使第三半圆弧和第三半圆弧更好的融合在一起构成最大圆弧，从而不仅解决了颜色跳变问题，同时提升了最大圆弧的显示效果。

需要说明的是，电子设备基于每个圆弧的当前已绘制的占比值，确定最大圆弧在待展示的图像中的第三半圆弧的绘制范围和第四半圆弧的绘制范围的操作可以参考上述步骤812的操作，本申请实施例对此不再进行一一赘述。

步骤1803：若绘制占比值和环形图中最大圆弧的占比值均大于或等于目标占比值，则基于环形图中的最大圆弧的两个半圆弧中每个半圆弧的绘制范围和渐变偏移角，分段绘制最大圆弧，得到待展示的图像。

需要说明的是，两个半圆弧是对最大圆弧分割后确定，两个半圆弧的绘制范围为基于分割位置重新确定，且两个半圆弧存在部分重合。

作为一个示例，若绘制占比值和最大圆弧的占比值均大于或等于目标占比值，则基于每个圆弧的当前已绘制的占比值，对最大圆弧进行分割，得到第三半圆弧和第四半圆弧；基于第三半圆弧的分割位置确定第三半圆弧的绘制范围，并基于第四半圆弧的分割位置确定第四半圆弧的绘制范围；基于第四半圆弧的绘制范围，确定第四半圆弧的渐变起始位置，并根据最大圆弧的绘制起始点、第三半圆弧的渐变偏移角和第四半圆弧的绘制起始点，确定第三半圆弧的渐变起始位置；根据第三半圆弧的渐变偏移角、渐变起始位置和绘制范围绘制第三半圆弧；在第三半圆弧绘制完成的情况下，绘制环形图中除最大圆弧之外的其他圆弧；在其他圆弧绘制完成的情况下，根据第四半圆弧的渐变偏移角、渐变起始位置和绘制范围，绘制第四半圆弧，得到待展示的图像。

需要说明的是，电子设备基于环形图中的最大圆弧的两个半圆弧中每个半圆弧的绘制范围、渐变偏移角和渐变起始位置，分段绘制最大圆弧，得到待展示的图像的操作可以参考上述步骤819-步骤821的操作，本申请实施例同样对此不再进行一一赘述。

值得说明的是，通过将当前占比值最大的最大圆弧分成两段进行绘制，且两个半圆弧的绘制范围和渐变偏移角都不同，由于两个半圆弧的绘制范围和绘制顺序发生了变化，从而后半段圆弧的绘制结束笔迹覆盖在前半段圆弧上，也不会发生颜色跳变的情况，进而提升了环形图的显示效果。

步骤1804：展示待展示的图像。

作为一个示例，电子设备每得到一个待展示的图像，即可显示该待展示的图像，从而在待展示的图像较多的情况下，形成占比环形图的绘制动画，实现占比环形图的动态增长效果。

在本申请实施例中，在需要显示环形图的情况下，电子设备可以展示环形图的绘制动画，且在展示环形图的绘制动画的过程中，若当前已绘制的圆弧的绘制占比值小于一定的占比值，则在每一次绘制待展示的图像时，可以设置一个渐变偏移角，该渐变偏移角可以使绘制的圆弧的颜色发生偏移，从而使圆弧的颜色从显示起始点开始显示，解决了圆弧的绘制起始点处发生的颜色跳变的问题。另外，在展示环形图的过程中，若当前已绘制的圆弧的绘制占比值达到一定的占比，那么可以将当前占比值最大的最大圆弧分成两段进行绘制，也即可以将两个半圆弧视为两个不同的个体，由于对于两个不同个体各自具有不同的绘制参数，所以后半段圆弧按照自身的绘制参数进行绘制后，即使后半段圆弧的绘制结束笔迹覆盖在前半段圆弧上，也因与前半段圆弧的绘制参数不同，而不会受到前半段圆弧的绘制参数的影响，从而不会发生颜色跳变的情况，进而提升了环形图的显示效果。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意结合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机指令时，全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络或其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，比如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(比如：同轴电缆、光纤、数据用户线(Digital Subscriber Line，DSL))或无线(比如：红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质，或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质(比如：软盘、硬盘、磁带)、光介质(比如：数字通用光盘(Digital Versatile Disc，DVD))或半导体介质(比如：固态硬盘(Solid State Disk，SSD))等。

以上所述为本申请提供的可选实施例，并不用以限制本申请，凡在本申请的揭露的技术范围之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (10)

1.一种环形图的显示方法，其特征在于，应用于电子设备中，所述方法包括：

响应于对色彩渐变的环形图的显示操作，展示所述环形图对应的绘制动画，所述绘制动画为展示所述环形图包括的每个圆弧的占比值由0增长至对应的预设占比值的过程的动画；

在展示所述绘制动画的过程中，若当前已绘制的圆弧的绘制占比值小于目标占比值，则基于所述环形图中至少一个圆弧的渐变偏移角绘制待展示的图像，所述渐变偏移角用于指示所述每个圆弧的绘制起始点颜色发生偏移的弧度范围，所述目标占比值是基于用于绘制圆弧的圆头画笔的半径与所述环形图的半径确定；

若所述绘制占比值和所述环形图中最大圆弧的占比值均大于或等于所述目标占比值，则基于所述环形图中的最大圆弧的两个半圆弧中每个半圆弧的绘制范围和渐变偏移角，分段绘制所述最大圆弧，得到待展示的图像，所述两个半圆弧是对所述最大圆弧分割后确定，所述两个半圆弧的绘制范围为基于分割位置重新确定；

展示所述待展示的图像。

2.如权利要求1所述的方法，其特征在于，所述在展示所述绘制动画的过程中，若当前已绘制的圆弧的绘制占比值小于目标占比值，则基于所述环形图中至少一个圆弧的渐变偏移角绘制待展示的图像之前，还包括：

若所述环形图中所有圆弧的总占比值小于所述目标占比值，或者，在所述环形图为占比环形图的情况下，若所述总占比值大于或等于所述目标占比值，且所述最大圆弧的占比值小于所述目标占比值，则获取所述圆头画笔的半径和所述环形图的半径；

根据所述圆头画笔的半径和所述环形图的半径确定所述每个圆弧的渐变偏移角。

3.如权利要求1或2所述的方法，其特征在于，所述响应于对色彩渐变的环形图的显示操作，展示对应的绘制动画之后，还包括：

在展示所述绘制动画的过程中，在所述环形图为所述占比环形图的情况下，若所述绘制占比值大于或等于所述目标占比值，且所述最大圆弧的占比值小于所述目标占比值，则基于所述每个圆弧的预设占比值，对参考圆弧进行分割，得到所述参考圆弧的第一半圆弧和第二半圆弧，所述参考圆弧为所述环形图中任意一个圆弧；

确定所述第一半圆弧的绘制次序为第一次序，并确定所述第二半圆弧的绘制次序为最后次序；

基于所述第一半圆弧当前的绘制次序和所述每个圆弧的渐变偏移角，依次绘制所述第一半圆弧、所述环形图中除所述参考圆弧之外的剩余圆弧以及所述第二半圆弧，得到待展示的图像。

4.如权利要求3所述的方法，其特征在于，所述基于所述每个圆弧的预设占比值，对参考圆弧进行分割，得到所述参考圆弧第一半圆弧和第二半圆弧，包括：

根据所述每个圆弧的预设占比值，确定所述每个圆弧在待展示的图像中的增长比例；

根据所述每个圆弧在所述绘制占比值中的占比值和所述增长比例，确定所述参考圆弧在所述待展示的图像中的占比值，以及所述待展示的图像中所述环形图的绘制起始点至所述参考圆弧的绘制起始点之间的圆弧的第一占比值；

根据所述第一占比值和所述参考圆弧在所述待展示的图像中的占比值，确定所述待展示的图像中所述参考圆弧的绘制起始点和绘制结束点；

根据所述参考圆弧的绘制起始点和绘制结束点，确定所述参考圆弧在所述待展示的图像中的中点位置；

将所述参考圆弧从所述中点位置进行分割，得到所述第一半圆弧和所述第二半圆弧，所述第一半圆弧的绘制起始点为所述参考圆弧的绘制起始点，所述第一半圆弧的绘制结束点为所述参考圆弧的中点位置，所述第二半圆弧的绘制起始点为所述参考圆弧的中点位置，所述第二半圆弧的绘制结束点为所述参考圆弧的绘制结束点。

5.如权利要求1所述的方法，其特征在于，所述在展示所述绘制动画的过程中，若当前已绘制的圆弧的绘制占比值小于目标占比值，则基于所述环形图中至少一个圆弧的渐变偏移角绘制待展示的图像之前，还包括：

若所述环形图中所有圆弧的总占比值和所述最大圆弧的占比值均大于或等于所述目标占比值，则基于所述每个圆弧的当前已绘制的占比值，确定所述最大圆弧在所述待展示的图像中的第三半圆弧的绘制范围和第四半圆弧的绘制范围；

基于所述第四半圆弧的绘制范围，确定第四半圆弧的渐变起始位置，所述渐变起始位置为开始发生颜色渐变的位置；

根据所述最大圆弧的绘制起始点、所述最大圆弧的渐变偏移角和所述第四半圆弧的绘制起始点，确定所述第三半圆弧的渐变起始位置；

基于所述最大圆弧的渐变偏移角和所述第三半圆弧的渐变起始位置，或者，基于所述最大圆弧的渐变偏移角和所述第四半圆弧的渐变起始位置，绘制待展示的图像。

6.如权利要求5所述的方法，其特征在于，所述环形图为占比环形图；

所述基于所述每个圆弧的当前已绘制的占比值，确定所述最大圆弧在所述待展示的图像中的第三半圆弧的绘制范围和第四半圆弧的绘制范围，包括：

基于所述每个圆弧的预设占比值，确定每一帧图像中所述每个圆弧的增长比例；

基于所述每个圆弧的当前已绘制的占比值和所述增长比例，确定所述最大圆弧在所述待展示的图像中的占比值；

根据所述环形图的绘制起始点和所述最大圆弧在所述待展示的图像中的占比值，确定所述最大圆弧在所述待展示的图像中的绘制结束点；

根据所述最大圆弧在所述待展示的图像中的绘制结束点和所述最大圆弧的渐变偏移角，确定所述第四半圆弧的绘制起始点；

将所述环形图的绘制起始点与所述最大圆弧的中点位置确定为所述第三半圆弧的绘制范围，并将所述最大圆弧的绘制结束点确定为所述第四半圆弧的绘制结束点，所述第三半圆弧和所述第四半圆弧构成所述最大圆弧，且所述第三半圆弧和所述第四半圆弧部分重叠。

7.如权利要求5所述的方法，其特征在于，在所述环形图为进度环形图的情况下，所述进度环形图中包括的进度圆弧的数量为1，所述进度圆弧为所述进度环形图中表示当前进度的圆弧；

所述基于所述每个圆弧的当前已绘制的占比值，确定所述最大圆弧在所述待展示的图像的第三半圆弧的绘制范围和第四半圆弧的绘制范围，包括：

基于所述进度圆弧的当前已绘制的占比值，确定所述进度圆弧在所述待展示的图像中的占比值；

根据所述进度圆弧的绘制起始点和所述进度圆弧在所述待展示的图像中的占比值，确定所述进度圆弧在所述待展示的图像中的绘制结束点；

根据所述进度圆弧在所述待展示的图像中的绘制结束点和所述进度圆弧的渐变偏移角，确定所述第四半圆弧的绘制起始点；

将所述环形图的绘制起始点与所述进度圆弧的中点位置确定为所述第三半圆弧的绘制范围，并将所述进度圆弧的绘制结束点确定为所述第四半圆弧的绘制结束点，所述第三半圆弧和所述第四半圆弧构成所述进度圆弧，且所述第三半圆弧和所述第四半圆弧部分重叠。

8.如权利要求1、5-7中任一项所述的方法，其特征在于，所述若所述绘制占比值和所述环形图中最大圆弧的占比值均大于或等于所述目标占比值，则基于所述环形图中的最大圆弧的两个半圆弧中每个半圆弧的绘制范围和渐变偏移角，分段绘制所述最大圆弧，得到待展示的图像，包括：

若所述绘制占比值和所述最大圆弧的占比值均大于或等于所述目标占比值，则基于所述每个圆弧的当前已绘制的占比值，对所述最大圆弧进行分割，得到所述第三半圆弧和所述第四半圆弧；

基于所述第三半圆弧的分割位置确定所述第三半圆弧的绘制范围，并基于所述第四半圆弧的分割位置确定所述第四半圆弧的绘制范围；

基于所述第四半圆弧的绘制范围，确定第四半圆弧的渐变起始位置，并根据所述最大圆弧的绘制起始点、所述第三半圆弧的渐变偏移角和所述第四半圆弧的绘制起始点，确定所述第三半圆弧的渐变起始位置；

根据所述第三半圆弧的渐变偏移角、渐变起始位置和绘制范围绘制所述第三半圆弧；

在所述第三半圆弧绘制完成的情况下，绘制所述环形图中除所述最大圆弧之外的其他圆弧；

在所述其他圆弧绘制完成的情况下，根据所述第四半圆弧的渐变偏移角、渐变起始位置和绘制范围，绘制所述第四半圆弧，得到所述待展示的图像。

9.一种电子设备，其特征在于，所述电子设备包括：处理器和存储器，所述存储器用于存储一个或多个程序，所述一个或多个程序包括指令，当所述处理器执行所述指令时，所述电子设备用于执行如权利要求1-8中任一项所述的环形图的显示方法。

10.一种计算机可读存储介质，用于存储一个或多个程序，其中所述一个或多个程序被配置为被一个或多个处理器执行，所述一个或多个程序包括指令，所述指令使得电子设备执行如权利要求1-8任一所述的环形图的显示方法。