QT编写Echart动态交互示例（仪表盘）

liudianwu · 2016-5-6 09:57:42

之前发过一个帖子：qt与echarts配合打造最强图表库 http://www.qtcn.org/bbs/read-htm-tid-59111.html 有很多人问如何实现与图表的交互，如果用重复生成html的形式重新加载网页，很费CPU的，极不可取。
这次重新研究了下webkit与JS交互的方法，特意写了下Echart动态交互示例（仪表盘），分享下。
PS：亲测Qt4.7.0 Qt4.8.7 Qt5.4.1 Qt5.7.0。

代码极为简洁：

#include "widget.h"
#include "ui_widget.h"
#include <QtWebKit>
#if (QT_VERSION > QT_VERSION_CHECK(5,0,0))
#include <QtWebKitWidgets>
#endif
Widget::Widget(QWidget *parent) :
QWidget(parent),
ui(new Ui::Widget)
{
ui->setupUi(this);
ui->webView->load(QUrl(qApp->applicationDirPath() + "/gauge.html"));
}
Widget::~Widget()
{
delete ui;
}
void Widget::on_horizontalSlider_valueChanged(int value)
{
QString js = QString("init(%1)").arg(value);
ui->webView->page()->mainFrame()->evaluateJavaScript(js);
}

复制代码

<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html,body{height:100%;width:100%;margin:0px;padding:0px;}
#main{height:100%;width:100%;}
</style>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main"></div>
</body>
</html>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
function init(currentValue){
var option = {
tooltip:{formatter:"{a}
{b} : {c}%"},
toolbox:{feature:{restore:{},saveAsImage:{}}},
series:[{name: '业务指标',type: 'gauge',detail: {formatter:'{value}%'},data: [{value: currentValue, name: '完成率'}] }]};
myChart.setOption(option);
}
window.onresize = myChart.resize ;
init(0);
</script>

复制代码

源码下载：
QT集成的webkit模块非常强大，在ARM上也可以用，与WEB结合可以做出非常好的作品。
近期完成的一个项目截图（webkit与百度地图交互）：

huina_zhao · 2018-1-22 08:45:36

在Qt5.6.0下无法运行诶，总提示 :-1: error: Unknown module(s) in QT: webkit webkitwidgets

dearcc · 2018-2-8 08:56:44

huina_zhao 发表于 2018-1-22 08:45
在Qt5.6.0下无法运行诶，总提示 :-1: error: Unknown module(s) in QT: webkit webkitwidgets ...

用QWebView试试，调用方法一样。

huina_zhao · 2018-2-9 08:01:31

好的，我试试看，谢谢你~

tigmer · 2019-3-11 10:44:07

Echart导入JS数据，提高性能

帐号		自动登录	找回密码
密码			立即注册

账号		自动登录	找回密码
密码			立即注册

QT编写Echart动态交互示例（仪表盘）

本帖子中包含更多资源

相关帖子