QT调用Echart实现数据可视化

最新推荐文章于 2024-07-24 23:00:08 发布

仓颉ROS

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量1.7k

点赞数 2

分类专栏： qt 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_42246754/article/details/126847404

版权

qt 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

由于后续项目可能会需要对数据进行可视化，提前熟悉。

首先到官网下载Echart相关js文件，会跳转到github，下载其中的echarts.js即可：

https://github.com/apache/echarts/tree/5.3.3/dist

然后点击示例下载示例文件：

https://echarts.apache.org/examples/zh/index.html

两个文件都下载好后，可以将其放入到项目文件中：

由于UI中没有QWebEngineView类，所以创建一个Widget类控件后将其提升为QWebEngineView类：

然后在Widget的构造函数中加载HTML文件：

得到结果：

此处数据是在js文件中写死的，要能动态显示需要将js文件中相关代码抽离出来封装成函数：

封装成函数后需要主动调用该函数执行一下:

然后重新定义一个带参数的函数init2(str)，在数据部分直接用data: str["data1"]来表示：

<!--
  此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=area-stack
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    function init(){
      var option;

      option = {
      title: {
      text: 'Stacked Area Chart'
      },
      tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
      },
      legend: {
      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
      },
      toolbox: {
      feature: {
        saveAsImage: {}
      }
      },
      grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
      },
      xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      }
      ],
      yAxis: [
      {
        type: 'value'
      }
      ],
      series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [0, 0, 0, 0, 0, 0, 0]
      },
      {
        name: 'Union Ads',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [0, 0, 0, 0, 0, 0, 0]
      },
      {
        name: 'Video Ads',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [0, 0, 0, 0, 0, 0, 0]
      },
      {
        name: 'Direct',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [0, 0, 0, 0, 0, 0, 0]
      },
      {
        name: 'Search Engine',
        type: 'line',
        stack: 'Total',
        label: {
          show: true,
          position: 'top'
        },
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [0, 0, 0, 0, 0, 0, 0]
      }
      ]
      };

      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    }

    function init2(str){
      var option;

      option = {
      title: {
      text: 'Stacked Area Chart'
      },
      tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
      },
      legend: {
      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
      },
      toolbox: {
      feature: {
        saveAsImage: {}
      }
      },
      grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
      },
      xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      }
      ],
      yAxis: [
      {
        type: 'value'
      }
      ],
      series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: str["data1"]
      },
      {
        name: 'Union Ads',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: str["data2"]
      },
      {
        name: 'Video Ads',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: str["data3"]
      },
      {
        name: 'Direct',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: str["data4"]
      },
      {
        name: 'Search Engine',
        type: 'line',
        stack: 'Total',
        label: {
          show: true,
          position: 'top'
        },
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: str["data5"]
      }
      ]
      };

      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    }


    init();
    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>

在工程中添加代码：

由于初始化已经将数据全部置为0，现象为：