Qt基于Echart的数据可视化1--Echart的引入

原创已于 2024-04-16 10:47:19 修改 · 2.3k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#qt #echarts #开发语言

于 2020-07-05 12:18:05 首次发布

QT学习记录同时被 2 个专栏收录

116 篇文章

订阅专栏

Echart

3 篇文章

订阅专栏

本文介绍如何下载和使用Echarts JS插件，包括在官网定制下载源码，将echarts.min.js文件与HTML文件一同放置在指定路径下，并通过示例代码展示如何在HTML中初始化Echarts实例，加载数据并显示图表。

文章目录

一、Echart下载
- 1.1、下载说明
二、使用说明

一、Echart下载

Echart是百度研发团队开发的一款报表视图JS插件，功能十分强大，可在Echart官网下载源码（一个echarts.min.js文件）进行使用。
在这里插入图片描述

1.1、下载说明

在官网中选择在线定制，然后勾选自己需要的模块，下载
在这里插入图片描述

二、使用说明

1、创建一个.html文件，将其和echart.min.js放在Source文件夹（此文件夹是自己创建的，路径为Qt工程的构建文件下的debug文件夹，即可执行文件路径）中，例如：
在这里插入图片描述

Test.html内容：echarts官网入门案例，可从官方案例中选取例子，更换body即可

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.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>

2、调用

从Qt5.6版本开始mingw编译器的Qt构建套件，不再提供浏览器控件了，之前还可以用webkit控件，这下很多项目要么选择5.6以下版本，要么选择msvc的构建套件
可参考：Qt–网页嵌入

ui->widget->load(QUrl("file:///" + qApp->applicationDirPath() + "/Source/Test.html"));

不懂Qt嵌入网页的可以去看我之前的博客：Qt–网页嵌入

3、运行效果
在这里插入图片描述