一个基于 Vue、Datav、Echart 框架开源免费的数据大屏可视化系统

一、项目介绍

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

二、应用场景

企业数据监控中心：用于实时监控企业关键业务指标，如销售额、用户活跃度、系统运行状态等。
智慧城市展示：展示城市运行数据，如交通流量、环境监测、公共安全等。
金融数据分析：用于金融市场的实时数据监控与分析，如股票行情、外汇交易等。
会议与展览展示：在大型会议或展览中，作为信息展示平台，直观展示活动数据与成果。
教育与研究机构：用于教学演示或科研成果展示，提升数据可视化效果。

三、功能模块

1、数据动态刷新渲染

支持实时数据更新，确保展示数据的时效性和准确性。
通过Vue组件实现数据的动态绑定和渲染。

2、屏幕适应

采用CSS3的scale缩放方案，支持不同比例屏幕的100%填充。
非同比例屏幕自动计算比例居中填充，不足部分留白。

3、内部图表自由替换

图表组件可自由替换，支持Echarts官方社区的多种图表类型。
边框使用DataV自带组件，支持种类查找与替换。

4、Mixins注入

使用Mixins注入解决界面大小变动时的图表自适应适配功能。
提升代码复用性和可维护性。

5、地图组件与自动轮播

新增地图组件，支持地图下钻功能。
添加自动轮播功能，提升展示效果。

四、功能特点

高度可定制化：支持图表、边框的自由替换，满足不同场景下的展示需求。
实时数据更新：确保展示数据的时效性和准确性。
响应式布局：支持不同比例屏幕的自动适应，提升用户体验。
代码复用性高：通过Mixins注入和组件封装，提升代码复用性和可维护性。
丰富的图表类型：支持Echarts官方社区的多种图表类型，满足多样化展示需求。

五、快速使用

1、启动项目

需要提前安装好 nodejs 与 pnpm,下载项目后在项目主目录下运行 pnpm 拉取依赖包。安装完依赖包之后然后使用 vue-cli 或者直接使用命令npm run serve，就可以启动项目，启动项目后需要手动全屏（按 F11）。如果编译项目的时候提示没有 DataV 框架的依赖，输入

bash 复制代码

npm install @jiaminghi/data-view 

# 或者 

yarn add @jiaminghi/data-view

进行手动安装。

2、动态渲染图表

动态渲染图表案例为 components 目录下各个图表组件，index 文件负责数据获取和处理，chart 文件负责监听和数据渲染。chart 文件的主要逻辑为：

javascript 复制代码

<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>

3、复用图表组件

在调用处 views/center.vue 里去定义好数据并传入组件：

javascript 复制代码

/组件调用
<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://gegeblog.top/article/32