QT之调用EChart (二）

置顶 已于 2024-06-03 19:37:40 修改
阅读量4k 收藏 54
点赞数 7
分类专栏： QT ECharts 文章标签： QT加载EChart
于 2019-12-18 17:04:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/octdream/article/details/103598948
版权
QT 同时被 2 个专栏收录
38 篇文章 12 订阅
订阅专栏
ECharts
3 篇文章 0 订阅
订阅专栏

一 前言

之前写过一篇QT怎么调用EChart的文章，在文章中有写到关于EChart与QT窗口自适应问题。最近由于项目中需要用到这一技术，所以在做项目过程中，有新的体会。

qt加载EChart并动态交互数据及动态设置大小的方法_qchart图表之音频数据动态显示-CSDN博客

二 效果图

二 功能实现

1 新建一个GUI工程

2 在ui编辑器中，在窗口中新增一个QWidget并设置主窗口的自动布局。

3 将新增的QWidget提升为QWebEngineView

4 编写html文件（重点）

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="clicked_forward_chart" style="height:500px"></div>
<!-- ECharts单文件引入 -->
<script src="build/dist/echarts.js"></script>
<script type="text/javascript">
    var clickedForwardChart;
    var xx;
    var dataClicked;
    var dataForward;
    function setClickedForwardDatta(scale, clicked, forward) {
        xx = scale.split(",");
        dataClicked = clicked.split(",");
        dataForward = forward.split(",");
    }

    // 路径配置
    require.config({
        paths: {
            echarts: 'build/dist'
        }
    });

    require(
        [
            'echarts',
            'echarts/chart/bar'
        ],
        function (ec) {
            clickedForwardChart = ec.init(document.getElementById('clicked_forward_chart'), 'macarons');
            setClickedForwardDatta("0,1,2,3,4,5", "0", "0");

            var option = {
                animation: false,
                title: {
                    text: '事件点击率与转发率统计'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['点击率', '转发率']
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: xx,
                        axisLabel: {
                            interval:0,
                            rotate:40
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        max: 1.5,
                        min: 0
                    }
                ],
                series: [
                    {
                        name: '点击率',
                        type: 'bar',
                        data: dataClicked,
                    },
                    {
                        name: '转发率',
                        type: 'bar',
                        data: dataForward,
                    }
                ]
            };

            //窗体自适应

            //window.onresize = clickedForwardChart.resize;
            // 为echarts对象加载数据
            clickedForwardChart.setOption(option);
        }
    );

    function updateClickedForwardData(scale, clicked, forward) {
        if (!clickedForwardChart) {
            return;
        }

        setClickedForwardDatta(scale, clicked, forward);
        //更新数据
        var option = clickedForwardChart.getOption();
        option.xAxis[0].data = xx;
        option.series[0].data = dataClicked;
        option.series[1].data = dataForward;
        clickedForwardChart.clear();
        clickedForwardChart.setOption(option);
    }
</script>

<script>
    function resizeWindow() {
        window.onresize = function () {
            clickedForwardChart.resize();
        }
    }

    resizeWindow();
</script>

</body>

注意：

1）用于加载EChart的<div>标签需要设置高度样式，不然显示不出来，宽度不需要设置

2）底下的JS代码resizeWindow一定要加，并且一定要调用resizeWindow，这样才会自动设置窗口。

4 在cpp文件中，为提升的QWidget控件，加载html文件

EchartMainWin::EchartMainWin(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::EchartMainWin)
{
    ui->setupUi(this);
    ui->widget->load(QUrl("E:/workspace/QT_PRJ/echartsTest/htmlEcharts/KDStatisticalChart.html"));

}

5 在CPP文件中，添加加载数据功能

void EchartMainWin::on_pushButton_load_clicked()
{
    QString xx = "事件1,事件2,事件3,事件4,事件5,事件6,事件7,事件8,事件9,事件10,事件11,事件12";
    QString clicked = "2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 80.6, 70.2, 32.6, 20.0, 6.4, 3.3";
    QString forward = "2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 80.6, 70.2, 48.7, 18.8, 6.0, 2.3";

    QString strVal = QString("updateClickedForwardData(\"%1\",\"%2\",\"%3\");").arg(xx).arg(clicked).arg(forward);
    ui->widget->page()->runJavaScript(strVal);
}

6 如果要在页面中添加两个图表，只需要按上面的依葫芦画瓢即可

 a)新增一个<div>标签并设置高度

<div id="other_chart" style="height:400px"></div>

b)新增一个<javascript>标签，用于加载第二个图的数据

