前言

🚀 基于 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 Index from '@/components/index/Index';

Vue.use(Router);
// Copyright ©  
export default new Router({
  routes: [{
    path: '/index',
    name: 'index',
    component: Index
  },
  {
    path: '*',
    redirect: '/index'
  }]
});



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store/';
import {
  Container,
  Row,
  Col,
  Header,
  Progress,
  Aside,
  Main,
  menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Message,
  Tooltip,
  MessageBox,
  Footer,
  Tabs,
  TabPane,
  Button,
  Input,
  Select,
  Option,
  Form,
  FormItem,
  Dialog,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Radio,
  DatePicker,
  Table,
  TableColumn,
  Pagination,
  Loading,
  Card,
  Notification
} from 'element-ui';
import BaiduMap from 'vue-baidu-map';
import './assets/common/css/common.css';
import './assets/common/css/animate.css';
import vuescroll from 'vuescroll';
import ApiPath from '@/api';
import * as filters from '@/assets/common/js/filter';
import Request from '@/http';
import common from '@/assets/common/js/common.js';
import Bus from './bus.js';
// eslint-disable-next-line
import focus from '@/assets/common/js/directives';

process.env.MOCK && require('@/mock');
// Copyright © , All Rights Reserved
Vue.use(BaiduMap, {
  ak: 'zwVpEq7Soe6T65PiCynLj5qeGfnSFcjU'
});
Vue.use(vuescroll);
Vue.use(Container);
Vue.use(Row);
Vue.use(Col);
Vue.use(Header);
Vue.use(Progress);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Button);
Vue.use(Input);
Vue.use(Select);
Vue.use(Option);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(DatePicker);
Vue.use(Dialog);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Radio);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Pagination);
Vue.use(Tooltip);
Vue.use(Loading);
Vue.use(Card);

Vue.config.productionTip = false;

Vue.prototype.$request = Request;
Vue.prototype.$api = ApiPath;
Vue.prototype.$message = Message;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$notify = Notification;
Vue.prototype.$common = common;

window.Event = Bus;

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key]);
});
// Copyright © , All Rights Reserved
/* eslint-disable no-new */
/* eslint-disable no-unused-vars */
window.vm = new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: ''
});



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

App.vue

<template>
  <div id="Container">
    <transition mode="out-in" enter-active-class="animated zoomIn">
      <keep-alive>
        <router-view />
      keep-alive>
    transition>
  div>
template>

<script>
export default {
  name: 'App'
};
script>

<style scoped>
#Container {
  width: 100%;
  height: 100%;
  background: #efefef;
}
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

---

五、更多干货

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

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

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