一、前言

曲線面積圖其實就是在曲線圖上增加了顏色填充，單純的曲線可能就只有線條以及資料點，面積圖則需要從座標軸的左下角和右下角聯合曲線形成完整的封閉區域路徑，然後對這個路徑進行顏色填充，為了更美觀的效果，一般這個填充顏色採用曲線條顏色的透明度值150繪製，看起來更具科幻感，面積圖和折線圖類似都可以重疊繪製多條，每條都可以是不同的顏色，如果資料點不較少的情況下，還可以開啟是否繪製資料值，開啟的話直接居中區域繪製對應的資料值。

為了更方便的使用二次開發改造的QCustomPlot，重新命名了一些資料型別，比如曲線圖中的資料佇列一般有QVector，每次寫好多地方，可以重新命名資料型別更短，寫起來更方便，還有就是針對一些曲線資料和屬性設定，定義成一個個資料結構體，在設定資料的時候只要先對結構體資料一個個設定好，最後一次性設定就行，引數看起來很短，最早期採用的分開的引數設定，搞得整個函式引數真多，比如曲線的名稱、座標資料集合、線條寬度、線條顏色、資料點形狀、線條樣式、是否平滑曲線等一大堆引數，有時候突然使用者又新增一個要求又要增加一個引數，索性改成結構體資料儲存，這下清爽多了，增加個引數要改動的程式碼量小很多，也更方便閱讀。

關於QCustomPlot曲線圖本身是不提供平滑曲線的，在這點上不得不承認Qt自帶的QChart是完爆QCustomPlot的，不僅有平滑曲線，還有各種切換動畫效果，看起來絲絲滑滑，資料平滑過渡一直往前進的感覺。在自定義QCustomPlot控制元件的時候就考慮到了這個問題，不改變QCustomPlot本身原始碼的要求下，即可以是折線圖也可以是平滑曲線圖，平滑演算法還有多種，比如採用Qt自帶的貝塞爾曲線cubicTo函式來形成平滑路徑，另外一種是網上找的開源的計算方法，兩種對比下來最明顯的區別就是一個峰更陡峭，甚至超過了對應的資料點，類似於有個慣性的感覺，線條滑的很厲害的時候剎車剎不住，還要慣性滑動一段路徑。

二、功能特點

1. 採用分層設計，整體總共分三級介面，一級介面是整體佈局，二級介面是單個功能模組，三級介面是單個控制元件。
2. 子控制元件包括餅圖、圓環圖、曲線圖、柱狀圖、柱狀分組圖、橫向柱狀圖、橫向柱狀分組圖、合格率控制元件、百分比控制元件、進度控制元件、裝置狀態面板、表格資料、地圖控制元件、視訊控制元件等。
3. 二級介面可以自由拖動懸浮，支援最小化隱藏、最大化關閉、響應雙擊自定義標題欄。
4. 資料來源支援模擬資料（預設）、資料庫採集、串列埠通訊（需定製）、網路通訊（需定製）、網路請求等，可自由設定每個子介面的採集間隔即資料重新整理頻率。
5. 採用純QWidget編寫，親測Qt4.6到Qt6.2任意版本，理論上支援後續其他Qt版本。
6. 超強跨平臺，親測windows、linux、mac、國產uos、國產銀河麒麟kylin等系統，效果完美，同時還支援嵌入式linux比如樹莓派、香橙派、全志、imx6等。
7. 同時集成了自定義控制元件、qchart餅圖、echart地圖等功能。
8. 內建多套配色風格樣式（紫色、藍色、深藍、黑色），預設紫色，自適應任意解析度。
9. 可設定系統標題、目標解析度、佈局方案，啟動立即應用。
10. 可設定主背景顏色、面板顏色、十字線遊標顏色等各種顏色。
11. 可設定多條曲線不同顏色，沒有設定顏色的情況下內建多套精美顏色隨機應用。
12. 可設定標題欄背景顏色、文字顏色。
13. 可設定曲線圖表背景顏色、文字顏色、網格顏色。
14. 可設定正常顏色、警戒顏色、報警顏色、禁用顏色、百分比進度顏色。
15. 可分別設定各種字型大小，比如全域性字型、軟體名稱、標題欄、子標題欄、加粗標籤等。
16. 可設定標題欄高度、表頭高度、行高度。
17. 曲線支援遊標、定位線、懸停高亮資料點、懸停顯示值。
18. 柱狀圖支援頂部（可設定頂端、上部、中間、底部）顯示資料，全部自適應計算位置。
19. 支援平滑曲線，內建多種平滑曲線演算法，還支援面積圖平滑。
20. 面積圖填充顏色可選多種規則比如單色透明度填充、透明度漸變填充等。
21. 資料庫支援sqlite、mysql、postgresql、oracle、國產人大金倉等資料庫。
22. 主介面直接滑鼠右鍵切換佈局、配色方案、關閉開啟某個二級窗體。
23. 自動記憶所有子視窗的大小和位置，下次啟動立即應用。
24. 動態載入佈局方案選單，可以動態新建佈局、恢復佈局、儲存佈局、另存佈局等，使用者可以製造任意佈局。
25. 二級窗體，雙擊從主窗體分離出來浮動，可以自由調整大小。再次雙擊標題欄最大化，再次雙擊還原。
26. 子模組也可以全屏顯示作為一個大屏，這樣就可以一個大屏拓展出多個子大屏，放大檢視子模組的資料詳情，適用多屏展示。
27. 每個模組都可以自定義採集速度，如果是資料庫採集會自動排隊處理，後期還可以拓展每個子模組都獨立的資料庫採集。
28. 提供系統設定模組進行整體的配置引數設定，效果立即應用。
29. 提供精美炫酷的大屏地圖模組，包括靜態圖片、閃爍效果、遷徙效果、世界地圖、區域地圖等，可指定點的經緯度座標，識別單擊響應，可以做地圖跳轉等，每個點都可以不同的顏色和提示資訊。
30. 除了提供大屏系統外，還將每個模組都做了獨立的模組示例介面，每個模組都可以獨立學習使用，裡面用到的控制元件也單獨做了控制元件示例介面，方便學習每個控制元件如何使用。
31. 非常詳細的開發和使用手冊，其中包括資料庫說明、模組對照圖、控制元件對照圖、專案結構、程式碼說明（精確到每個類）、演示demo、使用方法等。

