使用Vue+DataV+ECharts打造新冠肺炎疫情数据大屏(可动态刷新) |
您所在的位置：网站首页 › echarts数据动态更新 › 使用Vue+DataV+ECharts打造新冠肺炎疫情数据大屏(可动态刷新) |
使用Vue+DataV+ECharts打造新冠肺炎疫情数据大屏(可动态刷新)
|
源码 查看原文： 效果图演示仅适配 1080P 屏幕，使用浏览器访问后按 F11 进入全屏可看最佳显示效果。 疫情真实数据演示地址：演示地址-真实数据 模拟数据演示地址：演示地址-模拟数据 预览图前端框架和类库Vue.jsApache EChartsDataVaxiosElementMock代码实现创建项目使用 Vue Cli 创建 Vue 项目，没有 Vue Cli 的使用以下命令安装： npm install -g @vue/cli创建项目： vue create datav-covid-19安装依赖# 安装 DataV npm install @jiaminghi/data-view # 安装 echarts npm install echarts -S # 安装 element-ui npm i element-ui -S # 安装 vue-router npm install vue-router # 安装 mockjs npm install mockjs --save-dev # 安装 axios npm install axios # 安装 echarts-liquidfill npm i echarts-liquidfill引入注册在项目中引入，编辑 main.js： import Vue from 'vue' import App from './App.vue' import dataV from '@jiaminghi/data-view' import * as echarts from 'echarts' import 'element-ui/lib/theme-chalk/index.css'; import axios from 'axios' // 引入 echarts 水球图 import 'echarts-liquidfill' import VueRouter from 'vue-router' import { Icon, Row, Col, Table, TableColumn, Button, Dialog, Link } from 'element-ui'; // 注册 echarts Vue.prototype.$echarts = echarts Vue.config.productionTip = false // 注册 axios Vue.prototype.axios = axios // 注册 dataV Vue.use(dataV) // 注册路由 Vue.use(VueRouter) // 按需注册其他 element-ui 组件 Vue.use(Icon) Vue.use(Row) Vue.use(Col) Vue.use(Table) Vue.use(TableColumn) Vue.use(Button) Vue.use(Dialog) Vue.use(Link) new Vue({ render: h => h(App), }).$mount('#app') 编写组件因为篇幅有限，为了阅读体验，这里以 累计排名 组件为例，其他的组件请看 Github 上的代码。 累计排名组件效果图  累计排名组件采用 ECharts 的柱状图来显示，实现代码如下： import * as echarts from 'echarts' let chart = null export default { props: { data: { type: Object, default () { return { provinceList: [], valueList: [] } } } }, methods: { initChart () { if (null != chart && undefined != chart) { chart.dispose() } chart = this.$echarts.init(this.$refs.provinceRankingBarChart) this.setOptions() }, setOptions() { var salvProValue = this.data.valueList; var salvProMax = []; for (let i = 0; i 准备模拟数据项目中提供了两种数据提供方式，一是请求真实后台地址，返回的数据格式参考 data 目录下的 json 文件；二是在本地使用 Mock 生成模拟数据。这里仅介绍使用 Mock 生成模拟数据方式。 使用 Mock 生成模拟数据在项目根目录下创建文件夹 mock，分别创建 covid19.js 和 index.js； 编写 mock 服务covid19.js 代码如下，代码中使用到一些 Mock 的语法，具体使用方法请查看 Mock 的文档。 // 从本地读取 json 数据 const provinceData = require('../data/covid19-province.json') const dailyData = require('../data/covid19-daily-list.json') // 引入 mockjs const Mock = require('mockjs') // 使用 mockjs 的 Random 生成随机数据 const Random = Mock.Random module.exports = [ { url: '/api/covid-19/overall', type: 'get', response: config => { return { success: true, code: 200, message: "操作成功", data: { confirmedCount: Random.integer(110000, 120000), confirmedIncr: 72, curedCount: Random.integer(100000, 110000), curedIncr: 173, currentConfirmedCount: Random.integer(3000, 4000), currentConfirmedIncr: -110, deadCount: Random.integer(4000, 6000), deadIncr: 12, importedCount: Random.integer(6000, 8000), importedIncr: 23, noInFectCount: Random.integer(400, 600), noInFectIncr: 8, suspectIncr: 0, suspectCount: 2, updateTime: "2021-07-15 20:39:11", curedRate: Random.float(90, 95, 0, 9), deadRate: Random.float(1, 5, 0, 9) } } } }, { url: '/api/covid-19/area/latest/list', type: 'get', response: config => { return provinceData } }, { url: '/api/covid-19/list', type: 'get', response: config => { return dailyData } } ] 注册 mock 服务编辑 index.js，这里主要是注册 mock 服务，调用方法 initMockData() 完成注册； const Mock = require('mockjs') // 引入写好的 mock 服务 const covid19 = require('./covid19') const mocks = [ ...covid19 ] function param2Obj(url) { const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ') if (!search) { return {} } const obj = {} const searchArr = search.split('&') searchArr.forEach(v => { const index = v.indexOf('=') if (index !== -1) { const name = v.substring(0, index) const val = v.substring(index + 1, v.length) obj[name] = val } }) return obj } const initMockData = () => { Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send Mock.XHR.prototype.send = function() { if (this.custom.xhr) { this.custom.xhr.withCredentials = this.withCredentials || false if (this.responseType) { this.custom.xhr.responseType = this.responseType } } this.proxy_send(...arguments) } function XHR2ExpressReqWrap(respond) { return function(options) { let result = null if (respond instanceof Function) { const { body, type, url } = options result = respond({ method: type, body: JSON.parse(body), query: param2Obj(url) }) } else { result = respond } return Mock.mock(result) } } for (const i of mocks) { Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response)) } } module.exports = { mocks, initMockData } 使用 mock 服务在 main.js 中引入： const { initMockData } = require('../mock') // 完成注册 initMockData()然后在页面中使用 request.get('/api/covid-19/list') 就能请求获取到数据，这里的 request.get() 是我用 axios 封装写的方法。 封装数据接口封装 axios项目中的数据请求都是使用 axios 为方便使用，我简单封装了一个工具类 request.js： import axios from "axios" import sysConst from '../libs/const' const fetch = (method = 'GET', url, param = '') => { // 处理 url url = `${sysConst.baseUrl}${url}` return new Promise((resolve, reject) => { axios({ method: method, url: url, changeOrigin: true, data: JSON.stringify(param) }).then((res) => { resolve(res.data) }, error => { reject(error) }).catch((error) => { reject(error) }) }) } const get = (url) => { return fetch('GET', url) } const post = (url, data) => { return fetch('POST', url, data) } const put = (url, data) => { return fetch('PUT', url, data) } const remove = (url, data) => { return fetch('DELETE', url, data) } export { get, post, put, remove }这里引入的 const.js 代码如下： let baseUrl = '' if (process.env.NODE_ENV === 'development') { // 修改你的 API 地址 baseUrl = '' } else { // 你的 API 地址 baseUrl = '' } export default { baseUrl } 封装数据接口在项目根目录下新建文件夹 api ，用于保存编写数据接口，在该目录下新增文件 covid19.js，用于封装请求获取数据： import * as request from '@/utils/request' /** * 接口封装 */ export default { getOverall() { let url = `/api/covid-19/overall?_=${Math.random()}` return request.get(url) }, getProvinceDataList() { let url = `/api/covid-19/area/latest/list?_=${Math.random()}` return request.get(url) }, getDailyList() { let url = `/api/covid-19/list?t=${Math.random()}` return request.get(url) } } 调用数据接口获取数据并更新图表展示// 引入 import covid19Service from '../api/covid19' // 使用 let self = this covid19Service.getOverall().then((res) => { if (!res.success) { console.log('错误:' + res.info) return } // 修改数据，图表组件检测到数据变化会触发 setOptions() 方法更新显示( setOptions() 在图表组件中已定义好) self.basicData = res.data }) 项目结构完整的项目结构如下： ├─build ├─data # 本地模拟数据目录 ├─mock # mock 配置 ├─public └─src ├─api # 接口封装目录 ├─assets ├─components # 组件目录 │ ├─About # 关于 │ ├─BasicDataItemLabel # 基本数据显示标签 │ ├─BasicProportionChart # 占比图表 │ ├─BasicTrendChart # 趋势图表 │ ├─ChartCard # 图表面板 │ ├─CuredAndDeadRateChart # 治愈率和死亡率图表 │ ├─CurrentConfirmedCompareBarChart # 最近一周累计治愈图表 │ ├─DataMap # 数据地图 │ └─ProvinceRankingBarChart # 累计排名图表 ├─libs # 一些常用的配置 ├─router # 路由配置 ├─utils # 工具类 └─views # 视图详细结构：  总结采用组件化封装各个展示图表，能更好的图表展示及复用；使用 axios 请求后台服务或本地 mock 服务获取数据，然后重新赋值图表中指定的数据；项目源码：本项目源码已上传至 Github，在我的博客中可查看到地址： 这个项目是个人学习作品，能力有限，难免会有 BUG 和错误，敬请谅解。如有更好的建议或想法，请指出，谢谢 |
【本文地址】
今日新闻 |
推荐新闻 |