Qt集成Echarts初体验

最新推荐文章于 2022-08-02 06:01:00 发布

香菇滑稽之谈

最新推荐文章于 2022-08-02 06:01:00 发布

阅读量4.2k

点赞数 6

分类专栏： QT 文章标签： c++ qt echarts

本文链接：https://blog.csdn.net/wwplh5520370/article/details/116000513

版权

QT 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

环境说明

windows10，Qt5.15.2，MSVC2019。安装qt时需要勾选webengine模块。
编译运行时，务必选择release模式，debug模式会卡成gou，CPU占用直接飙升（我的是E5 2630 V3，8核16线程，在后面调整仪表盘数值时直接飙到20%多），releas模式下运行时CPU占用仅1%左右。

简单介绍

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。官方的教程写的很详细，只要花点时间，基本上会写hello word的程序猿都能看懂，在Qt上使用的话只需要熟悉一点点html和JS语法即可，重在掌握方法。
在这里插入图片描述

Echarts资源

1、下载Echarts

直接在github上下载即可，或者链接到gitee下载zip包。
在这里插入图片描述

2、测试

下载完成解压之后在echarts/dist文件夹内，新建一个空白的xxx.html文件，并写上一下代码（代码来自Echarts官方示例）

<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

保存html，使用浏览器打开该文件，不出意外，你将会看到下面的柱状图表。
在这里插入图片描述
到此，Echarts已经初步测试成功。

Qt项目集成Echarts

1、在pro文件内，QT += webenginewidgets。
2、在项目的ui中（如果你是可视化设计ui）拉出一个widget并提升为QWebEngineView。
3、代码

#include <QtWebEngineWidgets>

在构造函数中

ui->widget->setContextMenuPolicy(Qt::NoContextMenu);
ui->widget->load(qApp->applicationDirPath() + "xxx.html");

4、编译，不运行。
特别说明：webenginewidgets模块仅支持MSVC！！！
特别说明：webenginewidgets模块仅支持MSVC！！！
特别说明：webenginewidgets模块仅支持MSVC！！！
5、将echarts/dist文件夹内的echarts.min.js和xxx.html拷贝到Qt项目编译出来的可执行文件同级目录。
6、运行Qt程序，不出意外你将看到和上面一样的图表。
7、到此，成功在Qt项目中集成Echarts。

动态加载Echarts数据

*首先要了解一点，要修改Echarts图表的显示内容，就是修改option的内容，包括数据和各种图表属性。
*这里建议参考我的示例代码，下载地址
1、修改xxx.html的代码，这是一个速度仪表盘，参考官方给出的示例稍作修改，定义了两个JS接口，分别是设置data和改变div大小。
在这里插入图片描述

<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:600px;"></div>
    <script type="text/javascript">
	var myChart = echarts.init(document.getElementById('main'));

        myChart.setOption({
    series: [{
        type: 'gauge',
        progress: {
            show: true,
            width: 18
        },
        axisLine: {
            lineStyle: {
                width: 18
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            length: 15,
            lineStyle: {
                width: 2,
                color: '#999'
            }
        },
        axisLabel: {
            distance: 25,
            color: '#999',
            fontSize: 20
        },
        anchor: {
            show: true,
            showAbove: true,
            size: 25,
            itemStyle: {
                borderWidth: 10
            }
        },
        title: {
            show: false
        },
        detail: {
            valueAnimation: true,
            fontSize: 80,
            offsetCenter: [0, '50%']
        },
        data: [{
            value: 50
        }]
    }]
});
function setData(newValue)
{
    var option = {
        series:
        [{
        data: [{
            value: newValue
        }]}
        ]
    };
    myChart.setOption(option);
}
function resizeDiv(newWidth,newHeight) {
    var myDiv = document.getElementById('main');
    myDiv.style.width = newWidth + "px";
    myDiv.style.height = newHeight + "px";
	myChart.resize();
}
    </script>
</body>
</html>

保存xxx.html文件，使用浏览器打开该文件，不出意外你将看到仪表盘，初始值为50。
2、在Qt项目的ui内拖入一个滑动杆，转到槽valueChanged(int value)，写入以下代码，实现仪表盘的数值调整。因为在xxx.html中，自定义了一个JS接口function setData(newValue)，在Qt中使用runJavaScript方法就可以直接调用该接口。

ui->widget->page()->runJavaScript( QString("setData(%1)").arg(value));

编译运行，拉动滑动杆就可以看到仪表盘的数值跟着变了。
3、重写widget的resizeEvent，调用JS接口resizeDiv(newWidth,newHeight)，实现html中的div大小随widget大小变化。这里做的比较粗糙，仅仅改变div大小，widget拉的太小就会出现下面的情况，需要实际去调整图表的属性，如字体、指针、圆弧，这些也是在option里面修改。
在这里插入图片描述

void EchartDemo::resizeEvent(QResizeEvent *event)
{
    int newWidth = event->size().width();
    int newHeight = event->size().height();
    ui->widget->page()->runJavaScript( QString("resizeDiv(%1,%2)").arg(int(newWidth*0.8)).arg(int(newHeight*0.8)));
}

！@#￥%……&*

虽然跟painter绘制的控件相比，在Qt上使用Echarts，效率还是差了点，也比较耗CPU。但Echarts是拿来就用啊，上手简单，还是挺香的。

香菇滑稽之谈

关注

6
点赞
踩
51

收藏

觉得还不错? 一键收藏
4
评论
Qt集成Echarts初体验

简单介绍ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。官方的教程写的很详细，只要花点时间，基本上会写hello word的程序猿都能看懂，在Qt上使用的话只需要熟悉一点点html和JS语法即可，重在掌握方法。Echarts资源1、下载Echarts直接在github上下载即可，或者链接到gitee下载zip包。2、测试下载完成解压之后在echarts/dist文件夹内，新建一个空白的xxx.html文件，并写上一下代码（代码来自Echar
复制链接

扫一扫

专栏目录