|
之前发过一个帖子: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与百度地图交互):
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
|