Qt用ECharts绘制饼状图（Qt与JS交互）——Qt

前言

这次项目涉及到的东西很杂，其中涉及到了要绘制图表，我之前用的比较熟练的是Qt自带的QtChart，但这次Qt开发工具是5.5版本的，而 5.7才自带这个工具；所以根据当时的资源，选择了ECharts，上手快，图表类型多，又好看。

虽然，不是第一次用ECharts，但是也和第一次差不多，之前只涉及到了皮毛，这次希望比之前多一点点。

理论和代码

理论

   ECharts，商业级数据图表，它是一个纯JavaScript的图标库，常用的图表形式，如折线图、柱状图，饼状图、雷达图等，都可绘制，而且效果好看。这是做Web前端的，经常会用到的工具。这里我就不细说ECharts，一则这个官网教程很详细，再则我也是个门外汉，只会简单的。

而Qt要显示web部分的东西，肯定是要用到QtWebkit或者 QtWebEngine，这个视版本而定。

若只是要显示，这个没什么好说的；若涉及到交互，这里面学问可大了。我之前写过一篇博文，是通过QtChannel实现交互的，也就是通过信号传输数据；这次用的比较普遍的一个用法，Qt自带的，而且更简单粗暴：参数传值（捂脸），参数格式我要选用的是json格式，为啥用json格式呢，因为人家全称JavaScript Object Notation，这样可以传入后直接当变量使用。

代码

版本：Qt5.7msvc

绘制了饼状图：通过Qt给ECharts传数据而绘制成的，点击图例ECharts会反馈给Qt图例的名称，即实现了Qt与JS的互调。在数据的处理部分，有一点小技巧。下面是我代码的说明：

pro文件添加

QT       +=webkitwidgets

初始化webView：QWebSettings设置对js的使能，此句可有可无，此处只是为了体现QWebSettings的用途，若后续添加对其他部分的使能，可在此添加；获取文件路径进行加载。由于我将html文件方法运行路径下，而我用windows的方法获取到的运行路径，代码同样贴出

void PieEChartDlg::initWebView()
{
    //以下两句可有可无，默认对js使能有效
    QWebSettings* pWebSettings=ui->webView->page()->settings();
    pWebSettings->setAttribute(QWebSettings::JavascriptEnabled,true);

    connect(ui->webView,SIGNAL(loadFinished(bool)),this,SLOT(loadfinished()));

    //加载url
    //获取运行路径
    string path_c=GetModulePath(NULL);
    QString strPath="file:///"+QString::fromStdString(path_c)+