当前位置: 首页 > news >正文

技术分享 | 测试平台开发-前端开发之数据展示与分析

测试平台的数据展示与分析,我们主要使用开源工具ECharts来进行数据的展示与分析。

ECharts简介与安装

ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表,功能非常强大,目前ECharts已经发布到ECharts 5版本。我们的项目也选择Echarts来作为我们的数据展示与分析工具。

ECharts官网:

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

ECharts安装

  • npm安装:
npm install echarts --save
  • 官网下载:
https://echarts.apache.org/zh/download.html
  • github获取
https://github.com/apache/echarts/releases
  • CDN方式获取
https://www.jsdelivr.com/package/npm/echarts

我们推荐使用npm方法直接在项目里安装Echarts,方便直接使用。

Echarts使用

Echarts安装完成之后,我们将Echarts引入我们的项目中,注意,因为我们不是每个页面都需要用到画图,都有图表展示,所以我们没有必要将Echarts封装到main.js中,在需要展示图表的页面引入Echarts即可。

Echarts展示需要等待页面dom元素加载完毕,并且需要有一个dom元素进行图表的展示,所以mounted阶段是我们引入Echarts的最佳时间点。以测试平台的报告为例,具体操作如下:

mounted() {var echarts = require('echarts');// 基于准备好的dom,初始化echarts实例,如果main.js中已经封装了echarts,则不需要此步骤var myChart = echarts.init(document.getElementById('main'));// 绘制图表myChart.setOption({title: {text: 'ECharts 入门示例'},tooltip: {},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]});},

我们在script模块的methods中绘制了图表之后,还需要在页面上进行展示,因此,我们还需要在template中新建一个div用以展示我们的图表,图表的大小我们可以自行设置,代码如下:

<template><div><template><v-tabs :value="3" background-color="primary"><v-tab @click="$router.push({name:'Case'})">用例管理</v-tab><v-tab @click="$router.push({name:'Task'})">任务管理</v-tab><v-tab @click="$router.push({name:'Jenkins'})">Jenkins管理</v-tab><v-tab @click="$router.push({name:'Report'})">报告管理</v-tab></v-tabs></template><div id="main" style="width:500px;height:500px"></div>// 新建div,用以展示图表</div></template>

通过以上步骤,图表的绘制和展示就完成了,在终端输入命令’npm run serve’,在浏览器中访问’http://localhost:8080/#/report’,即可看到绘制的图表展示在report页面。

这只是一个简单的示例,我们可以在Echarts中找到更多样的表格示例,可以根据需要选择适合的图表示例。Echarts示例网址:https://echarts.apache.org/examples/zh/index.html

当我们想要修改Echarts图表样式时,在Echarts中找到适合的示例,将左侧的示例编辑部分代码复制粘贴到绘制图表部分即可。

最后感谢每一个认真阅读我文章的人,礼尚往来总是要有的,虽然不是什么很值钱的东西,如果你用得到的话可以直接拿走:

这些资料,对于【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴上万个测试工程师们走过最艰难的路程,希望也能帮助到你! 

相关文章:

技术分享 | 测试平台开发-前端开发之数据展示与分析

测试平台的数据展示与分析&#xff0c;我们主要使用开源工具ECharts来进行数据的展示与分析。 ECharts简介与安装 ECharts是一款基于JavaScript的数据可视化图表库&#xff0c;提供直观&#xff0c;生动&#xff0c;可交互&#xff0c;可个性化定制的数据可视化图表&#xff…...

NZ系列工具NZ06:VBA创建PDF文件说明

我的教程一共九套及VBA汉英手册一部&#xff0c;分为初级、中级、高级三大部分。是对VBA的系统讲解&#xff0c;从简单的入门&#xff0c;到数据库&#xff0c;到字典&#xff0c;到高级的网抓及类的应用。大家在学习的过程中可能会存在困惑&#xff0c;这么多知识点该如何组织…...

redis-cli 连接 sentinel架构的redis服务

之前一直用gui连接redis&#xff0c;今天在服务器连接发现redis-cli无法直接连接到redis-sentinel服务器&#xff0c;研究后发现多了几个步骤&#xff0c;如下&#xff1a; 假设有三个redis节点127.0.0.1,127.0.0.2,127.0.0.3,端口为9696先连接任意一个节点: redis-cli -h 12…...

使用github copilot

现在的大模型的应用太广了&#xff0c;作为程序员我们当然野可以借助大模型来帮我们敲代码。 下面是自己注册使用github copilot的过程。 一、注册github copilot 1. 需要拥有github账号 &#xff0c;登录github之后&#xff0c;点右侧自己的头像位置&#xff0c;下面会出现…...

1438 绝对差不超过限制的最长连续子数组(单调队列)

题目 绝对差不超过限制的最长连续子数组 给你一个整数数组 nums &#xff0c;和一个表示限制的整数 limit&#xff0c;请你返回最长连续子数组的长度&#xff0c;该子数组中的任意两个元素之间的绝对差必须小于或者等于 limit 。 如果不存在满足条件的子数组&#xff0c;则返…...

OpenCV入门9:图像增强和图像滤波

图像增强是一种通过对图像进行处理以改善其质量、对比度、清晰度等方面的技术。在OpenCV中&#xff0c;有多种图像增强的方法和函数可用。下面简要介绍一些常见的图像增强方法及其在OpenCV中的实现方式。 直方图均衡化&#xff08;Histogram Equalization&#xff09;&#xff…...

Pycharm常用快捷键和替换正则表达式

原生快捷键的使用&#xff1a; 1.CtrlF&#xff1a;查找 2.CtrlZ&#xff1a;返回上一步 3.Alt 鼠标左键选择&#xff1a;多行同时编辑&#xff08;上、下、左、右键能够移动光标&#xff09; 按住Ctrl,左键点击&#xff0c;定位光标 编辑过程 URL常用的替换正则表达式&am…...

C#,数值计算——函数计算,Epsalg的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// Convergence acceleration of a sequence by the algorithm.Initialize by /// calling the constructor with arguments nmax, an upper bound on the /// number of term…...

Delphi 12 重返雅典 (RAD Studio 12)

RAD Studio 12 的新功能&#xff1a; 以最新的平台版本为目标&#xff01; RAD Studio 12 提供对 iOS 17&#xff08;仅适用于 Delphi&#xff09;、Android 14 和 macOS Sonoma 的官方支持。RAD Studio 12 还支持 Ubuntu 22 LTS 和 Windows Server 2022。 Delphi 源代码的多…...

手写链表C++

目录 一、链表基本概念以及注意事项 1.1 构造函数与析构函数 1.2 插入元素 1.3 重载运算符 二、小结 一、链表基本概念以及注意事项 在工作中&#xff0c;链表是一种常见的数据结构&#xff0c;可以用于解决很多实际问题。在学习中&#xff0c;掌握链表可以提高编程能力和…...

为什么我一直是机器视觉调机仔,为什么一定要学一门高级语言编程?

​ 为什么我是机器视觉调机仔&#xff0c;为什么一定要学一门高级语言编程&#xff0c;以后好不好就业&#xff0c;待遇高不高&#xff0c;都是跟这项技术没关系&#xff0c;是跟这个技术背后的行业发展有关系。 你可以选择离机器视觉行业&#xff0c;也可以选择与高级语言相关…...

MongoDB单实例安装(Linux)

实战环境 centos7系统、64位 iptables和selinux关闭 mongodb简介 mongodb是个非关系型数据库&#xff0c;但操作跟关系型数据最类似。mysql是关系型数据库 mongodb是面向文档存储的非关系型数据库&#xff0c;数据以json的格式进行存储 mongodb可用来永久存储&#xff0c;也可用…...

各种业务场景调用API代理的API接口教程(附带电商平台api接口商品详情数据接入示例)

API代理的API接口在各种业务场景中具有广泛的应用&#xff0c;本文将介绍哪些业务场景可以使用API代理的API接口&#xff0c;并提供详细的调用教程和代码演示&#xff0c;同时&#xff0c;我们还将讨论在不同场景下使用API代理的API接口所带来的好处。 哪些业务场景可以使用API…...

React-hooks有哪些 包括用法是什么?

React Hooks是React 16.8版本引入的功能&#xff0c;它允许你在函数组件中使用状态&#xff08;state&#xff09;和其他React特性&#xff0c;而无需编写类组件。以下是一些常用的React Hooks及其用法&#xff1a; 1&#xff1a;useState&#xff1a;用于在函数组件中添加状态…...

根据DataFrame指定的列该列中如果有n个不同元素则将其转化为n行显示explode()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 根据DataFrame指定的列 该列中如果有n个不同元素 则将其转化为n行显示 explode() 选择题 以下代码两次输出结果分别为几行&#xff1f; import pandas as pd df pd.DataFrame({种类:[蔬菜,水…...

《持续交付:发布可靠软件的系统方法》- 读书笔记(十三)

持续交付&#xff1a;发布可靠软件的系统方法&#xff08;十三&#xff09; 第 13 章 组件和依赖管理13.1 引言13.2 保持应用程序可发布13.2.1 将新功能隐蔽起来&#xff0c;直到它完成为止13.2.2 所有修改都是增量式的13.2.3 通过抽象来模拟分支 13.3 依赖13.3.1 依赖地狱13.3…...

【Copilot】登录报错 Extension activation failed: “No auth flow succeeded.“(VSCode)

问题描述 Visual Studio Code 登录 GitHub Copilot 插件报错。 在浏览器中成功授权 GitHub 账户&#xff0c;返回 VSCode 后仍然报错。 [ERROR] [default] [2023-11-06T12:34:56.185Z] Extension activation failed: "No auth flow succeeded."原因分析 网络环境问…...

uboot - 驱动开发 - dw watchdog

说明 公司SOC使用的watchdog模块是新思&#xff08;Synopsys&#xff09;的IP。 需求 用户有时会在uboot/kernel中做些开发&#xff0c;新增一些功能&#xff08;OTA升级等&#xff09;&#xff0c;可能会出现uboot/kernel启动崩溃甚至设备死机等问题&#xff0c;需要在uboo…...

【系统架构设计】架构核心知识: 2.5 软件测试、系统转换计划、系统维护

目录 一 软件测试 1 静态测试 2 动态测试 3 测试 4 集成测试的策略 二...

EXPLAIN详解(MySQL)

EXPLAIN概述 EXPLAIN语句提供MySQL如何执行语句的信息。EXPLAIN与SELECT, DELETE, INSERT, REPLACE和UPDATE语句一起工作。 EXPLAIN返回SELECT语句中使用的每个表的一行信息。它按照MySQL在处理语句时读取表的顺序列出了输出中的表。MySQL使用嵌套循环连接方法解析所有连接。…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...