项目介绍
一个基于 Vue、Datav、Echart 框架开源免费的大数据可视化(大屏展示)模板,提供数据动态刷新渲染、屏幕适应、内部图表自由替换、Mixins注入等功能。

应用场景
-
企业数据监控中心:用于实时监控企业关键业务指标,如销售额、用户活跃度、系统运行状态等。 -
智慧城市展示:展示城市运行数据,如交通流量、环境监测、公共安全等。 -
金融数据分析:用于金融市场的实时数据监控与分析,如股票行情、外汇交易等。 -
会议与展览展示:在大型会议或展览中,作为信息展示平台,直观展示活动数据与成果。 -
教育与研究机构:用于教学演示或科研成果展示,提升数据可视化效果。
功能模块
数据动态刷新渲染
-
支持实时数据更新,确保展示数据的时效性和准确性。 -
通过Vue组件实现数据的动态绑定和渲染。
屏幕适应
-
采用CSS3的scale缩放方案,支持不同比例屏幕的100%填充。 -
非同比例屏幕自动计算比例居中填充,不足部分留白。
内部图表自由替换
-
图表组件可自由替换,支持Echarts官方社区的多种图表类型。 -
边框使用DataV自带组件,支持种类查找与替换。
Mixins注入
-
使用Mixins注入解决界面大小变动时的图表自适应适配功能。 -
提升代码复用性和可维护性。
地图组件与自动轮播
-
新增地图组件,支持地图下钻功能。 -
添加自动轮播功能,提升展示效果。
功能特点
-
高度可定制化:支持图表、边框的自由替换,满足不同场景下的展示需求。 -
实时数据更新:确保展示数据的时效性和准确性。 -
响应式布局:支持不同比例屏幕的自动适应,提升用户体验。 -
代码复用性高:通过Mixins注入和组件封装,提升代码复用性和可维护性。 -
丰富的图表类型:支持Echarts官方社区的多种图表类型,满足多样化展示需求。
快速使用
启动项目
需要提前安装好 nodejs 与 pnpm,下载项目后在项目主目录下运行 pnpm 拉取依赖包。安装完依赖包之后然后使用 vue-cli 或者直接使用命令npm run serve,就可以启动项目,启动项目后需要手动全屏(按 F11)。如果编译项目的时候提示没有 DataV 框架的依赖,输入 npm install @jiaminghi/data-view 或者 yarn add @jiaminghi/data-view 进行手动安装。
动态渲染图表
动态渲染图表案例为 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>
复用图表组件
在调用处 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: {
...
}
}
]
}
}
功能演示



开源地址
https://gitee.com/MTrun/big-screen-vue-datav

