Qt+ECharts開發(fā)筆記（一）：ECharts介紹、下載和Qt調(diào)用ECharts基礎(chǔ)柱狀圖Demo
前言
??使用Qt開發(fā)大數(shù)據(jù)可視化看板，基于Qt使用QWidget或者QML是很難達到ECharts大數(shù)據(jù)看板的效果，所以使用Qt來制作。
核心思想
??每一個ECharts圖表使用一個無邊框的QWebView來展示，這樣多個不同類型的ECharts圖表就是多個封裝不同類型ECharts圖表的QWebView（html加載入QWebView窗口來實現(xiàn)），每一個模塊封裝的數(shù)據(jù)用qt預留接口調(diào)用js代碼實現(xiàn)修改html的功能，最終達到代碼操作qt即可操作圖表的功能。
Demo演示
??
??為了實現(xiàn)我們多模塊化，窗口的背景透明是很關(guān)鍵的，測試背景透明：
??
??提升窗口背景透明效果：
??
??測試結(jié)果可以達到預期。
ECharts
簡介
??ECharts，縮寫來自 Enterprise Charts，商業(yè)級數(shù)據(jù)圖表，是百度的一個開源的數(shù)據(jù)可視化工具，一個純 Javascript 的圖表庫，能夠在 PC 端和移動設(shè)備上流暢運行，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的 Canvas 庫 ZRender，ECharts 提供直觀，生動，可交互，可高度個性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計算、數(shù)據(jù)視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數(shù)據(jù)進行挖掘、整合的能力。
主要功能
??ECharts 提供了常規(guī)的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統(tǒng)計的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、treemap、旭日圖，多維數(shù)據(jù)可視化的平行坐標，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。
下載
??官網(wǎng)地址：echarts.apache.org
??在線定制：echarts.apache.org/zh/builder.html
??一個一個封裝，所以僅勾選柱狀圖
??
??
??經(jīng)過等待：
??
??然后會卡住，卡住的原因是因為勾選了“兼容IE8”，所以補勾選久可，請耐心等下，最后會下載一個js，如下圖：
??
??
??那么直接使用全部下下來的吧，3.5MB左右，并不是很大，后續(xù)如果細化發(fā)布再看使用到了什么去定制什么。
Qt中引入ECharts
步驟一：引入web模塊
??這個很關(guān)鍵，在Qt5.6以后使用了谷歌瀏覽器內(nèi)核，不再支持mingw32版本的，所以要使用msvc版本的Qt。
??
??msvc遇到了錯誤，參照《關(guān)于 Qt編譯時使用msvc編譯器報錯“Error: cannot open …main.obj.10836.32.jom for write” 的解決方法》解決。
QT += webenginewidgets
步驟二：初始化窗口
??構(gòu)造函數(shù)中，置0
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調(diào)用EChartsDemo %1(長沙紅胖子 QQ:21497936 WX:15173255813 blog:hpzwl.blog.csdn.net").arg(version));
? ?// 設(shè)置無邊框，以及背景透明
? ?// 背景透明，在界面構(gòu)架時，若為本窗口為其他窗口提升為本窗口時，
? ?// 則再qss會在主窗口第一級添加frame_all，防止其他窗口提升本窗口而沖掉qss設(shè)置// ? ?setWindowFlag(Qt::FramelessWindowHint);
? ?setAttribute(Qt::WA_TranslucentBackground, true);
? ?// 讓滾動條不出來
? ?resize(600 + 20, 400 + 20);
? ?initControl();}
??一個是瀏覽器窗口初始化，一個是js交互的初始化
void BarEChartWidget::initControl(){
? ?_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:/barEChartWidget/html/barEChartWidget.html";#endif
? ?LOG << "file exist:" << QFile::exists(filePath) << filePath;#if 0
? ?// 打印html文件內(nèi)容
? ?QFile file(_indexFilePath);
? ?file.open(QIODevice::ReadOnly);
? ?LOG << QString(file.readAll());
? ?file.close();#endif
? ?_pWebEnginePage->load(QUrl(filePath));
? ?_pWebEnginePage->setWebChannel(_pWebChannel);
? ?_pWebEngineView->setPage(_pWebEnginePage);
? ?// 背景透明// ? ?_pWebEngineView->setStyleSheet("background-color: transparent");// ? ?_pWebEnginePage->setBackgroundColor(Qt::transparent);}
步驟三：窗口大小跟隨
void BarEChartWidget::resizeEvent(QResizeEvent *event){
? ?if(_pWebEngineView)
? ?{
? ? ? ?_pWebEngineView->setGeometry(rect());
? ?}}
模塊化
??這是柱狀圖模塊。
??
Demo
BarEChartWidget.h
#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:
? ?void resizeEvent(QResizeEvent *event);private:
? ?Ui::BarEChartWidget *ui;private:
? ?QWebEngineView *_pWebEngineView; ? ? ? ? ? ?// 瀏覽器窗口
? ?QWebEnginePage *_pWebEnginePage; ? ? ? ? ? ?// 瀏覽器頁面
? ?QWebChannel *_pWebChannel; ? ? ? ? ? ? ? ? ?// 瀏覽器js交互
? ?QString _htmlDir; ? ? ? ? ? ? ? ? ? ? ? ? ? // html文件夾路徑
? ?QString _indexFileName; ? ? ? ? ? ? ? ? ? ? // html文件};#endif // BARECHARTWIDGET_H
BarEChartsWidget.cpp
#include "BarEChartWidget.h"#include "ui_BarEChartWidget.h"#include <QFile>#include <QMessageBox>// QtCreator在msvc下設(shè)置編碼也或有一些亂碼，直接一刀切,避免繁瑣的設(shè)置#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調(diào)用EChartsDemo %1(長沙紅胖子 QQ:21497936 WX:15173255813 blog:hpzwl.blog.csdn.net").arg(version));
? ?// 設(shè)置無邊框，以及背景透明
? ?// 背景透明，在界面構(gòu)架時，若為本窗口為其他窗口提升為本窗口時，
? ?// 則再qss會在主窗口第一級添加frame_all，防止其他窗口提升本窗口而沖掉qss設(shè)置// ? ?setWindowFlag(Qt::FramelessWindowHint);
? ?setAttribute(Qt::WA_TranslucentBackground, true);
? ?// 讓滾動條不出來
? ?resize(600 + 20, 400 + 20);
? ?initControl();}BarEChartWidget::~BarEChartWidget(){
? ?delete ui;}void BarEChartWidget::initControl(){
? ?_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:/barEChartWidget/html/barEChartWidget.html";#endif
? ?LOG << "file exist:" << QFile::exists(filePath) << filePath;#if 0
? ?// 打印html文件內(nèi)容
? ?QFile file(_indexFilePath);
? ?file.open(QIODevice::ReadOnly);
? ?LOG << QString(file.readAll());
? ?file.close();#endif
? ?_pWebEnginePage->load(QUrl(filePath));
? ?_pWebEnginePage->setWebChannel(_pWebChannel);
? ?_pWebEngineView->setPage(_pWebEnginePage);
? ?// 背景透明// ? ?_pWebEngineView->setStyleSheet("background-color: transparent");// ? ?_pWebEnginePage->setBackgroundColor(Qt::transparent);}void BarEChartWidget::resizeEvent(QResizeEvent *event){
? ?if(_pWebEngineView)
? ?{
? ? ? ?_pWebEngineView->setGeometry(rect());
? ?}}
barEChartWidget.html
<!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>
? ?<!-- 為 ECharts 準備一個定義了寬高的 DOM -->
? ?<div id="main" style="width:600px; height:400px;"></div>
? ?<script type="text/javascript">
? ? ? ?// 基于準備好的dom，初始化echarts實例
? ? ? ?const myChart = echarts.init(document.getElementById('main'));
? ? ? ?// 指定圖表的配置項和數(shù)據(jù)
? ? ? ?var option = {
? ? ? ? ? ?title: {
? ? ? ? ? ? ? ?text: 'ECharts 入門示例'
? ? ? ?},
? ? ? ?tooltip: {},
? ? ? ?legend: {
? ? ? ? ? ?data: ['銷量']
? ? ? ?},
? ? ? ?xAxis: {
? ? ? ? ?data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
? ? ? ?},
? ? ? ?yAxis: {},
? ? ? ?series: [
? ? ? ? ?{
? ? ? ? ? ?name: '銷量',
? ? ? ? ? ?type: 'bar',
? ? ? ? ? ?data: [5, 20, 36, 10, 10, 20]
? ? ? ? ?}
? ? ? ?]
? ? ? ?};
? ? ? ?// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
? ? ? ?myChart.setOption(option);
? ?</script>
?</body></html>
工程模板v1.0.0
??
入坑
入坑一：“js: Uncaught TypeError: echarts.init is not a function”錯誤
問題
??
??
???
??各種測試都不行：
??
解決方法
??echarts的版本5.x太高，換成低版本的4.x就解決了
??https://github.com/apache/echarts/tree/4.9.0/dist
??成功加載：
