QT(html)通过echart 展示统计数据(qt 和js进行通信)

最近需要用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 代码太多，就不贴出来了

QT(html)通过echart 展示统计数据(qt 和js进行通信)

猜你喜欢