技术分享 | 测试平台开发-前端开发之数据展示与分析
测试平台的数据展示与分析,我们主要使用开源工具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中找到适合的示例,将左侧的示例编辑部分代码复制粘贴到绘制图表部分即可。
最后感谢每一个认真阅读我文章的人,礼尚往来总是要有的,虽然不是什么很值钱的东西,如果你用得到的话可以直接拿走:
这些资料,对于【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴上万个测试工程师们走过最艰难的路程,希望也能帮助到你!

相关文章:
技术分享 | 测试平台开发-前端开发之数据展示与分析
测试平台的数据展示与分析,我们主要使用开源工具ECharts来进行数据的展示与分析。 ECharts简介与安装 ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表ÿ…...
NZ系列工具NZ06:VBA创建PDF文件说明
我的教程一共九套及VBA汉英手册一部,分为初级、中级、高级三大部分。是对VBA的系统讲解,从简单的入门,到数据库,到字典,到高级的网抓及类的应用。大家在学习的过程中可能会存在困惑,这么多知识点该如何组织…...
redis-cli 连接 sentinel架构的redis服务
之前一直用gui连接redis,今天在服务器连接发现redis-cli无法直接连接到redis-sentinel服务器,研究后发现多了几个步骤,如下: 假设有三个redis节点127.0.0.1,127.0.0.2,127.0.0.3,端口为9696先连接任意一个节点: redis-cli -h 12…...
使用github copilot
现在的大模型的应用太广了,作为程序员我们当然野可以借助大模型来帮我们敲代码。 下面是自己注册使用github copilot的过程。 一、注册github copilot 1. 需要拥有github账号 ,登录github之后,点右侧自己的头像位置,下面会出现…...
1438 绝对差不超过限制的最长连续子数组(单调队列)
题目 绝对差不超过限制的最长连续子数组 给你一个整数数组 nums ,和一个表示限制的整数 limit,请你返回最长连续子数组的长度,该子数组中的任意两个元素之间的绝对差必须小于或者等于 limit 。 如果不存在满足条件的子数组,则返…...
OpenCV入门9:图像增强和图像滤波
图像增强是一种通过对图像进行处理以改善其质量、对比度、清晰度等方面的技术。在OpenCV中,有多种图像增强的方法和函数可用。下面简要介绍一些常见的图像增强方法及其在OpenCV中的实现方式。 直方图均衡化(Histogram Equalization)ÿ…...
Pycharm常用快捷键和替换正则表达式
原生快捷键的使用: 1.CtrlF:查找 2.CtrlZ:返回上一步 3.Alt 鼠标左键选择:多行同时编辑(上、下、左、右键能够移动光标) 按住Ctrl,左键点击,定位光标 编辑过程 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 的新功能: 以最新的平台版本为目标! RAD Studio 12 提供对 iOS 17(仅适用于 Delphi)、Android 14 和 macOS Sonoma 的官方支持。RAD Studio 12 还支持 Ubuntu 22 LTS 和 Windows Server 2022。 Delphi 源代码的多…...
手写链表C++
目录 一、链表基本概念以及注意事项 1.1 构造函数与析构函数 1.2 插入元素 1.3 重载运算符 二、小结 一、链表基本概念以及注意事项 在工作中,链表是一种常见的数据结构,可以用于解决很多实际问题。在学习中,掌握链表可以提高编程能力和…...
为什么我一直是机器视觉调机仔,为什么一定要学一门高级语言编程?
为什么我是机器视觉调机仔,为什么一定要学一门高级语言编程,以后好不好就业,待遇高不高,都是跟这项技术没关系,是跟这个技术背后的行业发展有关系。 你可以选择离机器视觉行业,也可以选择与高级语言相关…...
MongoDB单实例安装(Linux)
实战环境 centos7系统、64位 iptables和selinux关闭 mongodb简介 mongodb是个非关系型数据库,但操作跟关系型数据最类似。mysql是关系型数据库 mongodb是面向文档存储的非关系型数据库,数据以json的格式进行存储 mongodb可用来永久存储,也可用…...
各种业务场景调用API代理的API接口教程(附带电商平台api接口商品详情数据接入示例)
API代理的API接口在各种业务场景中具有广泛的应用,本文将介绍哪些业务场景可以使用API代理的API接口,并提供详细的调用教程和代码演示,同时,我们还将讨论在不同场景下使用API代理的API接口所带来的好处。 哪些业务场景可以使用API…...
React-hooks有哪些 包括用法是什么?
React Hooks是React 16.8版本引入的功能,它允许你在函数组件中使用状态(state)和其他React特性,而无需编写类组件。以下是一些常用的React Hooks及其用法: 1:useState:用于在函数组件中添加状态…...
根据DataFrame指定的列该列中如果有n个不同元素则将其转化为n行显示explode()
【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 根据DataFrame指定的列 该列中如果有n个不同元素 则将其转化为n行显示 explode() 选择题 以下代码两次输出结果分别为几行? import pandas as pd df pd.DataFrame({种类:[蔬菜,水…...
《持续交付:发布可靠软件的系统方法》- 读书笔记(十三)
持续交付:发布可靠软件的系统方法(十三) 第 13 章 组件和依赖管理13.1 引言13.2 保持应用程序可发布13.2.1 将新功能隐蔽起来,直到它完成为止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 账户,返回 VSCode 后仍然报错。 [ERROR] [default] [2023-11-06T12:34:56.185Z] Extension activation failed: "No auth flow succeeded."原因分析 网络环境问…...
uboot - 驱动开发 - dw watchdog
说明 公司SOC使用的watchdog模块是新思(Synopsys)的IP。 需求 用户有时会在uboot/kernel中做些开发,新增一些功能(OTA升级等),可能会出现uboot/kernel启动崩溃甚至设备死机等问题,需要在uboo…...
【系统架构设计】架构核心知识: 2.5 软件测试、系统转换计划、系统维护
目录 一 软件测试 1 静态测试 2 动态测试 3 测试 4 集成测试的策略 二...
EXPLAIN详解(MySQL)
EXPLAIN概述 EXPLAIN语句提供MySQL如何执行语句的信息。EXPLAIN与SELECT, DELETE, INSERT, REPLACE和UPDATE语句一起工作。 EXPLAIN返回SELECT语句中使用的每个表的一行信息。它按照MySQL在处理语句时读取表的顺序列出了输出中的表。MySQL使用嵌套循环连接方法解析所有连接。…...
网络编程(Modbus进阶)
思维导图 Modbus RTU(先学一点理论) 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议,由 Modicon 公司(现施耐德电气)于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应,这是一种非线性光学现象,主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场,对材料产生非线性响应,可能…...
智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
关于 WASM:1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么? WebAssembly(WASM) 是一种能在现代浏览器中高效运行的二进制指令格式,它不是传统的编程语言,而是一种 低级字节码格式,可由高级语言(如 C、C、Rust&am…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...
Linux系统部署KES
1、安装准备 1.版本说明V008R006C009B0014 V008:是version产品的大版本。 R006:是release产品特性版本。 C009:是通用版 B0014:是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存:1GB 以上 硬盘…...
AI语音助手的Python实现
引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...
nnUNet V2修改网络——暴力替换网络为UNet++
更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...
渗透实战PortSwigger靶场:lab13存储型DOM XSS详解
进来是需要留言的,先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码,输入的<>当成字符串处理回显到页面中,看来只是把用户输…...

