利用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代码的结构为:



    
    ECharts


    
    

可以看到,使用ECharts最简单的只有5个步骤。使用不同的报表,那么只需要改变第4步中Option的参数即可。而利用我们二中的JavaScript代码段即可完成这个功能。

最后,对option常用的几个参数进行说明:

title :图形的标题

tooltip :鼠标移上去的提示

legend :图例

toolbox :工具箱

xAxis:X轴

yAyis:Y轴

Series:数据集

你可能感兴趣的:(web)