前言

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

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

---

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】

❤ 【1000套 毕设项目精品实战案例】

❤ 【 20套 VUE+Echarts 大数据可视化源码】

❤ 【150套 HTML+ Echarts大数据可视化源码 】

---

一、Echart是什么

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

二、ECharts入门教程

5 分钟上手ECharts

---

三、作品演示

---

四、代码实现

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')
    }
  ]
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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,")
    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>





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

---

五、更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