三、體驗地址

1. 體驗地址：https://pan.baidu.com/s/1d7TH_GEYl5nOecuNlWJJ7g 提取碼：01jf 檔名：bin_bigscreen.zip。
2. 國內站點：https://gitee.com/feiyangqingyun
3. 國際站點：https://github.com/feiyangqingyun
4. 個人主頁：https://blog.csdn.net/feiyangqingyun
5. 知乎主頁：https://www.zhihu.com/people/feiyangqingyun/
6. 線上文件：https://feiyangqingyun.gitee.io/qwidgetdemo/bigscreen/

四、效果圖

五、核心程式碼

#include "frmplotarea.h"
#include "ui_frmplotarea.h"
#include "quihelper.h"

frmPlotArea::frmPlotArea(QWidget *parent) : QWidget(parent), ui(new Ui::frmPlotArea)
{
    ui->setupUi(this);
    this->initForm();
    this->loadPlot1();
    this->loadPlot2();
    this->loadPlot3();
}

frmPlotArea::~frmPlotArea()
{
    delete ui;
}

void frmPlotArea::initForm()
{
    //設定X軸偏移值0
    ui->customPlot1->setOffsetX(0);
    //初始化跟隨滑鼠遊標
    ui->customPlot1->initTracer();
    //設定遊標線條顏色
    ui->customPlot1->setLineColor("#A279C5");
    //設定顯示橫線+豎線
    //ui->customPlot1->setShowLineh(true);
    //ui->customPlot1->setShowLinev(true);

    //繫結雙擊重新載入資料
    connect(ui->customPlot1->getPlot(), SIGNAL(mouseDoubleClick(QMouseEvent *)), this, SLOT(loadPlot1()));
    connect(ui->customPlot2->getPlot(), SIGNAL(mouseDoubleClick(QMouseEvent *)), this, SLOT(loadPlot2()));
    connect(ui->customPlot3->getPlot(), SIGNAL(mouseDoubleClick(QMouseEvent *)), this, SLOT(loadPlot3()));
}

void frmPlotArea::loadPlot1()
{
    loadPlot(0, ui->customPlot1, QColor(50, 185, 207), 3, false);
}

void frmPlotArea::loadPlot2()
{
    loadPlot(1, ui->customPlot2, QColor(162, 121, 197), 3, false);
}

void frmPlotArea::loadPlot3()
{
    loadPlot(1, ui->customPlot3, QColor(253, 139, 40), 2, true);
}

//smoothType: 折線圖=-1  平滑演算法1=0  平滑演算法2=1
void frmPlotArea::loadPlot(int smoothType, CustomPlot *customPlot, const QColor &color, int dataWidth, bool drawValue)
{
    //清空畫布
    customPlot->clear();

    QStringList lineNames;
    lineNames << "合格率";

    //初始化對應的資料
    vstring lab;
    vdouble key, value1;
    int dataCount = 15;
    for (int i = 0; i < dataCount; i++) {
        lab << QString("%1").arg(i + 1);
        key << i;
        value1 << CustomPlotHelper::getRandValue(30, 80);
    }

    lvdouble values;
    values << value1;
    customPlot->setPadding(9);

    //設定資料結構體
    LineData data;
    data.index = 0;
    data.name = lineNames.at(0);
    data.key = key;
    data.value = values.at(0);
    //設定線條顏色,可以指定顏色也可以隨機顏色
    data.lineColor = color;
    data.fillColor = 1;

    //折線圖或者平滑曲線
    if (smoothType < 0) {
        //新增畫布
        customPlot->addGraph(1);
        //初始化指示器資料高亮及懸停提示等
        customPlot->initItem();
        //設定畫布折線圖資料
        customPlot->setDataLine(data);
    } else {
        //有多種平滑演算法 0 1
        data.smoothType = smoothType;
        vpoint points;
        int count = key.count();
        for (int i = 0; i < count; ++i) {
            points << QPointF(data.key.at(i), data.value.at(i));
        }
        data.points = points;
        //設定資料寬度
        data.dataWidth = dataWidth;
        //設定繪製資料值
        data.drawValue = drawValue;
        customPlot->addSmoothLine(data);
    }

    //設定座標軸範圍值+X座標對應顯示文字
    customPlot->setLabX(key, lab);
    customPlot->setRangeX(-0.5, key.count() - 0.5);
    customPlot->setRangeY(0, 105, 10);

    //重新重新整理顯示
    customPlot->replot();
}