Qt+ECharts開發筆記（三）：ECharts的柱狀圖介紹、基礎使用和Qt封裝Demo
前言
Demo演示
ECharts除錯工具
目標
ECharts介面靜態方式
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入剛剛下載的 ECharts 檔案 -->
<!--<script src="echarts.js"></script>-->
<script src="./echarts.js"></script>
<!--<script src="D:/qtProject/echartsDemo/echartsDemo/modules/barEChartWidget/html/echarts.js"></script>-->
<!--<script src="echarts.min.js"></script>-->
<!--<script src="./echarts.min.js"></script>-->
<!--<script src="./html/echarts.min.js"></script>-->
<!--<script src="D:/qtProject/echartsDemo/echartsDemo/modules/barEChartWidget/html/echarts.min.js"></script>-->
</head>
<body>
<!--設定body跟隨查u哪個口，main填充body-->
<style>
#main,
html,
body{
width: 100%;
height: 100%;
overflow: hidden;
}
#main {
width: 100%;
height: 100%;
}
</style>
<div id="main"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts例項
var myChart = echarts.init(document.getElementById('main'));
// 視窗高度變化設定
window.onresize = function() {
myChart.resize();
};
// 指定圖表的配置項和資料
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [
{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
function initJs() {
var myChart = echarts.init(document.getElementById('main'));
var option;
option = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '50',
containLabel: true
},
legend: {
orient: 'horizontal',
x: 'center',
y: 'bottom',
itemGap: 100
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['專案1', '專案2', '專案3']
},
series: [
{
name: '變數1',
type: 'bar',
stack: 'totla',
label: {
show: true
},
data: [11, 12, 13]
},
{
name: '子專案1',
type: 'bar',
stack: 'totla',
label: {
show: true
},
data: [24, 20, 21]
},
{
name: '變數3',
type: 'bar',
stack: 'totla',
label: {
show: true
},
data: [95, 87, 55]
}
]
};
};
initJs();
</script>
</body></html>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 BarEChartWidget::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:/barEChartWidget/html/barEChartWidget.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 BarEChartWidget::slot_loadFinished(bool result){
if(result)
{
initJs();
}}void BarEChartWidget::initJs(){
_initJsStr = QSTRING(
"var option;"
"option = {"
" tooltip: {"
" trigger: 'axis'"
" },"
" grid: {"
" left: '10',"
" right: '10',"
" top: '10',"
" bottom: 30,"
" containLabel: true"
" },"
" legend: {"
" orient: 'horizontal',"
" x: 'center',"
" y: 'bottom',"
" itemGap: 20"
" },"
" xAxis: {"
" type: 'value'"
" },"
" yAxis: {"
" type: 'category',"
" data: ['專案1', '專案2', '專案3']"
" },"
" series: ["
" {"
" name: '變數1',"
" type: 'bar',"
" stack: 'totla',"
" label: {"
" show: true"
" },"
" data: [11, 12, 13]"
" },"
" {"
" name: '變數2',"
" type: 'bar',"
" stack: 'totla',"
" label: {"
" show: true"
" },"
" data: [24, 20, 21]"
" },"
" {"
" name: '變數3',"
" type: 'bar',"
" stack: 'totla',"
" label: {"
" show: true"
" },"
" data: [95, 87, 55]"
" }"
" ]"
"};"
"myChart.setOption(option);");
runJsScript(_initJsStr);}void BarEChartWidget::runJsScript(QString str){
if(_pWebEnginePage)
{
_pWebEnginePage->runJavaScript(str);
}}步驟四：動態執行js操作
重置
void BarEChartWidget::on_pushButton_reset_clicked(){
initJs();}重新整理
void BarEChartWidget::on_pushButton_flush_clicked(){
QString jsStr =
"var empty = {};"
"myChart.setOption(empty, true);"
"myChart.setOption(option, true);";
runJsScript(jsStr);}清空
void BarEChartWidget::on_pushButton_clear_clicked(){
QString jsStr =
"option.series[0].data = [];"
"option.series[1].data = [];"
"option.series[2].data = [];"
"myChart.setOption(option, true);";
runJsScript(jsStr);}隨機生成（使用js程式碼）
void BarEChartWidget::on_pushButton_createRandom_clicked(){
QString jsStr =
"var min = 0;"
"var max = 100;"
"for(var i = 0; i < option.series.length; i++)"
"{"
" for(var j = 0; j < option.yAxis.data.length; j++)"
" {"
" option.series[i].data[j] = Math.floor(Math.random() * (max - min)) + min;"
" }"
"}"
"myChart.setOption(option, true);";
runJsScript(jsStr);}Demo
<!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>#ifndef BARECHARTWIDGET_H#define BARECHARTWIDGET_H#include <QWidget>#include <QWebEngineView>#include <QWebEnginePage>#include <QWebChannel>namespace Ui {class BarEChartWidget;}class BarEChartWidget : public QWidget{
Q_OBJECTpublic:
explicit BarEChartWidget(QWidget *parent = 0);
~BarEChartWidget();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();private:
Ui::BarEChartWidget *ui;private:
QWebEngineView *_pWebEngineView; // 瀏覽器視窗
QWebEnginePage *_pWebEnginePage; // 瀏覽器頁面
QWebChannel *_pWebChannel; // 瀏覽器js互動
QString _htmlDir; // html資料夾路徑
QString _indexFileName; // html檔案
QString _initJsStr; // 第一次初始化的表格};#endif // BARECHARTWIDGET_H#include "BarEChartWidget.h"#include "ui_BarEChartWidget.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")BarEChartWidget::BarEChartWidget(QWidget *parent) :
QWidget(parent),
ui(new Ui::BarEChartWidget),
_pWebEngineView(0),
_pWebEnginePage(0),
_pWebChannel(0),
_htmlDir("D:/qtProject/echartsDemo/echartsDemo/modules/barEChartWidget/html"), // 使用了絕對路徑,引到html資料夾
_indexFileName("barEChartWidget.html"){
ui->setupUi(this);
QString version = "v1.0.0";
setWindowTitle(QString("基於Qt的ECharts條狀圖Demo %1(長沙紅胖子 QQ:21497936 WX:15173255813 blog:hpzwl.blog.csdn.net").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();}BarEChartWidget::~BarEChartWidget(){
delete ui;}void BarEChartWidget::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:/barEChartWidget/html/barEChartWidget.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 BarEChartWidget::slot_loadFinished(bool result){
if(result)
{
initJs();
}}void BarEChartWidget::initJs(){
_initJsStr = QSTRING(
"var option;"
"option = {"
" tooltip: {"
" trigger: 'axis'"
" },"
" grid: {"
" left: '10',"
" right: '10',"
" top: '10',"
" bottom: 30,"
" containLabel: true"
" },"
" legend: {"
" orient: 'horizontal',"
" x: 'center',"
" y: 'bottom',"
" itemGap: 20"
" },"
" xAxis: {"
" type: 'value'"
" },"
" yAxis: {"
" type: 'category',"
" data: ['專案1', '專案2', '專案3']"
" },"
" series: ["
" {"
" name: '變數1',"
" type: 'bar',"
" stack: 'totla',"
" label: {"
" show: true"
" },"
" data: [11, 12, 13]"
" },"
" {"
" name: '變數2',"
" type: 'bar',"
" stack: 'totla',"
" label: {"
" show: true"
" },"
" data: [24, 20, 21]"
" },"
" {"
" name: '變數3',"
" type: 'bar',"
" stack: 'totla',"
" label: {"
" show: true"
" },"
" data: [95, 87, 55]"
" }"
" ]"
"};"
"myChart.setOption(option);");
runJsScript(_initJsStr);}void BarEChartWidget::runJsScript(QString str){
if(_pWebEnginePage)
{
_pWebEnginePage->runJavaScript(str);
}}void BarEChartWidget::resizeEvent(QResizeEvent *event){
if(_pWebEngineView)
{
_pWebEngineView->setGeometry(ui->label_echarts->geometry());
}}void BarEChartWidget::on_pushButton_clear_clicked(){
QString jsStr =
"option.series[0].data = [];"
"option.series[1].data = [];"
"option.series[2].data = [];"
"myChart.setOption(option, true);";
runJsScript(jsStr);}void BarEChartWidget::on_pushButton_flush_clicked(){
QString jsStr =
"var empty = {};"
"myChart.setOption(empty, true);"
"myChart.setOption(option, true);";
runJsScript(jsStr);}void BarEChartWidget::on_pushButton_createRandom_clicked(){
QString jsStr =
"var min = 0;"
"var max = 100;"
"for(var i = 0; i < option.series.length; i++)"
"{"
" for(var j = 0; j < option.yAxis.data.length; j++)"
" {"
" option.series[i].data[j] = Math.floor(Math.random() * (max - min)) + min;"
" }"
"}"
"myChart.setOption(option, true);";
runJsScript(jsStr);}void BarEChartWidget::on_pushButton_reset_clicked(){
initJs();}入坑
入坑一：呼叫js函式失敗
問題
原理
解決
入坑二：Qt的msvc編譯器少數中文亂碼
問題
解決
工程模板v1.2.0
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/70010283/viewspace-2905487/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- Qt+ECharts開發筆記（五）：ECharts的動態排序柱狀圖介紹、基礎使用和Qt封裝DemoQTEcharts筆記排序封裝
- Qt+ECharts開發筆記（一）：ECharts介紹、下載和Qt呼叫ECharts基礎柱狀圖DemoQTEcharts筆記
- Qt+ECharts開發筆記（四）：ECharts的餅圖介紹、基礎使用和Qt封裝百分比圖DemoQTEcharts筆記封裝
- 地圖開發筆記（一）：百度地圖介紹、使用和Qt內嵌地圖Demo地圖筆記QT
- Qt+QtWebApp開發筆記（一）：QtWebApp介紹、下載和搭建基礎封裝http輕量級伺服器DemoQTWebAPP筆記封裝HTTP伺服器
- Qt+ECharts開發筆記（二）：Qt視窗動態調整大小，使ECharts跟隨Qt視窗大小變換QTEcharts筆記
- Qwt開發筆記（二）：Qwt基礎框架介紹、折線圖介紹、折線圖Demo以及程式碼詳解筆記框架
- Qt+騰訊IM開發筆記（一）：騰訊IM介紹、使用和Qt整合騰訊IM-SDK的工程模板DemoQT筆記
- echarts 柱狀圖 詳解與使用集合Echarts
- Echarts 柱狀圖配置詳解Echarts
- Qt+OpenCascade開發筆記（二）：windows開發環境搭建（二）：Qt引入occ庫，搭建基礎工程模板Demo和釋出DemoQT筆記Windows開發環境
- echarts 設定柱狀圖寬度Echarts
- libmatio開發筆記（一）：matlab檔案操作libmatio庫介紹，編譯和基礎DemoIBM筆記Matlab編譯
- Echarts根據資料長度變換柱狀圖柱狀的顏色Echarts
- Qt開發技術：QCharts（三）QCharts樣條曲線圖介紹、Demo以及程式碼詳解QT
- 如何基於 echarts 實現區間柱狀圖（包括橫向）？Echarts
- Qwt開發筆記（一）：Qwt簡介、下載以及基礎demo工程模板筆記
- 九、柱狀圖和3D柱狀圖3D
- echarts如何在每個柱狀圖上都顯示氣泡詳解（好看的柱狀圖）Echarts
- Qt混合Python開發技術：Python介紹、混合過程和DemoQTPython
- 以太坊開發框架Truffle基礎使用介紹框架
- ECharts系列:玩轉ECharts之常用圖（折線、柱狀、餅狀、散點、關係、樹）Echarts
- Xtrabackup介紹和使用【基礎篇】
- 【echarts】柱狀圖設定固定寬度（最大寬度）Echarts
- Linux驅動開發筆記（四）：裝置驅動介紹、熟悉雜項裝置驅動和ubuntu開發雜項裝置DemoLinux筆記Ubuntu
- ECharts圖表——封裝通用配置Echarts封裝
- 【筆記】Python基礎（二）運算子介紹筆記Python
- 柱狀圖
- ECharts資料圖表使用介紹 超詳細Echarts
- echarts 3D圓柱圖Echarts3D
- python-資料分析-Matplotlib-1-基礎圖形（曲線圖-散點-柱狀-堆疊柱狀-餅狀圖-直方圖）Python直方圖
- 如何基於 echarts 在柱狀圖或條形圖上實現轉換率？（有想法嗎？）Echarts
- QGIS開發筆記（二）：Windows安裝版二次開發環境搭建（上）：安裝OSGeo4W執行依賴其Qt的基礎環境Demo筆記Windows開發環境QT
- vue 基礎入門筆記 14:發表評論 demoVue筆記
- Lustre架構介紹的閱讀筆記-基礎知識架構筆記
- 圖神經網路的介紹（基礎，DeepWalk和GraphSage）神經網路
- Qt開發技術：圖形檢視框架（一）基本介紹QT框架
- Qt+QtWebApp開發筆記（二）：http伺服器日誌系統介紹、新增日誌系統至Demo測試QTWebAPP筆記HTTP伺服器