项目介绍
一个基于 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
