Qt+ECharts開發筆記（五）：ECharts的動態排序柱狀圖介紹、基礎使用和Qt封裝Demo
前言
Demo演示
ECharts程式碼效果除錯
option = {
xAxis: {
max: 'dataMax'
},
yAxis: {
type: 'category',
data: ['特斯拉', '賓士', '寶馬', '理想', '蔚來'],
inverse: true,
animationDuration: 300,
animationDurationUpdate: 300,
max: 4
},
series: [
{
realtimeSort: true,
name: 'X',
type: 'bar',
data: [10,20,50,10,30],
label: {
show: true,
position: 'right',
valueAnimation: true
},
itemStyle: {
color: function(params) {
var colorList = ['#EE14FF', '#F092FF', '#FF61FE', '#A02F99', '#F00682']; /* 注意1：需要分號 */
return colorList[params.dataIndex]; /* 注意2：需要dataIndex，獲取序號 */
}
}
},
],
graphic: {
elements: [ /* 時間標誌 */
{
type: 'text',
right: 160,
bottom: 100,
style: {
text: '1970-01',
font: 'bolder 100px monospace',
fill: 'rgba(100, 100, 100, 0.25)'
},
z: 100
}
]
},
legend: {
show: false,
},
animationDuration: 0,
animationDurationUpdate: 1000,
animationEasing: 'linear',
animationEasingUpdate: 'linear'};
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 BarAutoSortEChartWidget::initControl(){
_pWebEngineView = new QWebEngineView(this);
_pWebEnginePage = new QWebEnginePage(this);
_pWebChannel = new QWebChannel(this);
QString filePath;#if 1
filePath = QString("%1/%2").arg(_htmlDir).arg(_indexFileName);#else
filePath = "qrc:/barAutoSortEChartWidget/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);}步驟三：動態操作
重置
void BarAutoSortEChartWidget::on_pushButton_reset_clicked(){
initJs();}重新整理
void BarAutoSortEChartWidget::on_pushButton_flush_clicked(){
QString jsStr =
"var empty = {};"
"myChart.setOption(empty, true);"
"myChart.setOption(option, true);";
runJsScript(jsStr);}開始統計（使用Qt程式碼）
void BarAutoSortEChartWidget::on_pushButton_start_clicked(){
if(_timerId == -1)
{
LOG << ui->lineEdit_interval->text().toInt();
_timerId = startTimer(ui->lineEdit_interval->text().toInt());
_dateTime.setSecsSinceEpoch(0);
QString jsStr = QString(
"option.series[0].data[0] = 0;"
"option.series[0].data[1] = 0;"
"option.series[0].data[2] = 0;"
"option.series[0].data[3] = 0;"
"option.series[0].data[4] = 0;"
"option.graphic.elements[0].style.text= '%1';"
"myChart.setOption(option, true);"
)
.arg(_dateTime.toString("yyyy-MM"));
runJsScript(jsStr);
ui->pushButton_start->setText("停止統計");
}else{
if(_timerId != -1)
{
killTimer(_timerId);
_timerId = -1;
}
ui->pushButton_start->setText("開始統計");
}}void BarAutoSortEChartWidget::timerEvent(QTimerEvent *event){
_dateTime = _dateTime.addMonths(1);
if(_dateTime >= QDateTime::currentDateTime())
{
if(_timerId != -1)
{
killTimer(_timerId);
_timerId = -1;
}
}
QString jsStr = QString(
"option.series[0].data[0] = option.series[0].data[0] + %1;"
"option.series[0].data[1] = option.series[0].data[1] + %2;"
"option.series[0].data[2] = option.series[0].data[2] + %3;"
"option.series[0].data[3] = option.series[0].data[3] + %4;"
"option.series[0].data[4] = option.series[0].data[4] + %5;"
"option.graphic.elements[0].style.text= '%6';"
"myChart.setOption(option, true);"
)
.arg(qrand()%100)
.arg(qrand()%100)
.arg(qrand()%100)
.arg(qrand()%100)
.arg(qrand()%100)
.arg(_dateTime.toString("yyyy-MM"));
runJsScript(jsStr);}清除資料
void BarAutoSortEChartWidget::on_pushButton_clear_clicked(){
_dateTime.setSecsSinceEpoch(0);
QString jsStr = QString(
"option.series[0].data[0] = 0;"
"option.series[0].data[1] = 0;"
"option.series[0].data[2] = 0;"
"option.series[0].data[3] = 0;"
"option.series[0].data[4] = 0;"
"option.graphic.elements[0].style.text= '%1';"
"myChart.setOption(option, true);"
)
.arg(_dateTime.toString("yyyy-MM"));
runJsScript(jsStr);}Demo原始碼
BarAutoSortEChartWidget.h
#ifndef BARAUTOSORTECHARTWIDGET_H#define BARAUTOSORTECHARTWIDGET_H#include <QWidget>#include <QWebEngineView>#include <QWebEnginePage>#include <QWebChannel>namespace Ui {class BarAutoSortEChartWidget;}class BarAutoSortEChartWidget : public QWidget{
Q_OBJECTpublic:
explicit BarAutoSortEChartWidget(QWidget *parent = 0);
~BarAutoSortEChartWidget();protected:
void initControl();protected slots:
void slot_loadFinished(bool result);protected:
void initJs();protected:
void runJsScript(QString str);protected:
void resizeEvent(QResizeEvent *event);
void timerEvent(QTimerEvent *event);private slots:
void on_pushButton_clear_clicked();
void on_pushButton_flush_clicked();
void on_pushButton_start_clicked();
void on_pushButton_reset_clicked();private:
Ui::BarAutoSortEChartWidget *ui;private:
QWebEngineView *_pWebEngineView; // 瀏覽器視窗
QWebEnginePage *_pWebEnginePage; // 瀏覽器頁面
QWebChannel *_pWebChannel; // 瀏覽器js互動
QString _htmlDir; // html資料夾路徑
QString _indexFileName; // html檔案
QString _initJsStr; // 第一次初始化的表格private:
int _timerId;
QDateTime _dateTime;};#endif // BARAUTOSORTECHARTWIDGET_HBarAutoSortEChartWidget.cpp
#include "BarAutoSortEChartWidget.h"#include "ui_BarAutoSortEChartWidget.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")BarAutoSortEChartWidget::BarAutoSortEChartWidget(QWidget *parent) :
QWidget(parent),
ui(new Ui::BarAutoSortEChartWidget),
_pWebEngineView(0),
_pWebEnginePage(0),
_pWebChannel(0),
_htmlDir("D:/qtProject/echartsDemo/echartsDemo/modules/barAutoSortEChartWidget/html"), // 使用了絕對路徑,引到html資料夾
_indexFileName("eChartWidget.html"),
_timerId(-1){
ui->setupUi(this);
QString version = "v1.0.0";
setWindowTitle(QString("基於Qt的ECharts條狀圖(自動排序)Demo %1(長沙紅胖子).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();}BarAutoSortEChartWidget::~BarAutoSortEChartWidget(){
delete ui;}void BarAutoSortEChartWidget::initControl(){
_pWebEngineView = new QWebEngineView(this);
_pWebEnginePage = new QWebEnginePage(this);
_pWebChannel = new QWebChannel(this);
QString filePath;#if 1
filePath = QString("%1/%2").arg(_htmlDir).arg(_indexFileName);#else
filePath = "qrc:/barAutoSortEChartWidget/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);}void BarAutoSortEChartWidget::slot_loadFinished(bool result){
if(result)
{
initJs();
// 因為使用佈局，在沒有完全構造之前，其大小是不可預期的，等構造完成後，佈局的大小才會形成，此時再初始化一次
resizeEvent(0);
}}void BarAutoSortEChartWidget::initJs(){
_initJsStr = QSTRING(
"option = {"
" xAxis: {"
" max: 'dataMax'"
" },"
" yAxis: {"
" type: 'category',"
" data: ['特斯拉', '賓士', '寶馬', '理想', '蔚來'],"
" inverse: true,"
" animationDuration: 300,"
" animationDurationUpdate: 300,"
" max: 4"
" },"
" series: ["
" {"
" realtimeSort: true,"
" name: 'X',"
" type: 'bar',"
" data: [10,20,50,10,30],"
" label: {"
" show: true,"
" position: 'right',"
" valueAnimation: true"
" },"
" itemStyle: {"
" color: function(params) {"
" var colorList = ['#EE14FF', '#F092FF', '#FF61FE', '#A02F99', '#F00682']; /* 注意1：需要分號 */"
" return colorList[params.dataIndex]; /* 注意2：需要dataIndex，獲取序號 */"
" }"
" }"
" },"
" ],"
" graphic: {"
" elements: [ /* 時間標誌 */"
" {"
" type: 'text', "
" right: 160,"
" bottom: 100,"
" style: {"
" text: '1970-01',"
" font: 'bolder 100px monospace',"
" fill: 'rgba(100, 100, 100, 0.25)'"
" },"
" z: 100"
" }"
" ]"
" },"
" legend: {"
" show: false,"
" },"
" animationDuration: 0,"
" animationDurationUpdate: 1000,"
" animationEasing: 'linear',"
" animationEasingUpdate: 'linear'"
"};"
"myChart.setOption(option);");
runJsScript(_initJsStr);}void BarAutoSortEChartWidget::runJsScript(QString str){
if(_pWebEnginePage)
{
_pWebEnginePage->runJavaScript(str);
}}void BarAutoSortEChartWidget::resizeEvent(QResizeEvent *event){
if(_pWebEngineView)
{
_pWebEngineView->setGeometry(ui->label_echarts->geometry());
LOG << ui->label_echarts->geometry();
}}void BarAutoSortEChartWidget::timerEvent(QTimerEvent *event){
_dateTime = _dateTime.addMonths(1);
if(_dateTime >= QDateTime::currentDateTime())
{
if(_timerId != -1)
{
killTimer(_timerId);
_timerId = -1;
}
}
QString jsStr = QString(
"option.series[0].data[0] = option.series[0].data[0] + %1;"
"option.series[0].data[1] = option.series[0].data[1] + %2;"
"option.series[0].data[2] = option.series[0].data[2] + %3;"
"option.series[0].data[3] = option.series[0].data[3] + %4;"
"option.series[0].data[4] = option.series[0].data[4] + %5;"
"option.graphic.elements[0].style.text= '%6';"
"myChart.setOption(option, true);"
)
.arg(qrand()%100)
.arg(qrand()%100)
.arg(qrand()%100)
.arg(qrand()%100)
.arg(qrand()%100)
.arg(_dateTime.toString("yyyy-MM"));
runJsScript(jsStr);}void BarAutoSortEChartWidget::on_pushButton_clear_clicked(){
_dateTime.setSecsSinceEpoch(0);
QString jsStr = QString(
"option.series[0].data[0] = 0;"
"option.series[0].data[1] = 0;"
"option.series[0].data[2] = 0;"
"option.series[0].data[3] = 0;"
"option.series[0].data[4] = 0;"
"option.graphic.elements[0].style.text= '%1';"
"myChart.setOption(option, true);"
)
.arg(_dateTime.toString("yyyy-MM"));
runJsScript(jsStr);}void BarAutoSortEChartWidget::on_pushButton_flush_clicked(){
QString jsStr =
"var empty = {};"
"myChart.setOption(empty, true);"
"myChart.setOption(option, true);";
runJsScript(jsStr);}void BarAutoSortEChartWidget::on_pushButton_start_clicked(){
if(_timerId == -1)
{
LOG << ui->lineEdit_interval->text().toInt();
_timerId = startTimer(ui->lineEdit_interval->text().toInt());
_dateTime.setSecsSinceEpoch(0);
QString jsStr = QString(
"option.series[0].data[0] = 0;"
"option.series[0].data[1] = 0;"
"option.series[0].data[2] = 0;"
"option.series[0].data[3] = 0;"
"option.series[0].data[4] = 0;"
"option.graphic.elements[0].style.text= '%1';"
"myChart.setOption(option, true);"
)
.arg(_dateTime.toString("yyyy-MM"));
runJsScript(jsStr);
ui->pushButton_start->setText("停止統計");
}else{
if(_timerId != -1)
{
killTimer(_timerId);
_timerId = -1;
}
ui->pushButton_start->setText("開始統計");
}}void BarAutoSortEChartWidget::on_pushButton_reset_clicked(){
initJs();}工程模板v1.4.0
入坑
入坑一：排序圖問題無法自動排序
問題
原理
解決方法
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/70010283/viewspace-2917068/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- Qt+ECharts開發筆記（三）：ECharts的柱狀圖介紹、基礎使用和Qt封裝DemoQTEcharts筆記封裝
- Qt+ECharts開發筆記（一）：ECharts介紹、下載和Qt呼叫ECharts基礎柱狀圖DemoQTEcharts筆記
- Qt+ECharts開發筆記（四）：ECharts的餅圖介紹、基礎使用和Qt封裝百分比圖DemoQTEcharts筆記封裝
- Qt+ECharts開發筆記（二）：Qt視窗動態調整大小，使ECharts跟隨Qt視窗大小變換QTEcharts筆記
- 地圖開發筆記（一）：百度地圖介紹、使用和Qt內嵌地圖Demo地圖筆記QT
- Qt+QtWebApp開發筆記（一）：QtWebApp介紹、下載和搭建基礎封裝http輕量級伺服器DemoQTWebAPP筆記封裝HTTP伺服器
- Qt+騰訊IM開發筆記（一）：騰訊IM介紹、使用和Qt整合騰訊IM-SDK的工程模板DemoQT筆記
- Qwt開發筆記（二）：Qwt基礎框架介紹、折線圖介紹、折線圖Demo以及程式碼詳解筆記框架
- echarts 柱狀圖 詳解與使用集合Echarts
- Echarts 柱狀圖配置詳解Echarts
- echarts 設定柱狀圖寬度Echarts
- Linux驅動開發筆記（四）：裝置驅動介紹、熟悉雜項裝置驅動和ubuntu開發雜項裝置DemoLinux筆記Ubuntu
- libmatio開發筆記（一）：matlab檔案操作libmatio庫介紹，編譯和基礎DemoIBM筆記Matlab編譯
- Echarts根據資料長度變換柱狀圖柱狀的顏色Echarts
- FFmpeg開發筆記（四）FFmpeg的動態連結庫介紹筆記
- 如何基於 echarts 實現區間柱狀圖（包括橫向）？Echarts
- Qwt開發筆記（一）：Qwt簡介、下載以及基礎demo工程模板筆記
- 九、柱狀圖和3D柱狀圖3D
- echarts如何在每個柱狀圖上都顯示氣泡詳解（好看的柱狀圖）Echarts
- Flutter狀態管理provider的使用和封裝FlutterIDE封裝
- Qt混合Python開發技術：Python介紹、混合過程和DemoQTPython
- 以太坊開發框架Truffle基礎使用介紹框架
- ECharts系列:玩轉ECharts之常用圖（折線、柱狀、餅狀、散點、關係、樹）Echarts
- 【echarts】柱狀圖設定固定寬度（最大寬度）Echarts
- Xtrabackup介紹和使用【基礎篇】
- ECharts圖表——封裝通用配置Echarts封裝
- 【筆記】Python基礎（二）運算子介紹筆記Python
- Vue.js基礎學習（三) -------------動態繫結v-bind的介紹和使用Vue.js
- 柱狀圖
- Qt開發技術：QCharts（三）QCharts樣條曲線圖介紹、Demo以及程式碼詳解QT
- 靜態PDO基礎操作封裝封裝
- ECharts資料圖表使用介紹 超詳細Echarts
- 如何基於 echarts 在柱狀圖或條形圖上實現轉換率？（有想法嗎？）Echarts
- vue 基礎入門筆記 14:發表評論 demoVue筆記
- Lustre架構介紹的閱讀筆記-基礎知識架構筆記
- 圖神經網路的介紹（基礎，DeepWalk和GraphSage）神經網路
- Jenkinsant介紹(學習筆記五)Jenkins筆記
- UI自動化學習筆記- PO模型介紹和使用UI筆記模型