Qt与 Js (html) 交互实现酷炫3D曲面图_js 制作界面怎么显示到qt-优快云博客

博客介绍了使用Qt与JS交互实现酷炫3D曲面图的方法。提到Qt不同版本使用的模块不同，5.6以上用webenginewidgets模块，5.6之前用webkitwidgets模块。还说明了与JS交互需引用qwebchannel.js文件，以及在Qt里调用JS函数的方式，JS代码调用的是Echarts。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上个图片：

在这里插入图片描述
Qt 5.6以上的版本用到的是[webenginewidgets]模块
5.6之前的版本是[webkitwidgets]模块
Qt5.5.1是最后一个支持webkitwidgets的版本

开始写代码

在这里插入图片描述

QWebEngineView* m_webView;
m_webView = new QWebEngineView(ui->label);

m_webView->load(QUrl(QCoreApplication::applicationDirPath()+"//HTML//3Dplot.html"));

这样一个简单的 html 网页就加载成功了

与JS交互

在这里插入图片描述
需要Qt官方提供的这个 qwebchannel.js文件

在这里插入图片描述
在自己的js 里上这么一句引用这个js文件,注意路径这是同级目录下

在这里插入图片描述

在Js 写一个Qt对象,现在要回到Qt 里面写一个js对象

写个Js对象类

jscontext.h

#ifndef JSCONTEXT_H
#define JSCONTEXT_H

#include <QObject>
#include <QWebEnginePage>

class JsContext : public QObject
{
    Q_OBJECT
public:
    explicit JsContext(QObject *parent = nullptr);

    void sendMsg(QWebEnginePage* page,const QString msg);

signals:
    void recvdMsg( QString msg);



public slots:
    //接收网页来的信息
    void onMsg( QString msg);
};

#endif // JSCONTEXT_H

jscontext.cpp

#include "jscontext.h"

JsContext::JsContext(QObject *parent) : QObject(parent)
{

}

void JsContext::sendMsg(QWebEnginePage *page, const QString msg)
{
    page->runJavaScript(QString("recvMessage('%1');").arg(msg));
}

void JsContext::onMsg( QString msg)
{
    emit recvdMsg(msg);
}

在这里插入图片描述

    m_webView->page()->runJavaScript(QString("updateImg('%1')").arg(str));

runJavaScript() 里面就写你Js的 function 名字实现调用

js 代码：

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
	   <script type="text/javascript" src="./qwebchannel.js"></script>
   </head>
   <body style="height: 100%; margin: 0">
   
   <button onclick="updateImg('[[-1,-1,0],[-0.5,-1,0],[0,-1,0],[0.5,-1,0],[1,-1,0],[-1,-0.5,0],[-0.5,-0.5,0],[0,-0.5,0],[0.5,-0.5,0],[1,-0.5,0],[-1,0,0],[-0.5,0,0],[0,0,0],[0.5,0,0],[1,0,0],[-1,0.5,0],[-0.5,0.5,0],[0,0.5,0],[0.5,0.5,0],[1,0.5,0],[-1,1,0],[-0.5,1,0],[0,1,0],[0.5,1,0],[1,1,0]]')">update</button>
   

		
       <div id="container" style="height: 100%"></div>
	   <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=写自己的AK码（去百度开发人员申请）"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
	   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom ;
var myChart;
var app = {};
option = null;

//qt 对象
var context = null;

 function init()
 {
	if(typeof qt != 'undefined')
	{
		new QWebChannel(qt.webChannelTransport,function(channel)
		{
		context = channel.objects.context;
		}
		);
	}
	else
	{
		alert("qt 对象获取失败");
	}
  
 }
 


function writeObj(obj){ 
 var description = ""; 
 for(var i in obj){ 
 var property=obj[i]; 
 description+=property; 
 } 
 alert(description); 
}



option = {
    tooltip: {},
    backgroundColor: '#fff',

	visualMap: {
        show: false,
        dimension: 2,
        min: -1,
        max: 1,
        inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
        }
    },

    xAxis3D: {
        type: 'value',
		name: 'smy'
    },
    yAxis3D: {
        type: 'value'
    },
    zAxis3D: {
        type: 'value',
		
    },
    grid3D: {
        viewControl: {
            // projection: 'orthographic',
			autoRotate: true
        }
		
    },

    series: [{
        type: 'surface',
        wireframe: {
             //show: false
        }	

    }]

};



function updateImg(data){
/*
	option.series[0].data = [
    [-1,-1,0],[-0.5,-1,0],[0,-1,0],[0.5,-1,0],[1,-1,0],
    [-1,-0.5,0],[-0.5,-0.5,1],[0,-0.5,0],[0.5,-0.5,-1],[1,-0.5,0],
    [-1,0,0],[-0.5,0,0],[0,0,0],[0.5,0,0],[1,0,0],
    [-1,0.5,0],[-0.5,0.5,-1],[0,0.5,0],[0.5,0.5,1],[1,0.5,0],
    [-1,1,0],[-0.5,1,0],[0,1,0],[0.5,1,0],[1,1,0]
	];

*/
	var da = JSON.parse(data);
	
	option.series[0].data = da;

	//console.log(da);
	
	console.log(option.series[0].data);

	dom = document.getElementById("container");
	
	myChart = echarts.init(dom);	 
	myChart.setOption(option, true);
}


 function testsmy(x){
	writeObj(x);
}



  //构造函数
  window.onload=function (){
	
	init();
    
  }

</script>
	   

	   
   </body>
</html>

这JS代码里面调用的 script是 Echarts 可以去看一下怎么配置以及他的API

https://echarts.baidu.com/index.html