vue-admin-template+Datav实现可视化大屏（亲测可实现）

最新推荐文章于 2024-10-15 12:00:00 发布
最新推荐文章于 2024-10-15 12:00:00 发布
阅读量515 收藏 11
点赞数 3
分类专栏： 可视化+管理系统 Java入门基础 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YGGZZZ/article/details/140923486
版权

vue-admin-template+Datav实现可视化大屏
效果图：在这里插入图片描述
在这里插入图片描述

DataV官网链接：http://datav.jiaminghi.com/guide/
vue-admin-template连接：https://github.com/PanJiaChen
在这里插入图片描述
下载基础版本的即可；vue-admin-template的下载配置就不说啦，整好后安装Datav：

npm install @jiaminghi/data-view

然后在vue-admin-template-master\src\main.js文件中注册

import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // lang i18n
//引入dataV样式
// 将自动注册所有组件为全局组件
import './assets/common.less'

import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

然后直接写，我是在这个文件下面：vue-admin-template-master\src\views\visualization\index.vue

<template>
    <div class="content bg">
      <!-- 全屏容器 -->
      <dv-full-screen-container>
        <!-- 第一行 -->
        <div class="module_box" style="height: 10vh;">
          <div style="flex: 0 1 30%;">
            <dv-decoration-10 style="width:100%;height:50px;" />
          </div>
          <div style="flex: 0 1 40%;">
            <div style="display: flex;width: 100%;">
              <dv-decoration-8 style="width:300px;height:50px;flex:1;transform: rotateY(180deg);" />
              <dv-decoration-11 style="width:200px;height:60px;flex:1">肉鸡表型数据中心</dv-decoration-11>
              <dv-decoration-8 style="width:300px;height:50px;flex:1" />
            </div>
          </div>
          <div style="flex: 0 1 30%;">
            <dv-decoration-10 style="width: 100%;height:50px;transform: rotateY(180deg);" />
          </div>
        </div>
        <!-- 第二行 -->
        <div class="module_box" style="height:60vh;">
                    <!-- flex布局 一行四个 各占25% -->
            <!-- 左 -->
          <div style="flex: 0 1 25%;">
              <dv-border-box-1 style="width: 100%;height: 100%;">
                <dv-capsule-chart v-if="!listLoading" :config="config2" style="width:90%;height:86%" />
              </dv-border-box-1>
              <!-- <dv-border-box-2 style="width: 100%;height: 40%;">
                <dv-conical-column-chart :config="config5" style="width:90%;height:90%;" />
              </dv-border-box-2> -->
            </div>
          <!-- 中 -->
          <div style="flex: 0 1 50%;">
            <dv-border-box-12 style="width: 100%;height: 100%">
              <dv-active-ring-chart v-if="!listLoading" :config="config4" style="width:95%;height:95%" />
            </dv-border-box-12>
          </div>
          <!-- 右 -->
          <div style="flex: 0 1 25%;">
            <dv-border-box-8 style="width: 100%;height: 100%">
              <dv-scroll-ranking-board v-if="!listLoading" :config="config2" style="width:90%;height:90%" />
            </dv-border-box-8>
          </div>
        </div>
                <!-- 第三行 -->
          <div class="module_box" style="height: 30vh;">
            <!-- flex布局 一行四个 各占25% -->
            <!-- 左 -->
            <div style="flex: 0 1 75%;">
              <dv-border-box-10 style="width: 100%;height: 200px;">
                <dv-conical-column-chart v-if="!listLoading" :config="config2" style="width:90%;height:100%" />
              </dv-border-box-10>
            </div>
            <!-- 中 -->
            <!-- <div style="flex: 0 1 25%;">
              <dv-border-box-13 style="width: 100%;height: 200px;">
                <dv-active-ring-chart :config="config8" style="width:100%;height:100%" />
              </dv-border-box-13>
            </div> -->
            <!-- 右 -->
             <div style="flex: 0 1 25%;">
              <dv-border-box-13 style="width: 100%;height: 200px;">
                <dv-percent-pond v-if="!listLoading" :config="config3" style="width:200px;height:100px;"/>
              </dv-border-box-13>
            </div>
          </div>
      </dv-full-screen-container>
    </div>
  </template>
  
  <script>
  import api from '@/api/datav';
  
  export default {
    name: 'HomeView',
    data() {
      return {
        listLoading: true,
        config2: {
          data: [
          ]
        },
        config3: {
          value: 80,
          borderWidth: 5,
          borderRadius: 10,
          borderGap: 5,
          backgroundColor: '#0f0', // 添加背景颜色
          borderColor: '#00f', // 添加边框颜色
          fontColor: '#fff', // 添加字体颜色
          fontSize: 30 // 添加字体大小
  },
        config4: {
          radius: '65%',
          activeRadius: '70%',
          data: [
          ],
          digitalFlopStyle: {
      fontSize: 30,
      lineWidth: 30,
      showOriginValue: true
    }
        }  // 确保 config4 被正确初始化，即使它现在可能是空的或未被使用
      };
    },
    created() {
      this.fetchData();
    },
    methods: {
      fetchData() {
        this.listLoading = true;
        api.findAllInfoOrder().then(response => {
          if (response && response.data && response.code === 200) {
            console.log(response.data); // 打印数据
            this.config2.data = this.formatData(response.data);
            this.config4.data = this.formatData(response.data);
            this.listLoading = false;
          } else {
            console.error('Failed to fetch data:', response.data ? response.message : 'No response data');
            this.listLoading = false;
          }
        }).catch(error => {
          console.error('Error during data fetch:', error);
          this.listLoading = false;
        });
      },
      formatData(rawData) {
        if (Array.isArray(rawData)) {
          // 如果原始数据已经是数组，则直接返回
          return rawData;
        } else {
          // 否则，格式化数据
          return Object.entries(rawData).map(([name, value]) => ({
            name,
            value
          }));
        }
      }
    }
  }
  </script>
  
  <style>
  .container {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
  }
  
  #dv-full-screen-container {
    height: 100vh !important;
  }
  
  * {
    margin: 0;
    padding: 0;
  }
  
  /* 主体 */
  .content {
    color: #fff;
    background: #000;
    width: 100vw;
    height: 100vh;
  }
  
  .bg {
    background: url(../../assets/images/bg.jpg) center center;
    background-size: cover;
  }
  
  .module_box {
    display: flex;
    justify-content: space-between;
    margin: 5px;
  }
  
  .border-box-content {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </style>

在这里插入图片描述
这个是一个全屏的可视化界面，我设置的都是width: 100vw、height: 100vh;但是vue-admin-template他自己带了原有的侧边栏和头部，写好后会导致有部分被遮挡，所以我们如果需要在大屏幕上展示的话，有两种方案：1、需要重新打开一个界面来进行展示；2、对界面进行调整，使其适应界面主主体主体的大小。我们依次介绍：
第一种方法：打开一个界面来进行展示：
由于vue-admin-template的侧边栏是通过路由直接控制注入的，因此可以通过在路由中添加一个属性来决定是否在新窗口中打开页面。可以在路由配置中添加 target 属性，并在 SidebarItem 组件中根据这个属性来决定是否在新窗口中打开链接。
在路由中vue-admin-template-master\src\router\index.js添加target属性

  {
    path: '/visualization',
    name: 'Visualization',
    component: () => import('@/views/visualization/index'),
    meta: { title: '可视化-全屏', icon: 'dashboard', target: '_blank' }
  },

修改 SidebarItem 组件：
在 SidebarItem 组件中，根据 target 属性决定链接的打开方式：

<template>
  <div v-if="!item.hidden">
    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
      <Link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)" :target="onlyOneChild.meta.target">
        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown': !isNest}">
          <Item :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title" />
        </el-menu-item>
      </Link>
    </template>
    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
      <template slot="title">
        <Item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
      </template>
      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :is-nest="true"
        :item="child"
        :base-path="resolvePath(child.path)"
        class="nest-menu"
      />
    </el-submenu>
  </div>
