数据大屏项目Vue3+TypeScript+tailwindcss+Vite+DataV+Echart+pinia

已于 2022-12-12 10:29:28 修改
阅读量4.5k 收藏 8
点赞数 2
文章标签： vue.js 前端 javascript
于 2022-12-06 14:22:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42424283/article/details/128202339
版权

疫情数据大屏（ts+vue3）

本着学习vue3+ts技术栈的目前，敲了这个项目。

主要的技术栈为Vue3、Vite、DataV、Echart、TypeScript、pinia、vue-router、 tailwindcss等

数据的接口使用的是163的接口，此项目使用到的数据可能存在误差，正确的数据请到相关网站查阅,此项目主要的侧重于前端技术站栈的练习,不在于数据本身。

注意：本地dev已经配置好vite代理，部署到nginx请设置nginx代理才能调用163疫情接口

此项目源码于github,地址如下，如果此项目对你有帮助，麻烦点个小星星

wfxt0911/epidemic-big-screen (github.com)

在线预览地址:

在线预览地址
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

蹦哒
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
大屏可视化基于vue+tailwindcss+echarts
08-30
大屏可视化基于vue+tailwindcss+echarts
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
商务合作/软件定制/学习交流
03-10 1万+
Vue3+TS+DataV+Echarts搭建数据大屏模板
数据大屏vue3+ts+axios+MockJS+dataV+echarts
最新发布
weixin_45618535的博客
05-21 1550
一、官网/文档 vue3：https://cn.vuejs.org/api/ TypeScript：https://www.tslang.cn/docs/handbook/basic-types.html axios：http://www.axios-js.com/zh-cn/docs/ MockJS：http://mockjs.com/ dataV：http://datav.jiaminghi.com/guide/ echarts：https://echarts.apache.org/handbook/
数据可视化vue3 + datav 项目准备
06-12 2229
因为模块里的package.json文件的model配置写错了，你需要把里面的js改为mjs，引入才不会报错。使用datav的时候建议使用：kjgl77重构的版本，官方的修改有点麻烦。第一步创建vue3项目，这一步就不说了，按照你最熟悉的方式创建就好了。官方版本是在使用时，引入的时候就会报错，使用方法和官方版本是一样的。
Vue3大数据大屏可视化（TS+Echarts）
NovaLog的博客
08-24 3174
大数据可视化大屏模板
vue3使用大屏dataV详细教程
weixin_51958960的博客
02-03 7593
vue3使用大屏dataV详细教程
Vue 3 + TypeScript + Vite + pinia + router 脚手架
10-12
Vue 3 + TypeScript + Vite + Pinia + Router 脚手架是一个高效且现代的前端开发环境，专为构建大型、复杂应用而设计。这个脚手架集合了多个流行的库和技术，旨在提供一个快速、类型安全且易于维护的开发体验。 ...
Vue3+Vite+TypeScript+Ant Design Vue+Pinia等主流技术的后台管理系统项目.zip
01-03
Vue3+Vite+TypeScript+Ant Design Vue+Pinia是一个现代前端开发的组合，用于构建高效、可维护的后台管理系统。这个项目充分利用了这些技术的优势，提供了丰富的功能和优化的开发体验。以下是对这些技术及其在后台...
vue3+ts+less+vite+pinia+axios基础封装项目模版
03-26
Vue 3是Vue.js的最新版本，带来了许多改进和新特性，包括更快的性能、更小的体积、更好的TypeScript支持以及Composition API等。使用Vue 3，开发者可以更加高效地构建用户界面，并享受更好的开发体验。 TypeScript ...
vue3+vite+pinia+typescript后台管理系统.zip
01-03
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
vite+vue3+pinia+typescript 后台管理系统.zip
12-31
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 Vue3，springboot，element-ui使用技巧，实战应用...
vue3中使用dataV
Daryl_Java的博客
05-20 4459
一、安装 npm install @jiaminghi/data-view 二、在main.ts中全局引入 // 将自动注册所有组件为全局组件 import dataV from '@jiaminghi/data-view' Vue.use(dataV) 三、在shims-vue.d.ts文件中,通过declare module进行声明 declare module '@jiaminghi/data-view' ...
DataV兼容vue3的方法
xi1213的博客
11-04 3834
2、将node_modules/@jiaminghi/data-view/lib/components/decoration3/src/main.vue中rect标签的:key="i"剪切到有v-for那一层的template中。3、将node_modules/@jiaminghi/data-view/lib/components/decoration6/src/main.vue中rect标签的:key="i"剪切到有v-for那一层的template中。现在重新运行项目看看，是不是不报错了？
基于VUE + Echarts 实现可视化数据大屏智慧校园可视化
HTML网页设计
08-16 5822
🚀 基于 vue、datav、Echart 框架的大数据可视化（大屏展示）源码，基于VUE+Echarts 制作，实现大数据可视化。通过 vue 组件实现数据动态刷新渲染，内部图表可自由替换。部分图表使用 DataV 自带组件，可自由进行更改， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，.
vue3使用datav
热门推荐
wa_2021的博客
04-25 4万+
一、安装 npm install @jiaminghi/data-view 二、main.js中全局配置 import dataV from '@jiaminghi/data-view' const app=createApp(App) app.use(dataV) 三、 1、引入后发现报错 2、修改源码中的代码 根据提示点击进入该文件 3、 用div将整个<rect>包起来，把template里的for循环放进div中（有两个地方要改，重复操作即可） .
vue3+js引入DataV方法及报错处理
qq_45752346的博客
02-20 1757
这个错误改完还有/node_modules/jiaminghi/data-view/lib/components/decoration3/src/main.vue文件需要修改（相同错误，相同修改方法），修改后重启项目。依赖包引入报错，需要在/node_modules/jiaminghi/data-view/lib/components/decoration6/src/main.vue 下。将:key = 'i'移动到<template>上，在template上遍历，key位置错误。3.1引入文件遍历错误。
Vue3.2 + TypeScript + Pinia + Vite4 + Element-Plus + 微前端（qiankun）后台管理系统模板（已开源---新增T-ui-plus超级表格demo）
wocwin的博客
04-20 2538
Vue3.2 + TypeScript + Pinia + Vite4 + Element-Plus + 微前端（qiankun） 后台管理系统模板（已开源）vue3+vite项目；Vue3项目；后台管理系统，脚手架模板，开箱即用，登录页面重写及新增fastmock接口，新增大屏页面；新增菜单及按钮权限控制；EasyMock；fastMock
vue3+vite+ts 实现大屏数字滚动效果
平平无奇的小菜鸡
12-06 389
样式用的是windicss。
推荐一款基于Vue3+vite+ts的项目模板
m0_56344602的博客
03-15 1582
各位小伙伴好久不见，最近由于换工作的问题挺长一段时间没有更新博客，接触到新公司的项目正好也是vue3+vite+ts，就想到前段时间自己玩的一个模板，就找机会完善了一下。先看图，大概是这样的。 Vue3+vite+ts模板 此模板适合vue3初学者，可以拿来当练手的项目。基本功能也比较齐全，后续有机会也会慢慢完善后续功能，项目有开始搭建到最后的手把手教学，有多详细呢？大概是只要你跟着做我觉得就是可以做出来的。 欢迎克隆 地址 ：Vue3+vite+ts项目模板: 本项目基于vue3+vite
vue3 + typescript + pinia + vite的开源若依项目
05-14
若依项目是一个基于 Spring Cloud 的企业级开发平台，包含了前后端分离的权限管理系统、代码生成器、工作流等模块。其中前端部分采用了 Vue3 + TypeScript + Pinia + Vite 技术栈，具有较高的性能和可维护性。 Vue3 是目前流行的前端框架之一，其在性能方面有着很大的提升，同时还提供了更好的 TypeScript 支持。Pinia 是一个轻量级的 Vuex 替代品，提供了更好的类型约束和更简洁的 API。Vite 是一个非常快速的构建工具，能够快速地启动开发服务器并进行实时的热更新。 若依项目的前端部分采用了这些技术，能够提供一个高效、可维护的代码库，为企业级应用的开发提供了强有力的支持。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值