QT4.8.6与echart图，实现数据的实时更新

最新推荐文章于 2024-10-21 15:38:21 发布

原创最新推荐文章于 2024-10-21 15:38:21 发布 · 927 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#QT #echart #webkit/webview #实时刷新数据视图

本文介绍如何使用Echart在QT中通过webview实时更新统计图表数据，包括动态改变视图功能及代码实现，适合需要实时展示数据变化的项目。

由于项目中要使用一些统计图表，经过查找资料选择了echart图

参考：https://blog.youkuaiyun.com/qq_35448976/article/details/79072788

下面是其中两个统计视图的gif效果图

上图中主要实现了根据数据的变化去动态改变统计视图的功能，当然echart还有很多其他的功能可以实现（参考https://blog.youkuaiyun.com/bruce__taotao/article/details/52815550）

QT中使用webview，实时调用HTML中的refreshData()函数，从而实时更新统计视图数据，代码如下：

m_webView->page()->mainFrame()->evaluateJavaScript(QString("refreshData(\"%1\",\"%2\",\"%3\",\"%4\",\"%5\")").arg(js[0]).arg(js[1]).arg(js[2]).arg(js[3]).arg(js[4]));

HTML中refreshData()函数的实现如下：

function refreshData(num0 , num1 ,num2 ,num3 ,num4){
		json = [];
		json.push(num0);
		json.push(num1);
		json.push(num2);
		json.push(num3);
		json.push(num4);
		
     if(!myChart){
          return;
     }
     
     //更新数据
      var option = myChart.getOption();
      option.series[0].data = json;   
      myChart.setOption(option);    
	}

具体代码下载：

https://download.youkuaiyun.com/download/xumingyifrend/11171457

欢迎大家指教，希望大家喜欢

路漫漫其修远兮，同志仍须努力