往期回顾

【QT进阶】Qt Web混合编程之QWebEngineView基本用法-CSDN博客

【QT进阶】Qt Web混合编程之CMake VS2019编译并使用QCefView（图文并茂超详细版本）-CSDN博客

【QT进阶】Qt Web混合编程之html、 js的简单交互-CSDN博客

 【QT进阶】Qt Web混合编程之使用ECharts显示各类折线图等

一、ECharts（Enterprise Charts）

1、什么是ECharts

ECharts（Enterprise Charts）是一个由百度开发的基于JavaScript的开源可视化图表库，用于构建交互式的数据可视化界面。ECharts提供了丰富的图表类型和交互功能，可以轻松创建各种各样的图表，如折线图、柱状图、饼图、散点图等。ECharts支持移动端和PC端，具有良好的跨平台性能。

1.1、官网：

Apache ECharts

1.2、特点：

ECharts是一个功能强大、易于使用的数据可视化库，适用于各种场景下的数据展示需求。是一个比QCustomPlot、QWT、QCharts等更好的开源图表曲线组件。

2、qt如何使用ECharts

2.1下载ECharts

选择官网中的下载->下载->翻到页面最低端->在线下载->勾选想要下载的->翻到页面最低端，全部勾选上->点击下载。

下面是最后的下载按钮，上面是最开始的下载按钮

2.2复制下载好的js文件 

下载好以后，我们复制下载好的js文件，在我们项目里新建一个文件夹myecharts，把js文件放进去

2.3下载所需对应示例

去示例里选择想要的图，刚刚下载了对应类型的，去下载示例，得到的是html文件，放在myecharts文件夹里，同时把myecharts文件夹放在项目的Debug文件夹里。

我这里下载了两个，一个是area-stack-gradient.html，另一个是line-simple.html

2.4提升控件

 在新建的qt项目里进行简单ui设计，把widget提升为QWebenginView

同时注意，在pro文件里添加第三方模块名——webenginwidgets 

2.5运行显示echarts

跑半天跑不出来，优化有点慢

QString exe_path = qApp->applicationDirPath(); QString _klinePath = exe_path + "/myecharts/candlestick-sh.html"; ui->web_widget->setUrl(QUrl(_klinePath));

2.6链接信号槽实现对应显示

connect(ui->radioButton_kline, &QRadioButton::toggled, [=](bool checked){ if(checked) { ui->web_widget->setUrl(QUrl(_klinePath)); } }); connect(ui->radioButton_line, &QRadioButton::toggled, [=](bool checked){ if(checked) { QString _linePath = exe_path + "/myecharts/line-smooth.html"; ui->web_widget->setUrl(QUrl(_linePath)); } });

以上就是Qt里使用ECharts显示各类折线图的简单介绍。

说实话QWebEnginView优化还是挺慢的，Qt Creator直接卡死了都

都看到这里了，点个赞再走呗朋友~

加油吧，预祝大家变得更强！