vue3和ts搭建项目效果图

要证明是意料之中的,先看效果图:

我对公众开放。有兴趣的话可以下来玩。这是我第一次用vue3和ts搭建项目,肯定有不足之处[比如ts里疯狂的:any,一直很酷的^o^/],

(欢迎明星!欢迎明星!欢迎明星!

1以3D形式展示全球疫情分布,

2.显示实时疫情值,

3.以图表形式分析疫情数据

4.允许下载各地疫情excel表格,

5.自动获取用户的位置,

6.分析当地疫情数据,

7.生成当地疫情的文字报告,

Get方法,无需参与。这个api可以获取世界各国的大致疫情数据,也可以获取中国的详细疫情数据。这里,我将解释api中的字段。这些字段是我自己推测的含义,不会100%准确:

获取方法,参数:

api可以获取国内指定省份的疫情数据,我就不去推断字段了,但是可以从之前的api和一些英文单词推断出来【对!我就是不想打字!太累了!_?其实也不算折磨。后面用api的时候就是一个转折】,

Get模式,无需参与,api可以获取用户的ip地址,省市,返回的结果如下:

该项目属于vue3。首先,你要创造它。这里推荐使用vue scaffold的图形界面来创建项目。命令是:vue ui。

vue3和ts搭建项目效果图

选择手动配置:

选择vue3选项3360

2.创建光源:为了效果,我使用了环境光和平行光源,这两种光源都会影响贴图的原始颜色。建议将光源颜色设置为白色。

3.创建球体:

4.渲染:创建后记得渲染,否则不会生效。

主页上的3D球体可以通过鼠标控制,

在首页的右侧和“国内分析”的右侧,有一排数字,那个数字在加载的时候是有数值递增的动画。

桌子做好了,发现款式,颜色等等都不是我想要的。事实上,我可以改变css变量。注意不是全局修改,是风格的局部修改。例如,如果您希望表格像这样透明:

那么你可以这样做:

css变量名,可以从f12获得,

左侧页面和水平条形图类似于"国内分析"

颜色,位置,标题都可以自己设置。

在“国内分析”中,有一张中国地图,用来展示中国现有的诊断分布,支持缩放和拖动。

“国内分析”是一个带有历史数据的折线图,允许缩放调整。

主要用的是xlsx插件,非常好用。当数据直接传入时,表单就会出现。我是这样使用它的:

这样做我其实学到了很多,主要是vue2和vue3的区别。以前的这种可以完全抛弃,并结合api与setup语法sugar。酷!即使引入组件后,也不需要注册,直接使用。但是,也有一些注意事项。使用ref []声明的响应式变量时,需要加上“vaule”。至于ts,感觉还是很有味道的,一直都很开心。ts型系统被我直接无视了。后来我还得观察其他大佬写了什么。截至2022年9月13日,成都市疫情有所好转。其实所有项目都是烂尾,主要是“省内分析”和“下载当地疫情报告”。我做了一个警报提示,但是数据还是被获取了,我稍后正在处理。我的项目是完全开源的,如果很牛逼,可以直接克隆开发。

发表评论

Copyright 2002-2022 by 尔韵网络游戏门户网(琼ICP备2022001899号-3).All Rights Reserved.