最近做一个数据可视化大屏的项目，其中用到echarts图表来动态展示数据，并且进行数据交互。由于之前没接触过，看了很多文章，也走了很多弯路，终于学会了，下面记录一下自己的学习过程，亲测完全可用。
效果：本来想放个视频，但是现在文章里面好像不能加视频，找了半天没找到。所以我上传了一个视频：
https://live.csdn.net/v/283290?spm=1001.2014.3001.5501
下载echarts库：
进入echarts官网：https://echarts.apache.org/examples/zh/index.html#chart-type-line，然后找到下载，点击Dist,找到echarts.js，点击下载。
第一步：
第二步：
第三步：
下载echarts示例：
在echarts官网，找一个需要的案例，下载。
然后就会得到如下图所示的两个文件。
把这两个文件放到同一个文件夹内。
创建Qt工程：
新建一个QT工程，然后把上面装有echarts.js和示例的文件夹放入到工程文件夹中。
然后在工程的.pro文件中加入
QT += webenginewidgets
提示：如果加入QT += webenginewidgets后，工程报错说QWebengine模块不存在，说明QT中缺少这个组件。要安装这个组件。
安装QWebengine组件步骤：
第一步：
找到安装QT的文件夹里面的MaintenanceTool.exe，点击运行。
第二步：登录后选择组件，勾选QWebengine。这里需要注意，因为echarts示例文件格式为.html，用JavaScript编写，我一般用VS（visual studio）打开文件进行操作。并且QWebengine提示在Windows下，仅适用MSCV编译器，而且msvc编译器版本要求和VS版本相同，比如我用MSVC2019编译器，VS也是2019。
然后等待安装完成就行了。
环境配置好就可以进行加载图表了。
加载echarts
在Qt工程中，打开ui界面，在界面中添加一个widget，并将其提升为QWebEngineView。
在.cpp文件的构造函数中加入以下代码，点击运行就可以加载出echarts图表。
ui->widget->setContextMenuPolicy(Qt::NoContextMenu);
ui->widget->load(QUrl("D:/QTproject/problem/Echarts/bar-background.html"));//这个路径选择自己的文件所在路径
但是我们需要的效果是使窗口背景透明，以便后续添加背景。所以还需要两行代码：
ui->widget->setStyleSheet("background-color: transparent");
ui->widget->page()->setBackgroundColor(Qt::transparent);
效果：
在工程中对echarts进行数据交互
进行数据交互我们要先在示例文件中写好接收数据的函数，然后在工程中写好传入的数据和数据解析函数。因为示例文件是使用JavaScript编码，直接传递数据它处理不了，所以我们需要用runJavaScript这个函数来进行数据解析。
第一步：修改示例文件
用VS打开示例文件，进行修改。打开之后就是这样子，我会把框里的代码删掉，都是注释没啥用。（这个.html文件，你也可以修改其他的属性，加标题，改颜色等等，双击.html文件是用浏览器打开，打开可以看到表，如果没有表，说明.html文件里面有误。）
然后在utf-8下面加入echarts.js
第二步：编写数据接收函数
对于柱状图，我需要修改它的横坐标和柱状数据（就是你要改变的数据），所以我的数据接收函数有两个值，如果需要修改别的数据，做法是相同的。
//.html文件中完整代码
第三步：QT项目中编写数据解析函数
通过数据解析函数，把数据转换成字符串传过去，然后通过点击按钮来调用该函数。这样点击按钮就可以实现echarts数据。
//数据解析函数
void Widget::Update(const vector
{
//在QT中我们需要组成一个字符串将数据传过去
QString jscode = "onDataReceived([";
for(int i=0;i { jscode += QString("\"%1\"").arg(name[i]); if(i jscode += ","; } jscode += "],["; for(int i=0;i { jscode += QString::number(data[i]); if(i jscode += ","; } jscode += "])"; ui->widget->page()->runJavaScript(jscode); } //通过按钮调用数据解析函数 void Widget::on_pushButton_clicked() { vector vector Update(name,data); } 项目完整代码： .html文件完整代码在上面，这里就不展示了。 .h文件 #ifndef WIDGET_H #define WIDGET_H #include #include #include using namespace std; QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACE class Widget : public QWidget { Q_OBJECT public: Widget(QWidget *parent = nullptr); ~Widget(); void Update(const vector private slots: void on_pushButton_clicked(); private: Ui::Widget *ui; }; #endif // WIDGET_H .cpp文件 #include "widget.h" #include "ui_widget.h" #include #include Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui->setupUi(this); ui->widget->setStyleSheet("background-color: transparent"); ui->widget->page()->setBackgroundColor(Qt::transparent); ui->widget->setContextMenuPolicy(Qt::NoContextMenu); ui->widget->load(QUrl("D:/QTproject/problem/Echarts/bar-background.html")); } Widget::~Widget() { delete ui; } void Widget::Update(const vector { QString jscode = "onDataReceived(["; for(int i=0;i { jscode += QString("\"%1\"").arg(name[i]); if(i jscode += ","; } jscode += "],["; for(int i=0;i { jscode += QString::number(data[i]); if(i jscode += ","; } jscode += "])"; ui->widget->page()->runJavaScript(jscode.toUtf8()); } void Widget::on_pushButton_clicked() { vector vector Update(name,data); } 参考阅读
您阅读本篇文章共花了：
发表评论