Datav Vue Main

Posted on  by admin

原文地址:使用Vue+DataV+Echarts打造新冠肺炎疫情数据大屏(可动态刷新)

源码

查看:https://blog.lanweihong.com/posts/29267/

效果图

演示

仅适配 1080P 屏幕,使用浏览器访问后按 F11 进入全屏可看最佳显示效果。

  1. 疫情真实数据演示地址:演示地址-真实数据

  2. 模拟数据演示地址:演示地址-模拟数据

前端框架和类库

代码实现

创建项目

使用 Vue Cli 创建 Vue 项目,没有 Vue Cli 的使用以下命令安装:

创建项目:

安装依赖

引入注册

在项目中引入,编辑 main.js

编写组件

因为篇幅有限,为了阅读体验,这里以 累计排名 组件为例,其他的组件请看 Github 上的代码。

累计排名组件

效果图

累计排名组件采用 ECharts 的柱状图来显示,实现代码如下:

在页面中引入使用:

其他组件的代码就不在这里写了,完整代码已上传 Github ,需要的可以去查看。

完整的组件结构如下:

准备模拟数据

项目中提供了两种数据提供方式,一是请求真实后台地址,返回的数据格式参考 data 目录下的 json 文件;二是在本地使用 Mock 生成模拟数据。这里仅介绍使用 Mock 生成模拟数据方式。

使用 Mock 生成模拟数据

在项目根目录下创建文件夹 mock,分别创建 covid19.jsindex.js

编写 mock 服务

covid19.js 代码如下,代码中使用到一些 Mock 的语法,具体使用方法请查看 Mock 的文档。

注册 mock 服务

编辑 index.js,这里主要是注册 mock 服务,调用方法 initMockData() 完成注册;

使用 mock 服务

main.js 中引入:

然后在页面中使用 request.get('/api/covid-19/list') 就能请求获取到数据,这里的 request.get() 是我用 axios 封装写的方法。

封装数据接口

封装 axios

项目中的数据请求都是使用 axios 为方便使用,我简单封装了一个工具类 request.js

这里引入的 const.js 代码如下:

封装数据接口

在项目根目录下新建文件夹 api ,用于保存编写数据接口,在该目录下新增文件 covid19.js,用于封装请求获取数据:

调用数据接口获取数据并更新图表展示

项目结构

完整的项目结构如下:

详细结构:

总结

  1. 采用组件化封装各个展示图表,能更好的图表展示及复用;
  2. 使用 axios 请求后台服务或本地 mock 服务获取数据,然后重新赋值图表中指定的数据;

项目源码:本项目源码已上传至 Github,在我的博客中可查看到地址:使用Vue+DataV+Echarts打造新冠肺炎疫情数据大屏(可动态刷新)

这个项目是个人学习作品,能力有限,难免会有 BUG 和错误,敬请谅解。如有更好的建议或想法,请指出,谢谢