最近需要用QT 去统计一些数据展示在界面上,如果去调用QT 库绘制的话,动画效果不好,样式还的调整,需要研究的东西还挺多,原来做过echart的东西,就想着webview空间,直接加载html界面,再通过js 调用qt的槽函数来处理
下面是主要的代码实现
//通信类
class JsContext : public QObject
{
Q_OBJECT
Q_PROPERTY(QJsonArray text MEMBER m_armInfo NOTIFY textChanged) // 不能缺少,如果缺少界面无法识别
public:
explicit JsContext(QObject *parent = nullptr) : QObject(parent) {}
void setQJsonArray(const QJsonArray &text);
void setQJsonObject(QJsonObject text);
void setArmInfo();
signals:
void textChanged(const QJsonArray &text);
private:
QJsonArray m_armInfo;
};
void JsContext::setArmInfo()
{
emit textChanged(m_armInfo); // 发送信号给js,在QT端发送
}
void JsContext::setQJsonObject(QJsonObject text)
{
auto it = text.find("type");
if (it == text.end())
{
return;
}
bool flag = false;
for (int i = 0; i < m_armInfo.count(); i++)
{
auto tempit = m_armInfo.at(i);
auto hh1 = tempit.toObject();
auto hh = hh1.find("type");
if (hh->toInt() == it->toInt())
{
m_armInfo.removeAt(i);
m_armInfo.append(text);
flag = true;
}
}
if (!flag)
{
m_armInfo.append(text);
}
}
// 界面窗口类
class TDStatisticalTableWidget : public QDockWidget
{
Q_OBJECT
public:
TDStatisticalTableWidget(QDockWidget *p = NULL);
public:
QWebEngineView *m_webEngineView;
QWebChannel *m_webChannel;
JsContext * m_jsContext;
public:
QString dealWithString();
void setSendTextText(QString text);
};
TDStatisticalTableWidget::TDStatisticalTableWidget(QDockWidget *p)
:QDockWidget(p)
{
m_webEngineView = new QWebEngineView(this);
auto myPluginsDir = QApplication::applicationDirPath() + "/Resources/html/index.html";
m_webEngineView->setUrl(QUrl(myPluginsDir));
m_webChannel = new QWebChannel();
m_jsContext = new JsContext(this);
**m_webChannel->registerObject(QStringLiteral("context"), m_jsContext);**
m_webEngineView->page()->setWebChannel(m_webChannel);
this->setWidget(m_webEngineView);
}// 窗口初始化
基本上qt端的核心代码就这些,剩下的根据业务进行计算的就不贴出来了
js端的实现
index.html 的 header需要引入的js
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="js/echarts.js"></script>
<!--<script src="js/echarts.common.min.js"></script>-->
<script src="js/macarons.js"></script>
<script src="js/qwebchannel.js"></script>
<script src="js/marked.min.js"></script>
<script src="js/main.js"></script>
<script src="js/echarts-gl.js"></script>
<script src="js/bmap/bmap.min.js"></script>
<script src="https://api.map.baidu.com/api?v=2.0&ak=1Hon7GtsAjuNuCgBAWS6EtvSUZHmp9Gk"></script>
</head>
index.html 的 body需要引入的js 这里图标比较多
<body>
<div id="graph_form_columnar" style="height:200px;display: none;"></div>
<div id="graph_form_bar" style="height:200px;display: none;"></div>
<div id="graph_form_linear" style="height:200px;display: none;"></div>
<div id="graph_form_pie" style="height:200px;display: none;"></div>
<div id="graph_form_annular" style="height:200px;display: none;"></div>
<div id="graph_form_bubble" style="height:200px;display: none;"></div>
<div id="graph_form_area" style="height:200px;display: none;"></div>
<div id="graph_form_hash" style="height:200px;display: none;"></div>
<div id="graph_form_radar" style="height:400px;display: none;"></div>
<div id="graph_form_3d" style="height:400px;display: none;"></div>
<div id="graph_form_China" style="height:400px;display: none;"></div>
<script>
// var placeholder = document.getElementById('test');
function getdivnameBytype(obj)
{
switch(obj.type)
{
case 0: return graph_form_columnar(obj.name,obj,'graph_form_columnar');
case 1: return graph_form_bar(obj.name,obj,'graph_form_bar');
case 2: return graph_form_linear(obj.name,obj,'graph_form_linear');
case 3: return graph_form_pie('hhhj',['最新成交价', '预购队列'],'graph_form_pie');
case 4: return graph_form_annular('hhhj',['最新成交价', '预购队列'],'graph_form_annular');
case 5: return graph_form_bubble('hhhj',['最新成交价', '预购队列'],'graph_form_bubble');
case 6: return graph_form_area(obj.name,obj,'graph_form_area');
case 7: return graph_form_hash('hhhj',['最新成交价', '预购队列'],'graph_form_hash');
case 8: return graph_form_radar('hhhj',['最新成交价', '预购队列'],'graph_form_radar');
case 9: return graph_form_3D('hhhj',['最新成交价', '预购队列'],'graph_form_3d');
case 10: return graph_form_baidu('hhhj',['最新成交价', '预购队列'],'graph_form_China');
default:
}
}//拿到数据之后的渲染函数
//从qt的信号中拿到jsonArray对象处理函数
var callfun = function(text) {
for(var i = 0; i < text.length; i++)
{
getdivnameBytype(text[i]);
}
}
//qt 所支持的获取qt对象的方法
new QWebChannel(qt.webChannelTransport,
function(channel) {
var content = channel.objects.context; // 获取绑定对象,qt端对应的代码 m_webChannel->registerObject(QStringLiteral("context"), m_jsContext);
callfun(content.text);
content.textChanged.connect(callfun); //给QT 信号绑定js端的处理函数
}
);
</script>
</body>
main.js 代码太多,就不贴出来了