项目描述
一个基于 Vue、Datav、Echart 框架的 " 数据大屏项目 ",通过 Vue 组件实现数据动态刷新渲染,内部图表可实现自由替换。部分图表使用 DataV 自带组件,可进行更改
项目需要全屏展示(按 F11)。
项目部分区域使用了全局注册方式,增加了打包体积,在实际运用中请使用 按需引入。
拉取项目之后,建议按照自己的功能区域重命名文件,现以简单的位置进行区分。
项目环境:Vue-cli-3.0、DataV-2.7.3、Echarts-4.6.0(如果5.x版本有问题,请切换到4.x版本)、Webpack-4.0、Npm-6.13、Node-v12.16。
请拉取 master 分支的代码,其余分支是开发分支。
主要文件介绍
文件 作用/功能
main.js 主目录文件,引入 Echart/DataV 等文件
utils 工具函数与 mixins 函数等
views/ index.vue 项目主结构
views/其余文件 界面各个区域组件(按照位置来命名)
assets 静态资源目录,放置 logo 与背景图片
assets / style.scss 通用 CSS 文件,全局项目快捷样式调节
assets / index.scss Index 界面的 CSS 文件
components/echart 所有 echart 图表(按照位置来命名)
common/... 全局封装的 ECharts 和 flexible 插件代码(适配屏幕尺寸,可定制化修改)
三、使用介绍
启动项目
需要提前安装好 nodejs 与 yarn,下载项目后在项目主目录下运行 yarn 拉取依赖包。安装完依赖包之后然后使用 vue-cli 或者直接使用命令npm run serve,就可以启动项目,启动项目后需要手动全屏(按 F11)。如果编译项目的时候提示没有 DataV 框架的依赖,输入 npm install @jiaminghi/data-view 或者 yarn add @jiaminghi/data-view 进行手动安装。
封装组件渲染图表
所有的 ECharts 图表都是基于 common/echart/index.vue 封装组件创建的,已经对数据和屏幕改动进行了监听,能够动态渲染图表数据和大小。在监听窗口小大的模块,使用了防抖函数来控制更新频率,节约浏览器性能。
项目配置了默认的 ECharts 图表样式,文件地址:common/echart/theme.json。
封装的渲染图表组件支持传入以下参数,可根据业务需求自行添加/删除。
参数名称 类型 作用/功能
id String 唯一 id,渲染图表的节点(非必填,使用了 $el)
className String class样式名称(非必填)
options Object ECharts 配置(必填)
height String 图表高度(建议填)
width String 图表宽度(建议填)
动态渲染图表
动态渲染图表案例为 components 目录下各个图表组件,index 文件负责数据获取和处理,chart 文件负责监听和数据渲染。
chart 文件的主要逻辑为:
<template>
<div>
<Echart :options="options" id="id" height="height" width="width" ></Echart>
</div>
</template>
<script>
// 引入封装组件
import Echart from '@/common/echart'
export default {
// 定义配置数据
data(){ return { options: {}}},
// 声明组件
components: { Echart},
// 接收数据
props: {
cdata: {
type: Object,
default: () => ({})
},
},
// 进行监听,也可以使用 computed 计算属性实现此功能
watch: {
cdata: {
handler (newData) {
this.options ={
// 这里编写 ECharts 配置
}
},
// 立即监听
immediate: true,
// 深度监听
deep: true
}
}
};
</script>
复用图表组件
复用图表组件案例为中间部分的 任务通过率与任务达标率 模块,两个图表类似,区别在于颜色和主要渲染数据。只需要传入对应的唯一 id 和样式,然后在复用的组件 components/echart/center/centerChartRate 里进行接收并在对应位置赋值即可。
如:在调用处 views/center.vue 里去定义好数据并传入组件
//组件调用
<span>今日任务通过率</span>
<centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />
<span>今日任务达标率</span>
<centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />
...
import centerChart from "@/components/echart/center/centerChartRate";
data() {
return {
rate: [
{
id: "centerRate1",
tips: 60,
...
},
{
id: "centerRate2",
tips: 40,
colorData: {
...
}
}
]
}
}
更换边框
边框是使用了 DataV 自带的组件,只需要去 views 目录下去寻找对应的位置去查找并替换就可以,具体的种类请去 DavaV 官网查看 如:
<dv-border-box-1></dv-border-box-1>
<dv-border-box-2></dv-border-box-2>
<dv-border-box-3></dv-border-box-3>
更换图表
直接进入 components/echart 下的文件修改成你要的 echarts 模样,可以去echarts 官方社区里面查看案例。
Mixins 解决自适应适配功能
使用 mixins 注入解决了界面大小变动图表自适应适配的功能,函数在 utils/resizeMixins.js 中,应用在 common/echart/index.vue 的封装渲染组件,主要是对 this.chart 进行了功能注入。
屏幕适配
1.5 版本项目放弃了 flexible 插件方案,将 rem 改回px,使用更流程通用的 css3:scale 缩放方案,通过 ref 指向 views/index,屏幕改变时缩放内容。项目的基准尺寸是 1920px*1080px,所以支持同比例屏幕 100% 填充,如果非同比例则会自动计算比例居中填充,不足的部分则留白。实现代码在 src/utils/userDraw ,如果有其它的适配方案,欢迎交流。
请求数据
现在的项目未使用前后端数据请求,建议使用 axios 进行数据请求,在 main.js 位置进行全局配置。
axios 的 main.js 配置参考范例(因人而异)
import axios from 'axios';
//把方法放到vue的原型上,这样就可以全局使用了
Vue.prototype.$http = axios.create({
//设置20秒超时时间
timeout: 20000,
baseURL: 'http://172.0.0.1:80080', //这里写后端地址
});
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
基于 vue3、vite、Echart 框架的大数据可视化(大屏展示)模板.zip 下载可用,确保可以运行。 基于 vue3、vite、Echart 框架的大数据可视化(大屏展示)模板.zip 下载可用,确保可以运行。基于 vue3、vite、Echart 框架的大数据可视化(大屏展示)模板.zip 下载可用,确保可以运行。基于 vue3、vite、Echart 框架的大数据可视化(大屏展示)模板.zip 下载可用,确保可以运行。基于 vue3、vite、Echart 框架的大数据可视化(大屏展示)模板.zip 下载可用,确保可以运行。基于 vue3、vite、Echart 框架的大数据可视化(大屏展示)模板.zip 下载可用,确保可以运行。基于 vue3、vite、Echart 框架的大数据可视化(大屏展示)模板.zip 下载可用,确保可以运行。基于 vue3、vite、Echart 框架的大数据可视化(大屏展示)模板.zip 下载可用,确保可以运行。基于 vue3、vite、Echart 框架的大数据可视化(大屏展示)模板.zip 下载可用,确保可以运行。基于 vue3、
资源推荐
资源详情
资源评论
收起资源包目录
基于 vue3、vite、Echart 框架的大数据可视化(大屏展示)模板.zip (45个子文件)
基于 vue3、vite、Echart 框架的大数据可视化(大屏展示)模板
yarn.lock 405KB
babel.config.js 73B
src
App.vue 197B
store
index.js 168B
assets
logo.png 7KB
pageBg.png 289KB
scss
index.scss 3KB
_variables.scss 1KB
style.scss 3KB
main.js 928B
utils
drawMixin.js 2KB
resizeMixin.js 824B
index.js 1KB
components
echart
centerRight
centerRightChart
chart.vue 3KB
index.vue 1KB
bottom
bottomRightChart
chart.vue 8KB
index.vue 2KB
bottomLeftChart
chart.vue 3KB
index.vue 2KB
centerLeft
centerLeft2Chart
chart.vue 8KB
index.vue 1KB
centerLeft1Chart
chart.vue 1KB
index.vue 646B
center
centerChartRate
index.vue 2KB
common
map
fujian.js 44KB
echart
index.vue 1KB
theme.json 8KB
router
index.js 242B
views
bottomLeft.vue 979B
centerRight1.vue 2KB
centerLeft1.vue 3KB
centerLeft2.vue 1KB
bottomRight.vue 1KB
index.vue 4KB
centerRight2.vue 2KB
center.vue 6KB
package.json 1KB
public
image.png 2KB
favicon.ico 4KB
index.html 613B
other_image.png 1.03MB
other_image2.png 1.53MB
使用说明.txt 6KB
vue.config.js 304B
.gitignore 214B
共 45 条
- 1
资源评论
盈梓的博客
- 粉丝: 6867
- 资源: 1251
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- pta题库答案c语言之排序4统计工龄.zip
- pta题库答案c语言之树结构7堆中的路径.zip
- pta题库答案c语言之树结构3TreeTraversalsAgain.zip
- pta题库答案c语言之树结构2ListLeaves.zip
- pta题库答案c语言之树结构1树的同构.zip
- 基于C++实现民航飞行与地图简易管理系统可执行程序+说明+详细注释.zip
- pta题库答案c语言之复杂度1最大子列和问题.zip
- 三维装箱问题(Three-Dimensional Bin Packing Problem,3D-BPP)是一个经典的组合优化问题
- 以下是一些关于Linux线程同步的基本概念和方法.txt
- 以下是一个简化的示例,它使用pygame库来模拟烟花动画的框架.txt
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功