前言

我上文QT图表chart-饼状图，使用qt自带的图表库charts来显示图表，实现数据可视化，但是QT自带的图表库显示效果并不佳，通俗说，就是不好看。
然而，有这么一个开源图表库，图表种类极多，并且效果良好，能够实现具有很好的视觉冲击的数据可视化。
它就是Apache ECharts，一个基于 JavaScript 的开源可视化图表库。官网https://echarts.apache.org/zh/index.html非常多的示例可以供你选择。
在这里，我做的工作是将QT与 ECharts相结合，将ECharts图表嵌入到QT应用程序中。
这是ECharts官网示例中地图的显示：

如下是我将其地图嵌入QT应用的效果：

一、使用步骤

1.下载示例

首先，在官网上找的你想要实现的示例，然后下载这个示例到你的QT项目目录里。

点击示例，打开示例，进入示例的编辑及预览界面。

点击下载示例，将下载的html文件放入QT项目目录中。

2. QT使用HTML文件配置

首先，在项目文件pro中添加：

QT       += webenginewidgets
QT       += webchannel

其次，添加widget控件，并将控件提升为QWebEngineView：

3.使用HTML文件

使用load方法将html内容嵌入到widget_map界面中。

//添加地图setContextMenuPolicy
    this->ui->widget_map->setContextMenuPolicy(Qt::NoContextMenu);
    this->ui->widget_map->load(QUrl("file:///home/linux/qttt/AGV/mapjs/effectScatter-bmap.html"));

4. 数据交互及自适应

真正实现QT中使用Echarts,做出惊艳的效果，就必应实现它们之间数据交互，并让其地图或图表与QT界面自适应或者可控。

下面是我通过数据交互实现大小自适应的QT窗口的程序。
首先，要修改html文件的程序，
在其javascript代码段中添加设置其尺寸大小的程序：

function setSize(size){
                    // 首先是取到元素
                    var main = document.getElementById('container');
                    main.style.width = size["width"] + "px";
                    main.style.height = size["height"] + "px";
                    myChart.resize();
                    myChart.clear();
                    myChart.setOption(option);
                };

其次，在QT中绑定widget_map的loadFinished(bool)信号与和onResizeEcharts()槽：

connect(this->ui->widget_map, SIGNAL(loadFinished(bool)), this, SLOT(onResizeEcharts()));

最后，编写槽函数的动作：
这里实现QT与HTML文件的数据交互，因为HTML文件中使用的是JavaScript，所以它们之间使用JSON数据交换格式
将需要运行的函数， 函数名（变量（JSON格式））以字符串的形式赋值给js
通过page()->runJavaScript(js)来执行HTML文件中的setSize（）函数，最终实现窗口大小自适应

//动态控制地图大小
void AGVMainWindow::onResizeEcharts()
{
    QJsonObject sizeData;
    isload = true;
    sizeData.insert("width", this->ui->stackedWidget->width()-20);
    sizeData.insert("height", this->ui->stackedWidget->height()-20);
    QString sizeStr = QJsonDocument(sizeData).toJson();
    QString js = QString("setSize(%1)").arg(sizeStr);
    this->ui->widget_map->page()->runJavaScript(js);
}

总结

注意：

这个地图是百度的在线地图，需要百度API密钥和在联网的状态下使用。

百度密钥获取说明见https://lbsyun.baidu.com/index.php?title=jspopularGL，百度地图平台官网。

离线使用图表

下载的示例，HTML文件里的echarts库都是通过官网直接获取的，如果需要离线，可以将其网址直接粘贴到浏览器中下载到本地,HTML文件同目录下。
然后更改引用为：

<script type="text/javascript" src="./echarts.min.js"></script>

以上是我对QT使用ECharts开源图库的理解。

如有错误希望请大家指导，谢谢点赞！
希望和大家一起学习，交流！