Qt+ECharts開發筆記(四):ECharts的餅圖介紹、基礎使用和Qt封裝百分比圖Demo
前言
Demo演示
ECharts程式碼效果除錯
option = { legend: { top: '90%', show: false }, series: [ { selectedMode: 'single', // 選擇模式 selectedOffset: 10, // 選取後偏移,需要先設定選擇模式才生效 type: 'pie', // 圖例型別 radius: ['60%', '90%'], // 同心圓雙邊界區域 itemStyle: { // 資料項樣式 borderRadius: 0, // 邊界圓角 borderColor: '#FF0000', // 邊界顏色 borderWidth: 0 // 邊界寬度 }, label: { show: true, fontSize: '32', fontWeight: 'bold', formatter: '{b}\n\n{d}%', position: 'center' }, emphasis: { // 高亮狀態的扇區和標籤樣式 label: { show: false, fontSize: '32', fontWeight: 'bold' } }, labelLine: { show: true }, data: [ { value: 5.6, name: '開機率', itemStyle: { color: 'rgb(41, 235, 255)', shadowBlur: 10, // 外陰影 shadowOffsetX: 0, // 外陰影x軸偏移 shadowOffsetY: 0, // 外陰影y軸偏移 shadowColor: 'rgb(41, 235, 255)' // 外陰影顏色 } }, { value: 5.2, name: '', itemStyle: { color: 'rgba(45,62,113)', shadowBlur: 10, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'rgba(45,62,113)' } } ] } ]};
Qt封裝動態ECharts
步驟一:靜態html
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>ECharts</title> <script src="./echarts.js"></script> </head> <body> <style> #main, html, body{ width: 100%; height: 100%; overflow: hidden; } #main { width: 95%; height: 95%; } </style> <div id="main"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); window.onresize = function() { myChart.resize(); }; </script> </body></html>
步驟二:初始化
void PieEChartWidget::initControl(){ _pLabelCenterUp = new QLabel(this); _pLabelCenterUp->raise(); _pLabelCenterUp->setAlignment(Qt::AlignBottom | Qt::AlignHCenter); _pLabelCenterUp->setText(QSTRING("開機率")); _pLabelCenterUp->setStyleSheet("font-size: 36px;" "font-weight: bold;" "align: top ;" "color: rgb(41, 235, 255);" "padding: 0 30 10 0;"); _pLabelCenterDown = new QLabel(this); _pLabelCenterDown->raise(); _pLabelCenterDown->setAlignment(Qt::AlignTop | Qt::AlignHCenter); _pLabelCenterDown->setText(QSTRING("%1%").arg(0)); _pLabelCenterDown->setStyleSheet("font-size: 64px;" "font-weight: bold;" "align: center;" "color: rgb(41, 235, 255);" "padding: 0 30 0 0;"); _pWebEngineView = new QWebEngineView(this); _pWebEnginePage = new QWebEnginePage(this); _pWebChannel = new QWebChannel(this); QString filePath;#if 0 // 使用絕對路徑 filePath = QString("%1/%2").arg(_htmlDir).arg(_indexFileName);#else // 使用資源路徑 filePath = "qrc:/pieEChartWidget/html/eChartWidget.html";#endif LOG << "file exist:" << QFile::exists(filePath) << filePath;#if 0 // 列印html檔案內容 QFile file(_indexFilePath); file.open(QIODevice::ReadOnly); LOG << QString(file.readAll()); file.close();#endif connect(_pWebEnginePage, SIGNAL(loadFinished(bool)), this, SLOT(slot_loadFinished(bool))); _pWebEnginePage->load(QUrl(filePath)); _pWebEnginePage->setWebChannel(_pWebChannel); _pWebEngineView->setPage(_pWebEnginePage); // 背景透明// _pWebEngineView->setStyleSheet("background-color: transparent"); _pWebEnginePage->setBackgroundColor(Qt::transparent); // 滑鼠穿透 _pWebEngineView->setAttribute(Qt::WA_TransparentForMouseEvents, true);}
步驟三:將需要的介面預留
void PieEChartWidget::setPercent(double percent){ if(percent < 0 || percent > 100) { return; } LOG << percent; if(percent == 100) { _pLabelCenterDown->setText(QSTRING("100%")); }else{ if(_percent < 10) { _pLabelCenterDown->setText(QSTRING("%1%").arg(percent, 0, 'g', 2)); }else{ _pLabelCenterDown->setText(QSTRING(" %1%").arg(percent, 0, 'g', 2)); } } QString jsStr = QSTRING( "option.series[0].data[0].value = %1;" "option.series[0].data[1].value = %2;" "myChart.setOption(option, true);") .arg(percent) .arg(100 - percent); LOG << jsStr; _percent = percent; runJsScript(jsStr);}
步驟四:動態操作
重置
void PieEChartWidget::on_pushButton_reset_clicked(){ initJs();}
重新整理
void PieEChartWidget::on_pushButton_flush_clicked(){ QString jsStr = "var empty = {};" "myChart.setOption(empty, true);" "myChart.setOption(option, true);"; runJsScript(jsStr);}
隨機生成(使用Qt程式碼)
void PieEChartWidget::on_pushButton_createRandom_clicked(){ float value = qrand() % 10001 / 100; setPercent(value);}
清除資料
void PieEChartWidget::on_pushButton_clear_clicked(){ setPercent(0.0f);}
指定值
void PieEChartWidget::on_doubleSpinBox_valueChanged(double arg1){ setPercent(ui->doubleSpinBox->value());}
Demo原始碼
PieEChartWidget.h
#ifndef PIEECHARTWIDGET_H#define PIEECHARTWIDGET_H#include <QWidget>#include <QWebEngineView>#include <QWebEnginePage>#include <QWebChannel>#include <QLabel>namespace Ui {class PieEChartWidget;}class PieEChartWidget : public QWidget{ Q_OBJECTpublic: explicit PieEChartWidget(QWidget *parent = 0); ~PieEChartWidget();public: void setPercent(double percent);protected: void initControl();protected slots: void slot_loadFinished(bool result);protected: void initJs();protected: void runJsScript(QString str);protected: void resizeEvent(QResizeEvent *event);private slots: void on_pushButton_clear_clicked(); void on_pushButton_flush_clicked(); void on_pushButton_createRandom_clicked(); void on_pushButton_reset_clicked(); void on_doubleSpinBox_valueChanged(double arg1);private: Ui::PieEChartWidget *ui;private: QWebEngineView *_pWebEngineView; // 瀏覽器視窗 QWebEnginePage *_pWebEnginePage; // 瀏覽器頁面 QWebChannel *_pWebChannel; // 瀏覽器js互動 QString _htmlDir; // html資料夾路徑 QString _indexFileName; // html檔案 QLabel *_pLabelCenterUp; // 顯示文字的控制元件 QLabel *_pLabelCenterDown; // 顯示百分比的控制元件 QString _initJsStr; // 初始化的js字串 QString _initValueJsStr; // 設定值的js字串private: double _percent; // 百分比(0~100)};#endif // PIEECHARTWIDGET_H
PieEChartWidget.cpp
#include "PieEChartWidget.h"#include "ui_PieEChartWidget.h"#include <QFile>#include <QMessageBox>#include <QTimer>// QtCreator在msvc下設定編碼也或有一些亂碼,直接一刀切,避免繁瑣的設定//#define MSVC#ifdef MSVC#define QSTRING(s) QString::fromLocal8Bit(s)#else#define QSTRING(s) QString(s)#endif#include <QDebug>#include <QDateTime>//#define LOG qDebug()<<__FILE__<<__LINE__//#define LOG qDebug()<<__FILE__<<__LINE__<<__FUNCTION__//#define LOG qDebug()<<__FILE__<<__LINE__<<QThread()::currentThread()//#define LOG qDebug()<<__FILE__<<__LINE__<<QDateTime::currentDateTime().toString("yyyy-MM-dd")#define LOG qDebug()<<__FILE__<<__LINE__<<QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss:zzz")PieEChartWidget::PieEChartWidget(QWidget *parent) : QWidget(parent), ui(new Ui::PieEChartWidget), _pWebEngineView(0), _pWebEnginePage(0), _pWebChannel(0), _htmlDir("D:/qtProject/echartsDemo/echartsDemo/modules/PieEChartWidget/html"), // 使用了絕對路徑,引到html資料夾 _indexFileName("PieEChartWidget.html"), _pLabelCenterUp(0), _pLabelCenterDown(0){ ui->setupUi(this); QString version = "v1.0.0"; setWindowTitle(QString("基於Qt的EChartb餅狀圖Demo %1(長沙紅胖子Qt").arg(version)); // 設定無邊框,以及背景透明 // 背景透明,在介面構架時,若為本視窗為其他視窗提升為本視窗時, // 則再qss會在主視窗第一級新增frame_all,防止其他視窗提升本視窗而沖掉qss設定// setWindowFlag(Qt::FramelessWindowHint);// setAttribute(Qt::WA_TranslucentBackground, true);#if 0 // 這是方法一:讓捲軸不出來(透過大小),還有一個方法是在html設定body的overflow: hidden// resize(600 + 20, 400 + 20);#endif initControl();}PieEChartWidget::~PieEChartWidget(){ delete ui;}void PieEChartWidget::setPercent(double percent){ if(percent < 0 || percent > 100) { return; } LOG << percent; if(percent == 100) { _pLabelCenterDown->setText(QSTRING("100%")); }else{ if(_percent < 10) { _pLabelCenterDown->setText(QSTRING("%1%").arg(percent, 0, 'g', 2)); }else{ _pLabelCenterDown->setText(QSTRING(" %1%").arg(percent, 0, 'g', 2)); } } QString jsStr = QSTRING( "option.series[0].data[0].value = %1;" "option.series[0].data[1].value = %2;" "myChart.setOption(option, true);") .arg(percent) .arg(100 - percent); LOG << jsStr; _percent = percent; runJsScript(jsStr);}void PieEChartWidget::initControl(){ _pLabelCenterUp = new QLabel(this); _pLabelCenterUp->raise(); _pLabelCenterUp->setAlignment(Qt::AlignBottom | Qt::AlignHCenter); _pLabelCenterUp->setText(QSTRING("開機率")); _pLabelCenterUp->setStyleSheet("font-size: 36px;" "font-weight: bold;" "align: top ;" "color: rgb(41, 235, 255);" "padding: 0 30 10 0;"); _pLabelCenterDown = new QLabel(this); _pLabelCenterDown->raise(); _pLabelCenterDown->setAlignment(Qt::AlignTop | Qt::AlignHCenter); _pLabelCenterDown->setText(QSTRING("%1%").arg(0)); _pLabelCenterDown->setStyleSheet("font-size: 64px;" "font-weight: bold;" "align: center;" "color: rgb(41, 235, 255);" "padding: 0 30 0 0;"); _pWebEngineView = new QWebEngineView(this); _pWebEnginePage = new QWebEnginePage(this); _pWebChannel = new QWebChannel(this); QString filePath;#if 0 // 使用絕對路徑 filePath = QString("%1/%2").arg(_htmlDir).arg(_indexFileName);#else // 使用資源路徑 filePath = "qrc:/pieEChartWidget/html/eChartWidget.html";#endif LOG << "file exist:" << QFile::exists(filePath) << filePath;#if 0 // 列印html檔案內容 QFile file(_indexFilePath); file.open(QIODevice::ReadOnly); LOG << QString(file.readAll()); file.close();#endif connect(_pWebEnginePage, SIGNAL(loadFinished(bool)), this, SLOT(slot_loadFinished(bool))); _pWebEnginePage->load(QUrl(filePath)); _pWebEnginePage->setWebChannel(_pWebChannel); _pWebEngineView->setPage(_pWebEnginePage); // 背景透明// _pWebEngineView->setStyleSheet("background-color: transparent"); _pWebEnginePage->setBackgroundColor(Qt::transparent); // 滑鼠穿透 _pWebEngineView->setAttribute(Qt::WA_TransparentForMouseEvents, true);}void PieEChartWidget::slot_loadFinished(bool result){ if(result) { initJs(); resizeEvent(0); }}void PieEChartWidget::initJs(){ _initJsStr = QSTRING( "var option;" "option = {" " legend: {" " top: '90%'," " show: false" " }," " series: [" " {" " selectedMode: 'single', /* 選擇模式 */" " selectedOffset: 0, /* 選取後偏移,需要先設定選擇模式才生效 */" " type: 'pie', /* 圖例型別 */" " radius: ['60%', '90%'], /* 同心圓雙邊界區域 */" " itemStyle: { /* 資料項樣式 */" " borderRadius: 0, /* 邊界圓角 */" " borderColor: '#FF0000', /* 邊界顏色 */" " borderWidth: 0 /* 邊界寬度 */" " }," " avoidLabelOverlap: true," " label: {" " show: false," " fontSize: '32'," " fontWeight: 'bold'," " formatter: '{b}\\n\\n{d}%'," " position: 'center'" " }," " emphasis: { /* 高亮狀態的扇區和標籤樣式 */" " label: {" " show: false," " fontSize: '32'," " fontWeight: 'bold'" " }" " }," " labelLine: {" " show: false" " }," " data: [" " {" " value: 0," " name: '開機率'," " selected: true," " itemStyle: {" " color: 'rgba(41, 235, 255, 255)'," " shadowColor:'rgba(41, 235, 255, 255)'," " shadowBlur: 10," " shadowOffsetX: 0," " shadowOffsetY: 0," " }" " }," " {" " value: 100," " name: '11'," " itemStyle: {" " color: 'rgba(45,62,113,255)'," " shadowColor:'rgba(45,62,113,255)'," " shadowBlur: 10," " shadowOffsetX: 0," " shadowOffsetY: 0," " }" " }" " ]" " }" " ]" "};" "myChart.setOption(option);" ); { _initValueJsStr = QSTRING( "var option;" "option = {" " legend: {" " top: '90%'," " show: false" " }," " series: [" " {" " selectedMode: 'single', /* 選擇模式 */" " selectedOffset: 0, /* 選取後偏移,需要先設定選擇模式才生效 */" " type: 'pie', /* 圖例型別 */" " radius: ['60%', '90%'], /* 同心圓雙邊界區域 */" " itemStyle: { /* 資料項樣式 */" " borderRadius: 0, /* 邊界圓角 */" " borderColor: '#FF0000', /* 邊界顏色 */" " borderWidth: 0 /* 邊界寬度 */" " }," " avoidLabelOverlap: true," " label: {" " show: false," " fontSize: '32'," " fontWeight: 'bold'," " formatter: '{b}\\n\\n{d}%'," " position: 'center'" " }," " emphasis: { /* 高亮狀態的扇區和標籤樣式 */" " label: {" " show: false," " fontSize: '32'," " fontWeight: 'bold'" " }" " }," " labelLine: {" " show: false" " }," " data: [" " {" " value: %1," " name: '開機率'," " selected: true," " itemStyle: {" " color: 'rgba(41, 235, 255, 255)'," " shadowColor:'rgba(41, 235, 255, 255)'," " shadowBlur: 10," " shadowOffsetX: 0," " shadowOffsetY: 0," " }" " }," " {" " value: %2," " name: ''," " itemStyle: {" " color: 'rgba(45, 62, 113, 255)'," " shadowColor:'rgba(45,62,113,255)'," " shadowBlur: 10," " shadowOffsetX: 0," " shadowOffsetY: 0," " }" " }" " ]" " }" " ]" "};" "myChart.setOption(option);" ); } setPercent(0); runJsScript(_initJsStr);}void PieEChartWidget::runJsScript(QString str){ if(_pWebEnginePage) { _pWebEnginePage->runJavaScript(str); }}void PieEChartWidget::resizeEvent(QResizeEvent *event){ if(_pWebEngineView) { _pWebEngineView->setGeometry(ui->label_echarts->geometry()); } if(_pLabelCenterUp) { QRect echarRect = ui->label_echarts->geometry(); _pLabelCenterUp->setGeometry(echarRect.x(), echarRect.y(), echarRect.width(), echarRect.height()/2); } if(_pLabelCenterDown) { QRect echarRect = ui->label_echarts->geometry(); _pLabelCenterDown->setGeometry(echarRect.x(), echarRect.y() + echarRect.height()/2, echarRect.width(), echarRect.height()/2); }}void PieEChartWidget::on_pushButton_clear_clicked(){ setPercent(0.0f);}void PieEChartWidget::on_pushButton_flush_clicked(){ QString jsStr = "var empty = {};" "myChart.setOption(empty, true);" "myChart.setOption(option, true);"; runJsScript(jsStr);}void PieEChartWidget::on_pushButton_createRandom_clicked(){ float value = qrand() % 10001 / 100; setPercent(value);}void PieEChartWidget::on_pushButton_reset_clicked(){ initJs();}void PieEChartWidget::on_doubleSpinBox_valueChanged(double arg1){ setPercent(ui->doubleSpinBox->value());}
工程模板v1.3.0
入坑
入坑一:js出現錯誤“unexpected token”
問題
原理
解決方法
入坑二:出現Invalid or unexpected token錯誤
問題
原理
解決方法
入坑三:嵌入Qt中的顯示不對
問題
原理
解決
入坑四:Qt中實際餅圖的預設Label顯示不對
問題
原理
其他嘗試
解決
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70010283/viewspace-2910423/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Qt+ECharts開發筆記(三):ECharts的柱狀圖介紹、基礎使用和Qt封裝DemoQTEcharts筆記封裝
- Qt+ECharts開發筆記(五):ECharts的動態排序柱狀圖介紹、基礎使用和Qt封裝DemoQTEcharts筆記排序封裝
- Qt+ECharts開發筆記(一):ECharts介紹、下載和Qt呼叫ECharts基礎柱狀圖DemoQTEcharts筆記
- 地圖開發筆記(一):百度地圖介紹、使用和Qt內嵌地圖Demo地圖筆記QT
- Qt+QtWebApp開發筆記(一):QtWebApp介紹、下載和搭建基礎封裝http輕量級伺服器DemoQTWebAPP筆記封裝HTTP伺服器
- Qwt開發筆記(二):Qwt基礎框架介紹、折線圖介紹、折線圖Demo以及程式碼詳解筆記框架
- Qt+ECharts開發筆記(二):Qt視窗動態調整大小,使ECharts跟隨Qt視窗大小變換QTEcharts筆記
- canvas簡單封裝一個echarts實現不了的餅圖Canvas封裝Echarts
- libmatio開發筆記(一):matlab檔案操作libmatio庫介紹,編譯和基礎DemoIBM筆記Matlab編譯
- echarts 餅圖巢狀 二級餅圖 子餅圖 複合餅圖Echarts巢狀
- Qt+騰訊IM開發筆記(一):騰訊IM介紹、使用和Qt整合騰訊IM-SDK的工程模板DemoQT筆記
- Qt+OpenCascade開發筆記(二):windows開發環境搭建(二):Qt引入occ庫,搭建基礎工程模板Demo和釋出DemoQT筆記Windows開發環境
- echarts繪製餅圖Echarts
- Linux驅動開發筆記(四):裝置驅動介紹、熟悉雜項裝置驅動和ubuntu開發雜項裝置DemoLinux筆記Ubuntu
- ECharts圖表——封裝通用配置Echarts封裝
- ECharts 餅圖繪製教程Echarts
- Qt混合Python開發技術:Python介紹、混合過程和DemoQTPython
- Qt開發技術:QCharts(三)QCharts樣條曲線圖介紹、Demo以及程式碼詳解QT
- 圖神經網路的介紹(基礎,DeepWalk和GraphSage)神經網路
- 如何開發一個百分比餅狀圖動畫動畫
- Qwt開發筆記(一):Qwt簡介、下載以及基礎demo工程模板筆記
- Qt開發技術:圖形檢視框架(一)基本介紹QT框架
- echarts間隔餅圖實現方法Echarts
- 【筆記】Python基礎(二)運算子介紹筆記Python
- 以太坊開發框架Truffle基礎使用介紹框架
- Qt開發技術:Q3D圖表開發筆記(四):Q3DSurface三維曲面圖顏色樣式詳解、Demo以及程式碼詳解QT3D筆記
- 微信小程式echarts-餅狀圖微信小程式Echarts
- FFmpeg開發筆記(四)FFmpeg的動態連結庫介紹筆記
- 開發筆記:使用 mpvue 開發鬥圖小程式筆記Vue
- 膝上型電腦鍵盤的功能介紹 筆記本鍵盤功能介紹圖大全圖解筆記圖解
- Echarts一個圖例可以共用兩個或者兩個以上的餅圖Echarts
- Qt 嵌入式圖形開發大全和QT開發手冊QT
- QGIS開發筆記(二):Windows安裝版二次開發環境搭建(上):安裝OSGeo4W執行依賴其Qt的基礎環境Demo筆記Windows開發環境QT
- Qt+QtWebApp開發筆記(二):http伺服器日誌系統介紹、新增日誌系統至Demo測試QTWebAPP筆記HTTP伺服器
- Lustre架構介紹的閱讀筆記-基礎知識架構筆記
- CAD學習筆記基礎課【圖層】筆記
- vue 基礎入門筆記 14:發表評論 demoVue筆記
- 餅圖元件的基本使用和自定義調整元件