基于VUE + Echarts 实现可视化数据大屏案件数据大屏

前言

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

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

​

文章目录

---

一、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';
// import soldierMood from '@/views/soldierMood/soldierMood';

// Vue.use(Router)
//  
export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home,
      redirect() {
        return '/zhizhong'
      },
      children:[

      //   {
      //     path:'/mobileMaket',
      //     name:'mobileMaket',
      //     component: () => import('@/views/mobileMaket')
      //   },
      //   {
      //     path:'easternAirline',
      //     name:'easternAirline',
      //     component: () => import('@/views/easternAirline')
      //   },
        {
          path:'zhizhong',
          name:'zhizhong',
          component: () => import('@/views/zhizhong')
        }
      ]
    },
    // {
    //   path: '/soldierMood',
    //   name: 'soldierMood',
    //   component: soldierMood,
    //   children:[
    //     {
    //       path:'index',
    //       name:'index',
    //       component: () => import('@/views/soldierMood/index')
    //     }
    //   ]
    // }
  ]
})

main.js

// import Vue from 'vue'
// import Router from 'vue-router'
import home from '@/views/home';
// import soldierMood from '@/views/soldierMood/soldierMood';

// Vue.use(Router)
//  
export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home,
      redirect() {
        return '/zhizhong'
      },
      children:[

      //   {
      //     path:'/mobileMaket',
      //     name:'mobileMaket',
      //     component: () => import('@/views/mobileMaket')
      //   },
      //   {
      //     path:'easternAirline',
      //     name:'easternAirline',
      //     component: () => import('@/views/easternAirline')
      //   },
        {
          path:'zhizhong',
          name:'zhizhong',
          component: () => import('@/views/zhizhong')
        }
      ]
    },
    // {
    //   path: '/soldierMood',
    //   name: 'soldierMood',
    //   component: soldierMood,
    //   children:[
    //     {
    //       path:'index',
    //       name:'index',
    //       component: () => import('@/views/soldierMood/index')
    //     }
    //   ]
    // }
  ]
})

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
<!--  -->
<script>export default {
  name: 'App'
}</script>

<style>/* */
#app {
  height:100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}</style>

home.vue

<template>
    <div class="single-page">
        <router-view></router-view>
    </div>
</template>

<script>//  
export default {
    data() {
        return {
            key: 1
        }
    },
    methods: {
        name() {

        }
    },
    mounted() {
    },

}</script>

<style lang="less" scoped>.single-page {
    height:100%;
}</style>

---