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

十年之少

已于 2023-12-20 10:13:16 修改

阅读量2.7k

点赞数 5

分类专栏： Qt Widgets 文章标签： javascript qt echarts

于 2020-02-20 14:25:26 首次发布

本文链接：https://blog.csdn.net/xiaopei_yan/article/details/100604259

版权

本文介绍了如何在Qt5.5版本中使用ECharts绘制饼状图，通过QtWebEngine与JavaScript交互。文章详细阐述了通过参数传递JSON数据来实现Qt与JS的双向通信，包括数据处理、界面展示以及处理数据过多时的优化策略。最后展示了不同数据情况下饼状图的效果，并提到在编写过程中发现并修复的QMap到QMultiMap的bug。

摘要由CSDN通过智能技术生成

前言

这次项目涉及到的东西很杂，其中涉及到了要绘制图表，我之前用的比较熟练的是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)+"index