利用QT的WebKit模組實現CS架構前端介面echarts顯示
阿新 • • 發佈：2019-02-17
由於專案原因，經常需要在前端展現各種統計效果，而CS架構每次用QT做圖既繁瑣又不美觀。利用百度的開源echarts控制元件完美解決。
1、qt版本4.8.5，echarts3,
2、qt中需要包含的標頭檔案為：QWebView，QtWebKit，QWebFrame
3、QT向JavaScript中傳遞資料主要通過evaluateJavaScript函式進行
4、QT通過json字串和JavaScript之間進行資料互動
一、以下為C++程式碼段：
完成qt向JavaScript傳遞引數：
QString str = QString("ReceiveData(\"%1\")").arg(json_str); ui->webView->page()->mainFrame()->evaluateJavaScript(str);
其中，ReceiveData是JavaScript中接收qt傳遞json字串的函式名 ，“%1”表示引數1
如果傳遞兩個引數則為：
QString cmd = QString("ReceiveData(\"%1\",\"%2\")").arg(firJson).arg(lstJson);注意：json_str為JSON字串，將傳遞的引數轉換為JSON字串，在JavaScript中方便解析。
二、以下為JavaScript程式碼段：
function ReceiveData(jsondata){ //TODO 由json字串轉化為json物件 var json = JSON.parse(jsondata); option.title.text=json.title; //根據傳遞的引數修改echarts圖表中option的引數，完成圖表資料的展現 // 修改完成後實用setOption來設定圖表。 myChart.setOption(option); }
三、解釋下echarts的使用
我們可以在github上下載echarts原始碼，在test目錄下可以看到很多例項，一般來說
ECharts程式碼的結構為：
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ECharts</title> </head> <body> <!-- 1.為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="width:800px;height:400px;margin: 0 auto;" ></div> <!-- 2.ECharts單檔案引入 --> <script src="js/echarts-plain.js"></script> <script type="text/javascript"> <!-- 3.基於準備好的dom，初始化echarts圖表 --> var myChart = echarts.init(document.getElementById('main')); <!-- 4.Option引數 --> <!-- 省略Option程式碼 --> <!-- 5.載入資料 --> myChart.setOption(option); </script> </body>
可以看到，使用ECharts最簡單的只有5個步驟。使用不同的報表，那麼只需要改變第4步中Option的引數即可。而利用我們二中的JavaScript程式碼段即可完成這個功能。
最後，對option常用的幾個引數進行說明：
title ：圖形的標題
tooltip ：滑鼠移上去的提示
legend ：圖例
toolbox ：工具箱
xAxis：X軸
yAyis：Y軸
Series：資料集