前言

🚀 基于 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

---

三、作品演示

---

四、代码实现

core.vue

<template>
  <div class='core'>
    <left-side />
    <Main />
    <right-side />
  div>
template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import Main from './Main'
import LeftSide from './LeftSide'
import RightSide from './RightSide'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    Main,
    LeftSide,
    RightSide
  },
  data () {
    // 这里存放数据
    return {

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.core {
  display: flex;
  flex-shrink: 0;
  margin: 0 1.6vw;
}
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

main.js

//    .
import Vue from 'vue'
import App from './App.vue'
import dataV from '@jiaminghi/data-view'
import 'view-design/dist/styles/iview.css'
import './assets/common.scss' // 公共样式
import './assets/img/icon/iconfont.css' // icon
import echarts from 'echarts'
import { Button, Table, Alert, Col, Row, Icon, CheckboxGroup, Checkbox, Spin, Message } from 'view-design'
import store from './store'
import axios from 'axios'
axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '//localhost:8090/' : '/'
// axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '//ev.sz-rcdxny1.com/' : '/'

// 全局引入
Vue.prototype.$echarts = echarts
Vue.prototype.$Message = Message
Vue.prototype.$axios = axios
Vue.component('Button', Button)
Vue.component('Table', Table)
Vue.component('Alert', Alert)
Vue.component('Row', Row)
Vue.component('i-col', Col)
Vue.component('Icon', Icon)
Vue.component('CheckboxGroup', CheckboxGroup)
Vue.component('Checkbox', Checkbox)
Vue.component('Spin', Spin)
Vue.use(dataV)

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$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
28
29
30
31
32
33
34
35
36
37
38

App.vue

<template>
  <div id="app">
    <Index />
  div>
template>

<script>
import Index from './view/index.vue'

export default {
  name: 'app',
  components: {
    Index
  }
}
script>

<style lang="scss">
#app {
  font-family: "Microsoft YaHei", "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  height: 100%;
}
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

---

五、更多干货

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

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

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