利用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最简单的只有5个步骤。使用不同的报表，那么只需要改变第4步中Option的参数即可。而利用我们二中的JavaScript代码段即可完成这个功能。

最后，对option常用的几个参数进行说明：

title ：图形的标题

tooltip ：鼠标移上去的提示

legend ：图例

toolbox ：工具箱

xAxis：X轴

yAyis：Y轴

Series：数据集