<script type="text/javascript">
    var myChart;
    var otherX;
    var dataMood;

    function setOtherData(scale, mood) {
        otherX = scale.split(",");
        dataMood = mood.split(",");
    }

    // 路径配置
    require.config({
        paths: {
            echarts: 'build/dist'
        }
    });

    // 使用
    require(
        [
            'echarts',
            'echarts/chart/line'
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            myChart = ec.init(document.getElementById('other_chart'), 'macarons');
            setOtherData("0,1,2,3,4,5", "0")
            var option = {
                animation: false,
                title: {
                    text: '情绪与政治倾向折线图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['情绪值']
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        //data : ['0','1','2','3','4','5']
                        data: otherX
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        scale: true,
                        name: '情绪值',
                        boundaryGap: [0.2, 0.2]
                    }

                ],
                series: [
                    {
                        name: '情绪值',
                        type: 'line',
                        data: dataMood,
                        symbol: 'none'  //取消折点圆圈
                        //data:[0,1,2,3,4,5],
                    }
                ]
            };
            //窗体自适应
            //window.onresize = myChart.resize;
            // 为echarts对象加载数据
            myChart.setOption(option);
        }
    );

    function updateOtherData(scale, mood) {
        if (!myChart) {
            return;
        }

        setOtherData(scale, mood);
        //更新数据
        var option = myChart.getOption();
        option.xAxis[0].data = otherX;
        option.series[0].data = dataMood;
        myChart.clear();
        myChart.setOption(option);
    }
</script>

c）在窗口自适应中新增新图表的窗口重绘

<script>
    function resizeWindow() {
        window.onresize = function () {
            clickedForwardChart.resize();
            myChart.resize();
        }
    }

    resizeWindow();
</script>

d) 在CPP中添加新增图表数据加载功能

#include <QTimer>

int g_Amplitude = 25;
int g_Cycle = 6;
int g_SinOffset = 135;
int g_AxisIndex = 0;


EchartMainWin::EchartMainWin(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::EchartMainWin)
{
    ui->setupUi(this);
    ui->widget->load(QUrl("E:/workspace/QT_PRJ/echartsTest/htmlEcharts/KDStatisticalChart.html"));


}

void EchartMainWin::on_pushButton_load_2_clicked()
{
    timer = new QTimer(this);
    timer->setInterval(1000);
    connect(timer, SIGNAL(timeout()), this, SLOT(updateValue()));
    timer->start();
}

