软件测试 / 测试开发 | 测试平台开发 - 前端开发之数据展示与分析
获取更多相关知识
测试平台的数据展示与分析,我们主要使用开源工具 ECharts 来进行数据的展示与分析。
ECharts 简介与安装
ECharts 是一款基于 JavaScript 的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表,功能非常强大,目前 ECharts 已经发布到 ECharts 5 版本。我们的项目也选择 Echarts 来作为我们的数据展示与分析工具。
ECharts 官网:
ECharts 安装
npm 安装:
官网下载:
github 获取
CDN 方式获取
我们推荐使用 npm 方法直接在项目里安装 Echarts,方便直接使用。
Echarts 使用
Echarts 安装完成之后,我们将 Echarts 引入我们的项目中,注意,因为我们不是每个页面都需要用到画图,都有图表展示,所以我们没有必要将 Echarts 封装到 main.js 中,在需要展示图表的页面引入 Echarts 即可。
Echarts 展示需要等待页面 dom 元素加载完毕,并且需要有一个 dom 元素进行图表的展示,所以 mounted 阶段是我们引入 Echarts 的最佳时间点。以测试平台的报告为例,具体操作如下:
我们在 script 模块的 methods 中绘制了图表之后,还需要在页面上进行展示,因此,我们还需要在 template 中新建一个 div 用以展示我们的图表,图表的大小我们可以自行设置,代码如下:
通过以上步骤,图表的绘制和展示就完成了,在终端输入命令'npm run serve',在浏览器中访问'http://localhost:8080/#/report',即可看到绘制的图表展示在report页面。
这只是一个简单的示例,我们可以在 Echarts 中找到更多样的表格示例,可以根据需要选择适合的图表示例。Echarts 示例网址:https://echarts.apache.org/examples/zh/index.html
当我们想要修改 Echarts 图表样式时,在 Echarts 中找到适合的示例,将左侧的示例编辑部分代码复制粘贴到绘制图表部分即可。
数据展示与分析就先说到这里啦,大家可以多多练习一下哦~
版权声明: 本文为 InfoQ 作者【测试人】的原创文章。
原文链接:【http://xie.infoq.cn/article/d500de2f4334c237bcd68c7d3】。文章转载请联系作者。
评论