【花雕学编程】Arduino动手做（249）--GC9A01模拟三色圆饼图

  【Arduino】189种传感器模块系列实验（资料代码+仿真编程+图形编程）
  实验二百四十九：1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
  项目之八十九：GC9A01园屏之动态模拟三色百分比圆饼图

实验开源代码

/*
  【Arduino】189种传感器模块系列实验（资料代码+仿真编程+图形编程）
  实验二百四十九：1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
  项目之八十九：GC9A01园屏之动态模拟三色百分比圆饼图
*/

//       GC9A01---------- ESP32
//       RST ------------ NC（复位引脚，此处未连接）
//       CS ------------- D4（片选引脚，连接到ESP32的D4引脚）
//       DC ------------- D2（数据/命令选择引脚，连接到ESP32的D2引脚）
//       SDA ------------ D23 (green)（主数据输出引脚，连接到ESP32的D23引脚，绿色线）
//       SCL ------------ D18 (yellow)（时钟信号引脚，连接到ESP32的D18引脚，黄色线）
//       GND ------------ GND（接地引脚，连接到ESP32的接地端）
//       VCC -------------3V3（电源引脚，连接到ESP32的3.3V电源）

#include "SPI.h"
#include "Adafruit_GFX.h"
#include "Adafruit_GC9A01A.h"
#include "math.h"

#define TFT_CS 4
#define TFT_DC 2
#define TFT_RST -1

Adafruit_GC9A01A tft = Adafruit_GC9A01A(TFT_CS, TFT_DC, TFT_RST);

#define SCREEN_WIDTH 240
#define SCREEN_HEIGHT 240
#define CENTER_X SCREEN_WIDTH / 2
#define CENTER_Y SCREEN_HEIGHT / 2
#define RADIUS 80  // **饼图半径**
#define SPEED 5  // **数据变化速度**

int data1 = 40;  // **数据块 1**
int data2 = 30;  // **数据块 2**
int data3 = 30;  // **数据块 3**

void drawSector(int startAngle, int endAngle, uint16_t color) {
    for (int angle = startAngle; angle < endAngle; angle += 3) {
        float radian1 = angle * M_PI / 180;
        float radian2 = (angle + 3) * M_PI / 180;
        int x1 = CENTER_X + RADIUS * cos(radian1);
        int y1 = CENTER_Y + RADIUS * sin(radian1);
        int x2 = CENTER_X + RADIUS * cos(radian2);
        int y2 = CENTER_Y + RADIUS * sin(radian2);
        tft.fillTriangle(CENTER_X, CENTER_Y, x1, y1, x2, y2, color);
    }
}

void setup() {
    Serial.begin(115200);
    tft.begin();
    tft.setRotation(2);
}

void loop() {
    tft.fillScreen(tft.color565(0, 0, 0));

    int total = data1 + data2 + data3;
    int angle1 = (data1 * 360) / total;
    int angle2 = (data2 * 360) / total;
    int angle3 = (data3 * 360) / total;

    drawSector(0, angle1, tft.color565(255, 0, 0));  // **红色数据块**
    drawSector(angle1, angle1 + angle2, tft.color565(0, 255, 0));  // **绿色数据块**
    drawSector(angle1 + angle2, 360, tft.color565(0, 0, 255));  // **蓝色数据块**

    // **显示数值**
    tft.setTextColor(tft.color565(255, 255, 255));
    tft.setTextSize(2);
    tft.setCursor(CENTER_X - 30, CENTER_Y - 80);
    tft.print((data1 * 100) / total);
    tft.print("%");

    tft.setCursor(CENTER_X - 80, CENTER_Y + 20);
    tft.print((data2 * 100) / total);
    tft.print("%");

    tft.setCursor(CENTER_X + 40, CENTER_Y + 20);
    tft.print((data3 * 100) / total);
    tft.print("%");

    // **更新数据**
    data1 = random(20, 50);
    data2 = random(20, 50);
    data3 = random(20, 50);

    delay(2000);
}
复制代码

这段代码的核心功能是 动态圆饼图，它会根据数据变化调整不同颜色的扇形区域，同时在图表上 显示百分比数值，形成动态的可视化效果。
代码结构

1️⃣ 初始化屏幕
• 使用 Adafruit_GC9A01A 控制 TFT 显示屏，并设置黑色背景。
2️⃣ 绘制圆饼图扇形区域
• 使用 drawSector() 方法，利用 fillTriangle() 绘制 多个扇形块，形成完整的饼图。
• 通过 cos() 和 sin() 计算扇形角度，确保图形正确绘制。
3️⃣ 显示数值百分比
• print() 方法在每个扇形内显示 对应百分比数值，提高数据可视化效果。
4️⃣ 动态更新数据
• 每次循环 数据随机变化，影响扇形大小，使饼图不断更新。
• delay(2000); 让数据变化有明显视觉效果，并保持平滑动画。


最终效果
屏幕上显示红、绿、蓝三色圆饼图，不断变化，模拟动态数据更新
百分比实时显示，使数据更直观易懂
黑色背景 + 三色扇形块 + 白色数值，提高视觉清晰度

实验场景图  动态图