void EchartMainWin::updateValue()
{
    double g_AxisY = g_Amplitude * sin( 3.141592654 /  g_Cycle *  g_AxisIndex ) + g_SinOffset;
    mood.append(QString::number(g_AxisY));
    g_AxisIndex++;
    
    x.append(QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss"));

    QString strVal = QString("updateOtherData(\"%1\",\"%2\");").arg(x.join(",")).arg(mood.join(","));
    ui->widget->page()->runJavaScript(strVal);
}

_东门吹雪
关注
  • 7
    点赞
  • 踩
  • 54
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
QT5中使用Echarts图表组件演示代码
12-21
这是本人博客《QT5中使用Echarts图表组件》文中的演示代码，博客的地址是：http://blog.csdn.net/liuyez123/article/details/50372123
qt 使用Echart 绘图
10-25
qt echart 绘图 webview 解决qt4绘图问题
【QT进阶】Qt Web混合编程之使用ECharts显示各类折线图等
最新发布
LF__plus的博客
04-19 1300
【QT进阶】Qt Web混合编程之使用ECharts显示各类折线图等
QT调用Echart实现数据可视化
weixin_42246754的博客
09-14 1706
开发时碰到一个问题，就是QT调用Echart会很卡顿，这个现象在Debug时会很明显，但是在Release时是可以正常显示了。
ECharts入门
qq_45835940的博客
01-03 3148
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="...
qt加载EChart并动态交互数据及动态设置大小的方法
热门推荐
octdream的专栏
05-23 1万+
QT有图表库，用来展示数据，比如QWT，QCustomPlot,QChart。QCustomPlot是一相对好用的轻量级的控件，QChart虽然说是QT框架内的，可是听说性能极差，完全比不上QCustomPlot,而QWT是一个性能比较好的，且样式也相比其它两个来说，是相对丰富，重量级的库，可是需要自己编译配置环境，如果感兴趣可以查看我其它的博客怎么来编译它。这里我都不讲以上三个库，下面我相讲的是...
QT5嵌入EChart进行数据可视化并保存图片
Zebar01的专栏
06-01 3716
在之前的一篇博客《EChart配置方法（数据可视化解决方案）》已经很详细的介绍了 EChart，这篇我给大家介绍一下再Qt5中使用QChart进行数据可视化显示，并通过截图的方式保存显示图片。 1. 为何要嵌入Qt5中？ Qt作为一款广泛应用的图形化API在工程性和可移植性上做得非常好，其自身自带的QChart（QCart模块在Qt5中才开始配置到免费版本）也能做一部分的数据可视化，但相对于E...
Qt基于Echart的数据可视化2--Echart大小跟随Qt窗口
hw5230的博客
06-08 174
在文章：Qt基于Echart的数据可视化1–Echart引入中我们已经介绍了如何在Qt中使用Echart这个强大的可视化库，但是你如果细心就会发现Echart图形不会随着窗口的调整而自动调整，即便是你对窗口进行了布局，效果如下： 我们首先来分析引入Echart的网页代码 引入Echart的部分在网页的​​body​​​标签内部，body标签内部定义了一个id为main的​​div​​​，下面的script脚本是绘图代码，绘制在id为main的​​div​​中；从代码中可以看到：body没有设置宽高，那就
qt调用matlab动态链接库
04-22
QT 调用 MATLAB 动态链接库 本文将详细介绍如何在 QT 中调用 MATLAB 动态链接库，包括编写 MATLAB 函数、配置 MATLAB 编译器、安装 Mingw64 编译器、配置系统变量、编译 MATLAB 代码、将生成的 DLL 文件添加到 QT ...
Qt之调用zlib
11-14
Qt调用zlib的例子，详见博文：http://blog.csdn.net/caoshangpa/article/details/78528930
QT调用ffwt库测试
06-26
生成标准正弦波测试数据，qt调用ffwt库对生成的数据进行傅里叶变换，并将频谱信息显示到图标上
qt 使用 echarts图表
09-18
qt 使用echarts图表，利用qt的webkits 组件加载echarts图表呈现，可以进行交互。
Qt中调用MFC对话框
03-23
QT是一个跨平台应用程序和UI开发...windows开Qt开发方法：一、Qt Creator+MinGW 或者 Qt Creator+VC++ Compiler二、QT4.8.5 for Windows(VS2015+VS插件)。本实例为VS2015+Qt+Qt插件中开发Qt应用程序同时调用MFC对话框。
QT-使用ECharts显示地图，还有更多惊艳的图表等待你的使用
博咯的博客
11-17 4109
QT-使用ECharts显示地图前言一、使用步骤1.下载示例2. QT使用HTML文件配置3.使用HTML文件4. 数据交互及自适应总结注意：这个地图是百度的在线地图，需要百度API密钥和在联网的状态下使用。离线使用图表 前言 我上文QT图表chart-饼状图，使用qt自带的图表库charts来显示图表，实现数据可视化，但是QT自带的图表库显示效果并不佳，通俗说，就是不好看。 然而，有这么一个开源图表库，图表种类极多，并且效果良好，能够实现具有很好的视觉冲击的数据可视化。 它就是Apache ECharts
QT加载echarts图表并进行数据交互详细过程
weixin_55735677的博客
03-17 2595
在QT中加载echarts图表，并且在QT中传递数据修改图表的数据。
Qt之QWebEngineView调用Echarts方法
ISmileLi的博客
12-24 7464
最近在做Qt绘制散点图和统计图的方法，顺便研究了一下Qt中使用Echarts的方法，Echarts功能很强大，Qt中调用其他也很方便。我使用的是Qt5.6版本中的QWebEngineView显示Echarts图的，Qt5.4（包括5.4）之前的版本是使用QWebView进行显示的，方法都是一样的。测试代码写的比较简单，只是为了说明使用。一、效果图如下： 效果图中的html代码是从官网中直接粘贴下来
QT Echarts 使用详解（二）ECharts柱状图\交互
断点
10-29 1929
Echarts是百度的一款可视化界面开发的平台，里面的地图以及数据可视化内容十分丰富，适合用于一些大屏数据显示项目或者一些ui界面开发。每一个ECharts图表使用一个无边框的QWebView来展示，这样多个不同类型的ECharts图表就是多个封装不同类型ECharts图表的QWebView（html加载入QWebView窗口来实现），每一个模块封装的数据用qt预留接口调用js代码实现修改html的功能，最终达到代码操作qt即可操作图表的功能。
QT调用Echarts，并与JavaScript进行数据交互的方法（附源码）
syealfalfa的博客
10-18 1909
QT调用Echarts，并与JavaScript进行数据交互（附源码） 环境：vs2019、QT5.14.2 链接: link. 图片: 带尺寸的图片: 居中的图片: 居中并且带尺寸的图片: 当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。 如何插入一段漂亮的代码片 去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片. // An highlighted block var foo = 'bar'; ...
Qt用ECharts绘制饼状图（Qt与JS交互）——Qt
xiaopei_yan的博客
02-20 2622
一、前言 又换工作了，再次回到Qt的怀抱，感觉过去半年多一点成长都没有。唉，郁闷。 回到正题，这次项目涉及到的东西很杂，其中涉及到了要绘制图表，我之前用的比较熟练的是Qt自带的QtChart，但这次Qt开发工具是5.5版本的，而 5.7才自带这个工具；所以根据当时的资源，选择了ECharts，上手快，图表类型多，又好看。 虽然，不是第一次用ECharts，但是也和第一次差不多，之前只涉及到了...
QT之调用EChart
05-15
可以使用QtWebEngine模块来在Qt应用程序中嵌入ECharts图表。以下是一些简单的步骤： 1. 添加QtWebEngine模块到你的Qt项目中。 2. 在你的Qt应用程序中创建一个QWebEngineView widget。 3. 将ECharts的HTML代码嵌入到QWebEngineView中。可以使用QWebEngineView的setHtml()方法将HTML代码直接设置为QWebEngineView的内容。 4. 使用Qt的信号和槽机制，将Qt应用程序中的数据传递到ECharts图表中。可以使用JavaScript和Qt的QWebChannel类来实现数据传递。 5. 在ECharts图表中使用ECharts的JavaScript API来绘制图表，并在Qt应用程序中显示。 这只是一个简单的概述，具体实现方式可能因应用程序的特定需求而有所不同。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值