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

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

ECharts简介与安装

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

ECharts官网:

复制代码
https://echarts.apache.org/zh/index.html

ECharts安装

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

Echarts使用

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

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

python 复制代码
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用以展示我们的图表,图表的大小我们可以自行设置,代码如下:

python 复制代码
<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中找到适合的示例,将左侧的示例编辑部分代码复制粘贴到绘制图表部分即可。

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

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

相关推荐
独行soc10 小时前
2025年渗透测试面试题总结-2025年HW(护网面试) 33(题目+回答)
linux·科技·安全·网络安全·面试·职场和发展·护网
保持学习ing12 小时前
AI--提升效率、驱动创新的核心引擎
低代码·自动化·ai编程
宇钶宇夕15 小时前
EPLAN 电气制图:建立自己的部件库,添加部件-加SQL Server安装教程(三)上
运维·服务器·数据库·程序人生·自动化
Thomas_YXQ17 小时前
Unity3D游戏内存优化指南
游戏·unity·职场和发展·性能优化·蓝桥杯·游戏引擎·unity3d
PHOSKEY18 小时前
闪测仪应用案例丨手机中框如何突破「尺寸检测」瓶颈?
运维·智能手机·自动化
Y1nhl18 小时前
力扣_链表_python版本
开发语言·python·算法·leetcode·链表·职场和发展
一个 00 后的码农18 小时前
26考研物理复试面试常见问答问题汇总(2)电磁波高频面试问题,物理专业保研推免夏令营面试问题汇总
考研·面试·职场和发展
宇钶宇夕19 小时前
STEP 7 MicroWIN SMART V2.2 的详细安装步骤及注意事项
运维·服务器·程序人生·自动化
小爱同学ya20 小时前
【效率提升教程】飞书自动化上传图片和文字
自动化·飞书
YuTaoShao1 天前
【LeetCode 热题 100】48. 旋转图像——转置+水平翻转
java·算法·leetcode·职场和发展