软件测试 | ECharts 简介与安装

2023-03-03
北京
本文字数：1077 字
阅读完需：约 4 分钟

ECharts 简介与安装

ECharts 是一款基于 JavaScript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视

化图表，功能非常强大，目前 ECharts 已经发布到 ECharts 5 版本。我们的项目也选择 Echarts 来作为我们的

数据展示与分析工具。

ECharts 官网：

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

复制代码

ECHARTS 安装

npm 安装

npm install echarts --save

复制代码

官网下载

http://echart.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 页面。

搜索微信公众号：TestingStudio 霍格沃兹的干货都很硬核

发布于: 刚刚阅读数: 3

测吧(北京)科技有限公司

关注

社区：ceshiren.com 微信：ceshiren2023 2022-08-29 加入

微信公众号：霍格沃兹测试开发提供性能测试、自动化测试、测试开发等资料、实事更新一线互联网大厂测试岗位内推需求，共享测试行业动态及资讯，更可零距离接触众多业内大佬

发布

暂无评论

创作场景

软件测试 | ECharts 简介与安装

测吧(北京)科技有限公司

评论