</template>

<script>
import path from 'path'
import { isExternal } from '@/utils/validate'
import Item from './Item'
import Link from './Link'
import FixiOSBug from './FixiOSBug'

export default {
  name: 'SidebarItem',
  components: { Item, Link },
  mixins: [FixiOSBug],
  props: {
    item: {
      type: Object,
      required: true
    },
    isNest: {
      type: Boolean,
      default: false
    },
    basePath: {
      type: String,
      default: ''
    }
  },
  data() {
    this.onlyOneChild = null
    return {}
  },
  methods: {
    hasOneShowingChild(children = [], parent) {
      const showingChildren = children.filter(item => {
        if (item.hidden) {
          return false
        } else {
          this.onlyOneChild = item
          return true
        }
      })

      if (showingChildren.length === 1) {
        return true
      }

      if (showingChildren.length === 0) {
        this.onlyOneChild = { ...parent, path: '', noShowingChildren: true }
        return true
      }

      return false
    },
    resolvePath(routePath) {
      if (isExternal(routePath)) {
        return routePath
      }
      if (isExternal(this.basePath)) {
        return this.basePath
      }
      return path.resolve(this.basePath, routePath)
    }
  }
}
</script>

修改 Link.vue 组件
在 Link.vue 组件中，根据 to 属性的值决定是否在新窗口中打开链接。

