利用QT的WebKit模块实现CS架构前端界面echarts显示

由于项目原因，经常需要在前端展现各种统计效果，而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：数据集

利用QT的WebKit模块实现CS架构前端界面echarts显示

猜你喜欢