头图

Vue3 + x-sheet 打造在线疫情高峰预测数据表

背景

最近,一位大数据专家通过百度“发烧”的搜索指数、公开的疫情感染人数等指标,计算出每个城市的“超额发烧搜索指数累计面积”,并且通过城市的搜索指数累计增长、累计速度,就可以算出现在每一个有疫情的城市疫情大概的达峰时间,以及疫情结束的时间等指标。

作者表示,本次推演计算是依据对台湾地区、香港特别行政区和日本的感染情况与 Google 搜索“发烧”搜索指数进行了分析,发现的一个可能可以帮助预测感染高峰期的方法,可能不够准确,但是具有一定的参考意义。

由于预测模型的设计和计算非常复杂,作者非常专业,根据对疫情实际发展情况、头条系产品、百度全国搜索指数的持续关注,不断对模型进行调整,修复了原先预测模型中的很多问题,比如对多段疫情合并计算,疫情结束时间的算法尾部过宽,小城市没有统计到,医疗挤兑问题,等等。

此次 12 月 22 日更新的数据表,在以前数据的基础上增加了一项 累计感染占比,经过几次的模型优化,之后的数据会趋于稳定。接下来小编给展示下如何打造一个自己的在线疫情高峰预测数据表。

方案

我们采用一个开源在线电子表格插件x-sheet来实现,看下效果

x-sheet搭建疫情预测数据表

在线预览地址

各城市第一波感染高峰预测数据表

步骤

启动 vue3 x-sheet 工程

参考这篇文章初始化一个vue3 + x-sheet工程

vue3 + x-sheet 打造你自己的在线表格应用

添加表格组件

src/components目录下新建表格组件Forecast.vue

<script setup lang="ts">
import { onMounted } from "vue";

onMounted(() => {
  window.xsheet = new window.XSheet("#demo");
});
</script>

<template>
  <div id="demo"></div>
</template>

<style scoped>
#demo {
  width: 100%;
  height: 100%;
}
</style>

这里将x-sheet实例挂载到 window 上,便于我们稍后用来做数据下载

同时因为多了一个window.xsheet变量,我们需要在声明文件vite-env.d.ts中补充xsheet的类型

/// <reference types="vite/client" />
export {};
declare global {
  interface Window {
    xsheet: any;
    XSheet: any;
  }
}

制作表格数据

正常情况下我们可以直接根据配置信息来初始化数据

初始化配置信息可以参考这里:X-Sheet 开发教程:初始化配置自定义布局

但是我们这里数据量不算小,我们采用先编辑后导出JSON的思路,来获取到初始化数据。

首先我们准备好 原始Excel数据,拷贝粘贴到x-sheet界面中来
数据粘贴到x-shee

全国城市疫情高峰预测详细数据表 Excel

因为当前版本x-sheet对粘贴功能支持还不全,我们再调整一下样式
x-sheet搭建疫情预测数据表

感觉样式可以了,这里就可以用到刚刚挂载到window的表格x-sheet实例来取数据,在控制台输入

window.xsheet.getWork().getBody().getAllSheetJson()

会立刻触发下载一个js文件,就是当前sheet数据了,把这个文件放到我们vue3项目的/public/js文件夹中,重命名为forecast.js,并将js文件内的window变量也重命名下

window['forecast'] = {/*其他代码*/}

引入表格数据

在根目录的index.html中引入forecast.js文件,

<script src="js/forecast.js"></script>

并在Forecast.vue中使用表格数据初始化x-sheet

window.xsheet = new window.XSheet("#demo", {
    workConfig: {
      body: {
        sheets: [window["forecast"]],
      },
    },
  });

不要忘记在声明文件vite-env.d.ts中补充forecast的类型

/// <reference types="vite/client" />
export {};
declare global {
  interface Window {
    xsheet: any;
    XSheet: any;
    forecast: any;
  }
}

现在刷新界面,就能正常展示数据了。

总结

以上就是小编实现vue3 x-sheet来打造在线疫情高峰预测数据表,参照这个教程,你可以自由的定制你自己的个性化在线表格应用。详细源码请参考

https://github.com/openHackin...

教程比较初级,欢迎大家一同学习探讨。

参考


OpenHacker
全栈工程师

全栈工程师

0 声望
1 粉丝
0 条评论
推荐阅读
开源 IM 系统 tinode 部署教程| WSL 环境
我们的需求是在本地部署一套 IM 系统,选择 tinode。为便于后端启动,我们采用 WSL 环境,配合 docker 安装数据库,来启动 IM 应用。

OpenHacker阅读 933

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.1k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.6k评论 3

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 19.8k评论 9

全栈工程师

0 声望
1 粉丝
宣传栏