elementui 大屏可视化 vue大屏可视化模板

转载

mob6454cc784c23 2024-03-29 12:15:02

文章标签 elementui 大屏可视化 echarts vue.js javascript echarts可视化数据大屏 文章分类 机器学习人工智能

前言

🚀 基于 vue、datav、Echart 框架的大数据可视化（大屏展示）源码，基于VUE+Echarts 制作，实现大数据可视化。通过 vue 组件实现数据动态刷新渲染，内部图表可自由替换。部分图表使用 DataV 自带组件，可自由进行更改，可以在此基础上重新开发。

本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

文章目录

前言
一、Echart是什么
二、ECharts入门教程
三、作品演示
四、代码实现

router.js
main.js
App.vue

五、更多干货

一、Echart是什么

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二、ECharts入门教程

5 分钟上手ECharts

三、作品演示

elementui 大屏可视化 vue大屏可视化模板_vue.js

四、代码实现

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)
// Copyright © , All Rights Reserved
export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

main.js

import Vue from 'vue'
import Dashboard from './Dashboard.vue'
// import router from './router'
// import store from './store'
// Copyright © , All Rights Reserved
import './assets/css/base.less'

/* 引入全局组件 */
import './components'

/* 引入echarts */
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

Vue.config.productionTip = false

new Vue({
  // router,
  // store,
  render: h => h(Dashboard)
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <grid-layout
      :col-num="12"
      :is-draggable="draggable"
      :is-resizable="resizable"
      :layout="layout"
      :margin="[0, 0]"
      :responsive="true"
      :row-height="rowHeight"
      :use-css-transforms="true"
      :vertical-compact="true"
    >
      <grid-item
        :h="item.h"
        :i="item.i"
        :key="item.id"
        :static="item.static"
        :w="item.w"
        :x="item.x"
        :y="item.y"
        v-for="(item) in layout"
      >
        <!-- 动态组件 -->
        <component v-bind:is="item.component"></component>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
// @ is an alias to /src
import { GridLayout, GridItem } from 'vue-grid-layout'

let mainLayout = [
  { x: 0, y: 0, w: 12, h: 1.5, i: 'top', static: false, component: 'Top' },

  { x: 0, y: 2, w: 3, h: 5, i: 'left1', static: false, component: 'Left1' },
  { x: 0, y: 7, w: 3, h: 4, i: 'left2', static: false, component: 'Left2' },
  { x: 0, y: 13, w: 3, h: 6, i: 'left3', static: false, component: 'Left3' },
  { x: 0, y: 17, w: 3, h: 8, i: 'left4', static: false, component: 'Left4' },

  { x: 3, y: 2, w: 6, h: 11.5, i: 'center1', static: false, component: 'Center1' },
  { x: 3, y: 2, w: 6, h: 11.5, i: 'center2', static: false, component: 'Center2' },

  { x: 9, y: 2, w: 3, h: 4, i: 'right1', static: false, component: 'Right1' },
  { x: 9, y: 9, w: 3, h: 19, i: 'right2', static: false, component: 'Right2' }
]

export default {
  name: 'dashboard',
  components: {
    GridLayout,
    GridItem
  },
  data () {
    return {
      layout: mainLayout,
      draggable: true,
      resizable: true,
      index: 0,
      rowHeight: 108,
      timerId: null
    }
  },
  mounted: function () {
    this.rowHeight = (window.innerHeight - 50) / 24.5;
    this.timerId = setInterval(this.updateAll, 5000);
    window.addEventListener('resize', (e) => {
      this.rowHeight = (window.innerHeight - 50) / 24.5;
    }, false);
  },
  methods: {
    updateAll: function () {

    }
  },
  beforeDestroy () {
    clearInterval(this.timerId);
  }
}
</script>
<style lang="less" scoped>
// .vue-grid-item:not(.vue-grid-placeholder) {
//   border: 1px solid #fff;
// }

.vue-grid-item.resizing {
  opacity: 0.9;
}

.vue-grid-item.static {
  background: #cce;
}

.vue-grid-item .text {
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: 100%;
}

.vue-grid-item .no-drag {
  height: 100%;
  width: 100%;
}

.vue-grid-item .minMax {
  font-size: 12px;
}

.vue-grid-item .add {
  cursor: pointer;
}

.vue-draggable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
    no-repeat;
  background-position: bottom right;
  padding: 0 8px 8px 0;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  cursor: pointer;
}
</style>