写在前面

vue-element-admin 是一个后台前端解决方案，依据vue-element-admin二次开发方法。我们可以把 vue-element-admin当做工具箱或者集成方案仓库，在 vue-admin-template 的基础上进行二次开发，想要什么功能或者组件就去 vue-element-admin 那里复制过来。

如果对vue-element-admin不了解，可以参考其源码所提供的材料，也可以参考我在 vue-admin-template 的基础上进行二次开发的过程笔记资料，详单如下：

《vue-element-admin/template+tornado(pyrestful)前后端分离框架实践（1）——自定义菜单和仪表盘》
《vue-element-admin/template+tornado(pyrestful)前后端分离框架实践（2）——登录过程与后端python服务》。
《vue-element-admin/template+tornado(pyrestful)前后端分离框架实践（3）——ECharts动态绘制图表及异步加载数据》

vue-element-admin效果。

在 vue-admin-template 的基础上进行二次开发，达到如下效果。

把vue-element-admin改造成大数据展现平台，参照网络上GitDataV，https://github.com/HongqingCao/GitDataV/tree/dev2.0，其效果图如下：

整合GitDataV的数据盒子（databox）

把src/components/databox目录，及其index.scss和index.vue文件，连同把src/components/index.js文件迁移到vue-admin-template上的src/components目录下。

迁移后的结果如下图所示：

我们可以按需改造index.scss和index.vue样式。

但是，src/components/index.js必须按需求修改，改后的代码如下：

import databox from "./databox";const components = {databox
};const install = (Vue = {}) => {if (install.installed) return;Object.keys(components).forEach(component => {Vue.component(components[component].name, components[component]);});Vue.prototype.$notice = Notification;// Vue.prototype.$message = Messageinstall.installed = true;
};
install.installed = false;
if (typeof window !== "undefined" && window.Vue) {install(window.Vue);install.installed = true;
}const Vcomp = {...components,install
};export default Vcomp;

修改src/main.js文件，注册组件。

import Vue from 'vue'import 'normalize.css/normalize.css' // A modern alternative to CSS resetsimport ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18nimport '@/styles/index.scss' // global cssimport App from './App'
import store from './store'
import router from './router'import '@/icons' // icon
import '@/permission' // permission controlimport Vcomp from './components/index' // 新增自定义标签if (process.env.NODE_ENV === 'production') {const { mockXHR } = require('../mock')mockXHR()
}// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)
Vue.use(Vcomp) // 注册自定义组件（例如databox等）Vue.config.productionTip = falsenew Vue({el: '#app',router,store,render: h => h(App)
})

组件使用，修改src/views/safety/sys1/index.vue文件，增加“<databox/>”：

<template><div class="dashboard-editor-container"><github-corner class="github-corner" /><panel-group @handleSetLineChartData="handleSetLineChartData" /><el-row :gutter="32"><el-col :xs="24" :sm="24" :lg="12"><div class="chart-wrapper"><databox :title="'雷达图'" :dheight="400"><raddar-chart /></databox></div></el-col><el-col :xs="24" :sm="24" :lg="12"><div class="chart-wrapper"><databox :title="''" :dheight="400"><line-chart :chart-data="lineChartData" /></databox></div></el-col></el-row>

整合达到初步效果

参考：

《用Vue构建一个github“可视化大数据平台”-GitDataV，设计开发分享》掘金， codercao ， 2018年8月
《Nginx+Vue.js+Tornado前后端分离架构环境实践（2）》 CSDN博客，肖永威，2020年10月
《vue-element-admin/template+tornado(pyrestful)前后端分离框架实践（3）——ECharts动态绘制图表及异步加载数据》 CSDN博客，肖永威，2020年10月
《手摸手，带你用vue撸后台系列一（基础篇）》掘金，花裤衩， 2017年5月

初步整合vue-element-admin和GitDataV两个Vue开源框架方案实现大数据可视化相关推荐

Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
vue+element+admin（初始化项目）
2022.10.17我接触到了vue+element+admin的使用,首先要安装node.jshttps://nodejs.org/zh-cn/download/.和githttps://git-s ...
vue element admin登录方式切换（密码登录或短信登录）
显示结果: 具体代码可以根据vue element admin源码进行更改,下面是页面代码 <el-form ref="loginForm" :model="log ...
vue 可视化布局工具_GitDataV一款Github的'大数据可视化平台'
简介 GitDataV基于Vue框架构建的github数据可视化平台,是一个github"大数据可视化平台",通过它你可以更直观的看到你在github里的一些数据: 个人信息(✔) ...
7月17日云栖精选夜读：深度 | 两个案例，掌握AI在大数据领域的前沿应用
近日,全球技术学习技术大会首次在京举行,阿里巴巴数据技术及产品部资深算法专家杨红霞(鸿侠)作为特邀嘉宾出席并发表主题演讲.鸿侠从什么是数据新能源说起,接着介绍了阿里目前比较成功的两款数据产品,一个是是 ...
（下）Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享（附源码）
回顾作者用心写作,请动动你可爱的小手点亮大拇指.你的鼓励是作者继续创作的动力- 前端的学习,不能仅仅依靠知识点的学习,实战项目的操作可以帮助我们整理知识点以及提高编程能力,更有助于学习和实践,最重要 ...
echarts+vue 实现大数据可视化（全屏）
大数据可视化(全屏) 实现效果 (在浏览器上按f11全屏预览) 预览地址: https://2468901709.github.io/echarts–bigdata/ 完整vue项目地址: https ...
Vue使用ECharts完成2020年全国各地区GDP总量大数据可视化面板（附源码）
就在上周全国各地区GDP总量上了热搜,一时兴起就想写个大数据面板展示既然决定要写,那么就要考虑到图表和图标的使用,这里我是用了我最熟悉的两大框架ECharts和element-ui 一.我的构思步骤 ...
Vue大数据可视化（大屏展示）方案升级，发布全新Vue3版本
千呼万唤始出来,终于将原先的 Vue2 升级到了 Vue3,并且使用了 Ts,部分界面使用了 Tsx 的写法,欢迎大家来点个星星~ 项目地址:Vue3 可视化大屏展示,点颗星星吧~ 界面展示(这个是动 ...

初步整合vue-element-admin和GitDataV两个Vue开源框架方案实现大数据可视化

写在前面

整合GitDataV的数据盒子（databox）

整合达到初步效果

初步整合vue-element-admin和GitDataV两个Vue开源框架方案实现大数据可视化相关推荐

最新文章

热门文章