版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_22991367/article/details/81879128
由于项目原因,经常需要在前端展现各种统计效果,而CS架构每次用QT做图既繁琐又不美观。利用百度的开源echarts控件完美解决。
1、qt版本4.8.5,echarts3,
2、qt中需要包含的头文件为:QWebView,QtWebKit,QWebFrame
3、QT向JavaScript中传递数据主要通过evaluateJavaScript函数进行
4、QT通过json字符串和JavaScript之间进行数据交互
一、以下为C++代码段:
完成qt向JavaScript传递参数:
QString str = QString("ReceiveData(\"%1\")").arg(json_str);
ui->webView->page()->mainFrame()->evaluateJavaScript(str);
其中,ReceiveData是JavaScript中接收qt传递json字符串的函数名 ,“%1”表示参数1
如果传递两个参数则为:
QString cmd = QString("ReceiveData(\"%1\",\"%2\")").arg(firJson).arg(lstJson);
注意:json_str为JSON字符串,将传递的参数转换为JSON字符串,在JavaScript中方便解析。
二、以下为JavaScript代码段:
function ReceiveData(jsondata){
//TODO 由json字符串转化为json对象
var json = JSON.parse(jsondata);
option.title.text=json.title;
//根据传递的参数修改echarts图表中option的参数,完成图表数据的展现
// 修改完成后实用setOption来设定图表。
myChart.setOption(option);
}
三、解释下echarts的使用
我们可以在github上下载echarts源码,在test目录下可以看到很多实例,一般来说
ECharts代码的结构为:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 1.为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width:800px;height:400px;margin: 0 auto;" ></div>
<!-- 2.ECharts单文件引入 -->
<script src="js/echarts-plain.js"></script>
<script type="text/javascript">
<!-- 3.基于准备好的dom,初始化echarts图表 -->
var myChart = echarts.init(document.getElementById('main'));
<!-- 4.Option参数 -->
<!-- 省略Option代码 -->
<!-- 5.加载数据 -->
myChart.setOption(option);
</script>
</body>
可以看到,使用ECharts最简单的只有5个步骤。使用不同的报表,那么只需要改变第4步中Option的参数即可。而利用我们二中的JavaScript代码段即可完成这个功能。
最后,对option常用的几个参数进行说明:
title :图形的标题
tooltip :鼠标移上去的提示
legend :图例
toolbox :工具箱
xAxis:X轴
yAyis:Y轴
Series:数据集