深圳网站建设公司电话,大学生二手书网站开发需求,中国百强城市榜单,子网站建设方案测试平台的数据展示与分析#xff0c;我们主要使用开源工具ECharts来进行数据的展示与分析。
ECharts简介与安装
ECharts是一款基于JavaScript的数据可视化图表库#xff0c;提供直观#xff0c;生动#xff0c;可交互#xff0c;可个性化定制的数据可视化图表#xff…测试平台的数据展示与分析我们主要使用开源工具ECharts来进行数据的展示与分析。
ECharts简介与安装
ECharts是一款基于JavaScript的数据可视化图表库提供直观生动可交互可个性化定制的数据可视化图表功能非常强大目前ECharts已经发布到ECharts 5版本。我们的项目也选择Echarts来作为我们的数据展示与分析工具。
ECharts官网
https://echarts.apache.org/zh/index.htmlECharts安装
npm安装
npm install echarts --save官网下载:
https://echarts.apache.org/zh/download.htmlgithub获取
https://github.com/apache/echarts/releasesCDN方式获取
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用以展示我们的图表图表的大小我们可以自行设置代码如下
templatedivtemplatev-tabs :value3 background-colorprimaryv-tab click$router.push({name:Case})用例管理/v-tabv-tab click$router.push({name:Task})任务管理/v-tabv-tab click$router.push({name:Jenkins})Jenkins管理/v-tabv-tab click$router.push({name:Report})报告管理/v-tab/v-tabs/templatediv idmain stylewidth: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中找到适合的示例将左侧的示例编辑部分代码复制粘贴到绘制图表部分即可。
最后感谢每一个认真阅读我文章的人礼尚往来总是要有的虽然不是什么很值钱的东西如果你用得到的话可以直接拿走 这些资料对于【软件测试】的朋友来说应该是最全面最完整的备战仓库这个仓库也陪伴上万个测试工程师们走过最艰难的路程希望也能帮助到你
