前言

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

//  , All Rights Reserved.
import Vue from 'vue'
import Router from 'vue-router'
import {
  routerMode
} from '../config/env'
Vue.use(Router)
const Home = r => require.ensure([], () => r(require('@/pages/home/home')))
const Overview = r => require.ensure([], () => r(require('@/pages/overview/overview')))
const Business = r => require.ensure([], () => r(require('@/pages/business/business')))
const Logistics = r => require.ensure([], () => r(require('@/pages/logistics/logistics')))
const End = r => require.ensure([], () => r(require('@/pages/end/end')))
const People = r => require.ensure([], () => r(require('@/pages/people/people')))
const Environmental = r => require.ensure([], () => r(require('@/pages/environmental/environmental')))
const EHS = r => require.ensure([], () => r(require('@/pages/EHS/EHS')))
const Technology = r => require.ensure([], () => r(require('@/pages/technology/technology')))

export default new Router({
  mode: routerMode,
  routes: [{
      path: '/',
      redirect: '/home'
    },
    { // 首页
      path: '/home',
      name: 'Home',
      component: Home
    },
    { // 厂区一览
      path: '/overview',
      name: 'Overview',
      component: Overview
    },
    { // 业务管理
      path: '/business',
      name: 'Business',
      component: Business
    },
    { // 物流管理
      path: '/logistics',
      name: 'Logistics',
      component: Logistics
    },
    { // 处置工艺
      path: '/technology',
      name: 'Technology',
      component: Technology
    },
    { // EHS
      path: '/EHS',
      name: 'EHS',
      component: EHS
    },
    { // 人员管理
      path: '/people',
      name: 'People',
      component: People
    },
    { // 环保数据
      path: '/environmental',
      name: 'Environmental',
      component: Environmental
    },
    { // 尾页
      path: '/end',
      name: 'End',
      component: End
    }
  ]
})



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

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/router'
import echarts from 'echarts'
import 'echarts-liquidfill'
// import VueAMap from 'vue-amap'
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})



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

App.vue

<template>
  <div class="pageHtml">
    <head-top>head-top>
    <transition name="router-fade" mode="out-in">
      <router-view>router-view>
    transition>
  div>
template>
<script>
import headTop from '@/components/header/header'
export default {
  components: {
    headTop
  }
}
script>

<style lang="scss">
@import "./assets/style/common.scss";
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

---

五、更多干货

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

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

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