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

最新推荐文章于 2023-12-22 16:30:47 发布

测试小迷糊

最新推荐文章于 2023-12-22 16:30:47 发布

阅读量400

点赞数 1

文章标签： vue.js 前端 javascript 压力测试

本文链接：https://blog.csdn.net/hog_ceshiren/article/details/124635848

版权

本文介绍了如何在前端开发中利用ECharts和Vue.js进行数据展示与分析。首先，讲解了ECharts的简介和安装，推荐通过npm安装。接着，展示了在Vue实例中引入ECharts，强调在需要展示图表的页面引入。然后，通过在mounted阶段初始化ECharts并创建挂载元素，完成图表的绘制和展示。最后，提到了ECharts的样式修改和Vue的内部指令，如v-if、v-for等，并简单介绍了Vue项目的初始化与结构。

摘要由CSDN通过智能技术生成

首先将 Vue.js 下载到本地，本章就以本地的 Vue.js 为例。在本地创建一个工作区即创建一个文件夹，使用 vscode 打开，将 Vue.js 放到工作区目录下。

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

ECharts简介与安装

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

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

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: [{