<template>
  <component :is="type" v-bind="linkProps(to)">
    <slot />
  </component>
</template>

<script>
import { isExternal } from '@/utils/validate'

export default {
  props: {
    to: {
      type: String,
      required: true
    },
    target: {
      type: String,
      default: '_self'
    }
  },
  computed: {
    isExternal() {
      return isExternal(this.to)
    },
    type() {
      if (this.isExternal) {
        return 'a'
      }
      return 'router-link'
    }
  },
  methods: {
    linkProps(to) {
      if (this.isExternal) {
        return {
          href: to,
          target: this.target,
          rel: 'noopener'
        }
      }
      return {
        to: to,
        target: this.target
      }
    }
  }
}
</script>

第二种方法：对界面进行调整，使其适应vue-admin-template框架界面主体的大小。
这个直接上代码就行，修改点样式即可

<template>
    <div class="app-container">
      <div class="content bg">
        <!-- 第一行 -->
        <div class="module_box" style="height: 10%;">
          <div style="flex: 0 1 30%;">
            <dv-decoration-10 style="width:100%;height:50px;" />
          </div>
          <div style="flex: 0 1 40%;">
            <div style="display: flex;width: 100%;">
              <dv-decoration-8 style="width:300px;height:50px;flex:1;transform: rotateY(180deg);" />
              <dv-decoration-11 style="width:200px;height:60px;flex:1">肉鸡表型数据中心</dv-decoration-11>
              <dv-decoration-8 style="width:300px;height:50px;flex:1" />
            </div>
          </div>
          <div style="flex: 0 1 30%;">
            <dv-decoration-10 style="width: 100%;height:50px;transform: rotateY(180deg);" />
          </div>
        </div>
        <!-- 第二行 -->
        <div class="module_box" style="height:60%;">
                    <!-- flex布局 一行四个 各占25% -->
            <!-- 左 -->
          <div style="flex: 0 1 25%;">
              <dv-border-box-1 style="width: 100%;height: 100%;">
                <dv-capsule-chart v-if="!listLoading" :config="config2" style="width:90%;height:86%" />
              </dv-border-box-1>
              <!-- <dv-border-box-2 style="width: 100%;height: 40%;">
                <dv-conical-column-chart :config="config5" style="width:90%;height:90%;" />
              </dv-border-box-2> -->
            </div>
          <!-- 中 -->
          <div style="flex: 0 1 50%;">
            <dv-border-box-12 style="width: 100%;height: 100%">
              <dv-active-ring-chart v-if="!listLoading" :config="config4" style="width:95%;height:95%" />
            </dv-border-box-12>
          </div>
          <!-- 右 -->
          <div style="flex: 0 1 25%;">
            <dv-border-box-8 style="width: 100%;height: 100%">
              <dv-scroll-ranking-board v-if="!listLoading" :config="config2" style="width:90%;height:90%" />
            </dv-border-box-8>
          </div>
        </div>
                <!-- 第三行 -->
          <div class="module_box" style="height: 30%;">
            <!-- flex布局 一行四个 各占25% -->
            <!-- 左 -->
            <div style="flex: 0 1 75%;">
              <dv-border-box-10 style="width: 100%;height: 200px;">
                <dv-conical-column-chart v-if="!listLoading" :config="config2" style="width:90%;height:100%" />
              </dv-border-box-10>
            </div>
            <!-- 中 -->
            <!-- <div style="flex: 0 1 25%;">
              <dv-border-box-13 style="width: 100%;height: 200px;">
                <dv-active-ring-chart :config="config8" style="width:100%;height:100%" />
              </dv-border-box-13>
            </div> -->
            <!-- 右 -->
             <div style="flex: 0 1 25%;">
              <dv-border-box-13 style="width: 100%;height: 200px;">
                <dv-percent-pond v-if="!listLoading" :config="config3" style="width:200px;height:100px;"/>
              </dv-border-box-13>
            </div>
          </div>
      </div>
    </div>
  </template>
  
  <script>
  import api from '@/api/datav';
  
  export default {
    name: 'HomeView',
    data() {
      return {
        listLoading: true,
        config2: {
          data: [
          ]
        },
        config3: {
          value: 80,
          borderWidth: 5,
          borderRadius: 10,
          borderGap: 5,
          backgroundColor: '#0f0', // 添加背景颜色
          borderColor: '#00f', // 添加边框颜色
          fontColor: '#fff', // 添加字体颜色
          fontSize: 30 // 添加字体大小
  },
        config4: {
          radius: '65%',
          activeRadius: '70%',
          data: [
          ],
          digitalFlopStyle: {
      fontSize: 30,
      lineWidth: 30,
      showOriginValue: true
    }
        }  // 确保 config4 被正确初始化，即使它现在可能是空的或未被使用
      };
    },
    created() {
      this.fetchData();
    },
    methods: {
      fetchData() {
        this.listLoading = true;
        api.findAllInfoOrder().then(response => {
          if (response && response.data && response.code === 200) {
            console.log(response.data); // 打印数据
            this.config2.data = this.formatData(response.data);
            this.config4.data = this.formatData(response.data);
            this.listLoading = false;
          } else {
            console.error('Failed to fetch data:', response.data ? response.message : 'No response data');
            this.listLoading = false;
          }
        }).catch(error => {
          console.error('Error during data fetch:', error);
          this.listLoading = false;
        });
      },
      formatData(rawData) {
        if (Array.isArray(rawData)) {
          // 如果原始数据已经是数组，则直接返回
          return rawData;
        } else {
          // 否则，格式化数据
          return Object.entries(rawData).map(([name, value]) => ({
            name,
            value
          }));
        }
      }
    }
  }
  </script>
  
  <style>
  .container {
    width: 100%;
    height: calc(100vh - 84px);
    box-sizing: border-box;
  }
  
  #dv-full-screen-container {
    height: 100vh !important;
  }
  
  * {
    margin: 0;
    padding: 0;
  }
  
  /* 主体 */
  .content {
    color: #fff;
    background: #000;
    width: 100%;
    height: calc(100vh - 84px);
  }
  
  .bg {
    background: url(../../assets/images/bg.jpg) center center;
    background-size: cover;
  }
  
  .module_box {
    display: flex;
    justify-content: space-between;
    margin: 5px;
  }
  
  .border-box-content {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </style>

效果：
在这里插入图片描述

目睹整个事件的易先生
关注
专栏目录
Vue大屏可视化
m0_67394360的博客
05-15 1万+
文章目录 前言 一、什么是可视化 二、参考资料 1、站酷 2、DataV组件库 3、DataV组件库示例Demo 三、项目实战 总结 前言 自己也使用Vue挺长时间了，之前一直做可视化相关的领域，但也不全是，考虑到如果有一些可视化模板示例可能会更好一些，所以就做了一些可视化相关的内容，从搭建框架，查找资料，到有了现在的一个模板基本结构。 一、什么是可视化 其实文字不用过多的描述，其实网上有很多示例，比如百度的可视化，有很多参考的示例，通过大屏的方式能够直观体现数据及其变化趋势。 二、参考
使用开源Datav——结合vue实现大屏数据展示案例
热门推荐
micrice的博客
10-28 1万+
Datav简介： 组件库基于Vue ，主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用。 文档链接：Datav-Vue 大屏数据展示组件库 效果展示： 详细步骤： 搭建vue-cli脚手架 这里我直接基于vue-admin-template模板开发，vue-admin-template下载地址:vue-admin-template 你也可以手动创建，具体步骤如下： 使用npm安装vue npm i -g @vue/cli 创建Vue项目 vue create d
基于vue可视化拖拽编辑，页面生成工具
05-21
基于vue可视化拖拽编辑，页面生成工具。提升前端开发效率，可集成至移动端项目作为通过定义 JSON 直接生成 UI 界面。
VUE项目基于源码实现可视化编程技术的探索
最新发布
bilibili_TC的博客
10-15 595
在面对大型且高度组件化的项目时，传统的开发模式——即边预览边手动修改代码，往往会因项目结构的复杂性而显得效率低下。为了解决这一问题，提升开发效率与团队协作的流畅度，我们构想了一种更为智能和直观的开发辅助方案。
基于vue的可视化大屏
weixin_66547608的博客
07-09 2436
总体来说，这段代码是一个 Vue 组件的模板、脚本和样式的组合，主要用于展示一个热图组件和一个柱状图组件，并对其进行了相应的配置和布局设置。中心map，2D地图。
用vue写的可视化大屏
03-22
用vue、echarts写的可视化大屏，下载之后，运行npm install，加载完之后npm run dev就可以了
Vue.js 搭建大屏可视化项目
qq_42072014的博客
07-23 1708
通过上述步骤，你已经掌握了使用Vue.js构建大屏可视化项目的全过程。从项目初始化到组件化设计，再到数据绑定和性能优化，每一个环节都是构建高质量大屏应用的关键。记住，实践是最好的老师，不断迭代和优化你的项目，你将能够打造出既美观又实用的大屏可视化解决方案。vue项目源码合集下载地址。
vue3大屏可视化项目，包含地图，各种 图表，全屏适配方案
weixin_63625059的博客
08-04 3143
.始终满屏适配，这种方案一般用在屏幕变化不会特别的大项目，项目基本上不会用在比例非常不协调的大屏，设计图按1920*1080标准电脑屏幕比，所用的屏幕也基本在这个比例左右 涉及图表知识点简单，主要有自定义色系，环形图，堆叠柱状图，折线图 使用高德地图标点做中间地图
Vue3/ECharts5数据可视化大屏展示项目案例源码.zip
05-22
Vue3/ECharts5数据可视化（大屏展示）项目案例源码，一个基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化（大屏展示）项目。此项目使用'.vue' 和 '.tsx' 文件实现界面，采用新版动态屏幕适配方案，全局...
基于 vue3、vite、Echart 框架的大数据可视化（大屏展示）模板
10-28
在大数据可视化项目中，Vue3可以用来构建可复用的图表组件，方便数据绑定和响应式更新。 其次，Vite是由Vue作者尤雨溪发起的新型前端构建工具。与传统的Webpack相比，Vite利用了ES模块的原生特性，实现了热模块替换...
vue3-admin-template页面
qq_70703397的博客
05-06 1969
3.如果标签在中间，则需要考虑标签高亮向左还是向右，本页面是向右一个标签显示高亮，即删除当前标签后，由于标签长度会减一，而传入进来的标签下标就是右边一个标签，通俗说1是下标，让删除1的标签后原本下标为2的标签瞬间变为1，直接跳转到下一个页面标签即可。1.由于标签渲染有下标参与，因此在进行删除时传入当前标签的下标，如果与标签list的长度一样则是最右边删除，只需要删除当前标签和前一个标签显示为高亮。面包屑即点开侧边菜单栏后会显示出标签，如下图所示。ehcart代码封装（部分代码)
大屏可视化 echarts vue demo 移动能效管理平台
11-30
大屏可视化 echarts vue demo 移动能效管理平台响应式管理平台，后台，界面美观，绚丽
vue3+ElementPlus后台管理搭建（二）
citadel1的博客
01-16 1404
阿里icon 及侧边收缩 1.阿里图标添加 选择合适的阿里图标到我的项目 选择到项目后，点击font class 将下面的代码复制到public的index.html中，这里新添加图标后，这行css可能会变更，记得同步到项目中 选择合适的icon，复制代码即可使用 在项目中使用也很简单,如下即可 <i class='iconfont icon-sucaiku'></i> 例如我们在前面一节看到的 在路由管理里面的meta里面填的icon实际上就是这里的几个图标，具体渲染也见前
使用 Vue.js 构建大屏可视化系统
qq_42072014的博客
08-04 1424
通过上述步骤，你已经具备了构建一个完整的 Vue.js 大屏可视化系统的知识。根据具体需求，你还可以添加更多高级功能，如动态加载图表数据、实时数据流等。
Vue + ECharts大屏可视化
自洽而内求
03-12 7828
大屏可视化构建工具：【阿里云的DataV】、【蚂蚁体验技术部 AntV 数据可视化】、【D3】、【G2】、【Vega】、【Vega-lite】以及常用于项目的【ECharts】
vue开发——可视化大屏
weixin_70056219的博客
05-30 6452
利用vue做前端大屏时的总结及一些解决方法
vue可视化拖拽生成工具_vdesjs: 基于vue的可视化拖拽，代码生成工具。提升前端开发效率，或者集成至项目作为在线拖拽工具。（持续迭代升级中）...
weixin_39622399的博客
12-20 2032
vdesjs 介绍 vdesjs是一款基于vue技术栈，可视化拖拽，代码生成工具。我们提供详细的文档来帮助您理解我们工具的实现原理，并且您可以方便的基于vdesjs来扩展您自己的代码生成组件。技术选型 技术描述基于 Sortable.js 的 Vue 拖放组件vuex状态管理工具(简单理解就是维护vue的公共变量，供全局使用)将文本复制到剪贴板的插件基于Vue.js 2.0 的桌面端UI框架...
Vue.js 搭建大屏可视化系统 - 最全指南
qq_42072014的博客
08-11 2084
通过本文，你已经掌握了如何使用 Vue.js 和相关技术栈构建一个基本的大屏可视化系统。当然，实际项目中可能还会遇到更多复杂的需求和技术挑战，但本文提供的基础架构足以作为一个良好的起点。
Vue3 + TS + Vite 项目实战 —— 大屏可视化
技术前端，忠于热爱 @0.活在风浪里
06-12 5934
大屏可视化项目实战
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值