在QT中集成Echarts

Echarts是百度的可视化图表库(js)，有各种漂亮的折线、饼、柱、雷达、散点图，之前做网页信息图表时就体会到它具有很强大的表达能力（不仅仅是展示数据，更重要的是表达信息），所以很想把它集成到QT中，代替目前手头已开发的软件中的qwt。
目标：
在QT实现的软件中嵌入Echarts折线图，折线图中的数据、标题等从qt部分传给Echarts的js部分。

实现：
1.在QT界面中使用QWebView来装载一个包含Echarts折线图的html页面。
2.QT向html传递数据时使用json格式字符串。
3.html和js文件作为QT RESOURCES打包编译，这样发布时只有一个可执行程序，没有额外的配置。

遗留问题：可能是操作系统的X11库有bug，我遭遇了下面这样的错误，有时在关闭界面时会coredump。

XIO:  fatal IO error 11 (资源暂时不可用) on X server "愼U"
      after 36191 requests (36190 known processed) with 0 events remaining.      

使用到的开源软件如下，非常感谢前人的轮子！！！
Echarts实例
qt与echarts配合打造最强图表库 我的代码是在他的开源上的一些增加
cJSON 一个非常好用的C语言解析JSON的开源库

我的代码文件结构如下所示，res目录下是html和js文件，通过qrc文件指定资源，就可以将其静态打包到可执行程序中，cJSON是处理json结构对象和字符串的c库，widget是处理加载页面，传参到js的qt程序

部分源码在这里，写了一些注释。
main.cpp

#include "widget.h"
#include 
#include 

int main(int argc, char *argv[])
{
    QTextCodec::setCodecForTr( QTextCodec::codecForName("utf8") );
    QTextCodec::setCodecForCStrings( QTextCodec::codecForName("utf8") );
    QTextCodec::setCodecForLocale( QTextCodec::codecForName("utf8") );
    Q_INIT_RESOURCE(main);
    QApplication a(argc, argv);

    Widget w;
    w.show();
    return a.exec();
}

widget.cpp

#include 
#include "widget.h"
#include "ui_widget.h"
#include "cJSON.h"

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->webView->load(QUrl("qrc:/res/curve.html")); //加载页面
}

Widget::~Widget()
{
    delete ui;
}

void Widget::on_btnLine_clicked()
{
    // 创建一些随机数
    float array[1440];
    int max=1000, min=0;
    struct    timeval tv_rand;
    for (int i=0; i<1440; i++)
    {
        gettimeofday(&tv_rand, (struct timezone*)0);
        srand(tv_rand.tv_usec);
        array[i] = (rand() % ((int)max*10000 - (int)min*10000))/10000.0 + min;
    }
    
    // 构建用于传输数据的json对象
    cJSON *root;
    char *out;
    root=cJSON_CreateObject();    
    // json对象结构 {"title":"xxxxx", "value":[float array]}
    cJSON_AddStringToObject(root, "title", "日负荷曲线"); // 有中文的需求要注意使用UTF-8编码
    cJSON_AddItemToObject(root, "value", cJSON_CreateFloatArray(array, 1440));
    out=cJSON_Print(root); // json对象转字符串
    cJSON_Minify(out); // 去掉字符串中的换行和缩进
    QString str = QString(out);
    cJSON_Delete(root);
    
    // 把json字符串中所有双引号前面再加上一个转义符 
    // 因为这个字符串到了js里面还要被parseJSON一次，所以\\不可少
    str.replace(QRegExp("\""), "\\\""); 
    
    // callfromqt是js中的函数名 str是其入参
    QString strVal = QString("callfromqt(\"%1\");").arg(str);
    printf("strVal : %s \n", strVal.toStdString().c_str());
    
    // 调用js中的函数
    ui->webView->page()->mainFrame()->evaluateJavaScript(strVal);  
}

curve.html

小结：
QT向js传递参数中有中文的话，qt文件要存为UTF-8的格式，否则会造成乱码。
以json字符串传递参数是，要对引号再加一次转义符，否则在js中无法解析。
Echarts在网页上展示数据的性能号称20W数据秒级出图，但在QT中出图的动画效果有明显卡顿，但仍在可接受范围内。