基于VUE + Echarts 实现可视化数据大屏旅游大数据

原创

html网页设计 2022-10-23 10:14:03 ©著作权

文章标签 echarts 大屏可视化大数据 vue web前端 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者html网页设计的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

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

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

router.js
main.js
App.vue

五、更多干货

一、Echart是什么

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

二、ECharts入门教程

5 分钟上手ECharts

三、作品演示

基于VUE + Echarts 实现可视化数据大屏旅游大数据_web前端

四、代码实现

router.js

import Vue from 'vue'
import Router from 'vue-router'
//   版权所有
Vue.use(Router);
import FuzhouGuiAn from "../pages/FuzhouGuiAn/FuzhouGuiAn.vue";
import FuzhouChangLe from "../pages/FuzhouChangLe/FuzhouChangLe.vue";
import Fly from "../pages/Fly/Fly1.vue";
import Fly2 from "../pages/Fly/Fly2.vue";
import FuzhouServer from "../pages/FuzhouServer/FuzhouServer.vue";
import ThreeLanes from "../pages/ThreeLanes/ThreeLanes.vue";
import GuLou from "../pages/GuLou/GuLou.vue";
import JianGuan from "../pages/JianGuan/JianGuan.vue";
/*两张路牌*/
import GuShan from "../pages/GuideBoard/GuShan.vue";

/*餐饮*/
import Food  from "../pages/Food/Food.vue";

/*酒店*/
import Hotel  from "../pages/Hotel/Hotel.vue";



export default new Router({
  routes: [
    {
      path: '/',
      redirect: "/fly"
    },
    {
      path: '/an',
      name: 'FuzhouGuiAn',
      component: FuzhouGuiAn
    },
    {
      path: '/le',
      name: 'FuzhouChangLe',
      component: FuzhouChangLe
    },

    {
      path: '/fly',
      name: 'Fly',
      component: Fly
    },
    {
      path: '/fly2',
      name: 'Fly2',
      component: Fly2
    },
    {
      path: '/server',
      name: 'FuzhouServer',
      component: FuzhouServer
    },
    {
      path: '/three',
      name: 'ThreeLanes',
      component: ThreeLanes
    },
    {
      path: '/gu',
      name: 'GuLou',
      component: GuLou
    },
    {
      path: '/jian',
      name: 'JianGuan',
      component: JianGuan
    },
    {
      path: '/guide1',
      name: 'GuShan',
      component: GuShan
    },
    {
      path: '/food',
      name: 'Food',
      component: Food
    },
    {
      path: '/hotel',
      name: 'Hotel',
      component: Hotel
    },

  ]
})

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'
// Copyright © , All Rights Reserved
Vue.config.productionTip = false;

//轮播图
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
Vue.use(VueAwesomeSwiper);

//ElementUi
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

//文字滚动
import scroll from 'vue-seamless-scroll';
Vue.use(scroll);

//引入Echarts
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

App.vue

<template>
  <div id="app">
    <div class="nav-header">
      <div class="nav-header-left">
        <Time></Time>
      </div>
      <div class="nav-header-center">
        <h1>福州市旅游大数据管理指挥系统</h1>
        <ul class="nav-header-center-nav">
            <li>
             <div @click = "isShow(0)"> 信息中心</div>
              <ul class="child-nav" v-show="one">
                <router-link to="/server" tag="li">服务大屏</router-link>
                <router-link to="/jian" tag="li">监管大屏</router-link>
              </ul>
            </li>
            <li>
              <div @click = "isShow(1)">
                <i>倩</i>
                景区
                <i>倩</i>
              </div>
              <ul class="child-nav" v-show="two">
                <router-link to="/three" tag="li">三坊七巷</router-link>
                <router-link to="/gu" tag="li">鼓山景区</router-link>
                <router-link to="/an" tag="li">贵安欢乐</router-link>
                <router-link to="/le" tag="li">机场小屏</router-link>
              </ul>
            </li>
            <li>
             <div  @click = "isShow(2)">
               <i>倩</i>
               交通
               <i>倩</i>
             </div>
              <ul class="child-nav" v-show="three">
                <router-link to="/fly" tag="li">机场一</router-link>
                <router-link to="/fly2" tag="li">机场二</router-link>
                <router-link to="/guide1" tag="li">鼓山路牌</router-link>
              </ul>
            </li>
            <li>
             <div  @click = "isShow(3)">
               <i>倩</i>
               宾馆
               <i>倩</i>
             </div>
              <ul class="child-nav" v-show="four">
                <router-link to="/hotel" tag="li">宾馆一</router-link>
              </ul>
            </li>
            <li>
              <div  @click = "isShow(4)">
                <i>倩</i>
                餐饮
                <i>倩</i>
              </div>
              <ul class="child-nav" v-show="five">
                <router-link to="/food" tag="li">醉得意</router-link>
              </ul>
            </li>
        </ul>
      </div>
      <div class="nav-header-right">
        <Air></Air>
      </div>
    </div>
    <div class="my-view">
      <router-view/>
    </div>
  </div>
</template>

<script>import Time from "./components/Base/Time/Time.vue";
  import Air from "./components/Base/Air/Air.vue";
export default {
  name: 'App',
  data() {
    return {
        one: false,
        two: false,
        three: false,
        four: false,
        five: false
    }
  },
  methods: {
      isShow(index) {
        const isShow = ['one', 'two', 'three', 'four', 'five'];
        index = parseInt(index);
        for(let i = 0; i < isShow.length; i++) {
          if(i===index) {
            this[isShow[index]] = !this[isShow[index]];
          } else {
            this[isShow[i]] = false;
          }
        }
      }
  },
  components: {
    Time,
    Air
  }
}</script>

<style lang="less">/*切换动画,不同路由页面切换动画,可取消*/
  .fadeIn-enter{
    opacity: 0;
  }
  .fadeIn-enter-active{
    transition: all .5s linear;
  }
  .fadeIn-leave-active{
    transition: all .4s linear;
    opacity: 0;
  }
  /*修改轮播图分页点的样式,电梯小屏样式*/
  .swiper-pagination span.swiper-pagination-bullet {
    width: 150px;
    height: 15px;
    background: #fff;
    border-radius: 0;
  }
  /*激活时*/
  .swiper-pagination span.swiper-pagination-bullet-active {
    background: #42d3eb;
  }

  /*隐藏百度地图版权信息*/
  .anchorBL.BMap_noprint,.anchorBL {
    display:none
  }
  /*刚开始为了方便才写了这个
  ,不推荐使用,下次用初始化css文件代替*/
  *{
    margin: 0;
    padding: 0;
  }
  html, body {
    width: 100%;
    height: 100%;
  }
  #app {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .nav-header {
    height: 12%;
    background: url("../static/images/NavHeader/nav_header.jpg") no-repeat;
    background-size: 100% 100%;
    border-bottom: 1px solid #16A2BF;
    display: flex;
  }
  .nav-header-left, .nav-header-center, .nav-header-right {
    flex: 1;
    height: 100%;
  }

  @media screen and (max-width: 1280px) {
    .nav-header-left {
      display: flex;
      align-items: center;
      margin-top: 1.4%;
    }
    .nav-header-center {
      h1 {
        color: #fff;
        font-size: 20px;
        text-align: center;
        padding-top: 3px;
      }
      .nav-header-center-nav {
        display: flex;
        padding-top: 4px;
        justify-content: space-around;
        li {
          list-style: none;
          font-size: 13px;
          color: #fff;
          background: url("../static/images/NavHeader/nav_bg.jpg") no-repeat;
          background-size: 100% 100%;
          position: relative;
          i {
            font-size: 13px;
            color: transparent;
          }
          ul.child-nav {
            position: absolute;
            width: 100%;
            top: 20px;
            z-index: 9999;
            li {
              /* background: #000;*/
              line-height: 25px;
              text-align: center;
            }
          }
        }
      }
    }
    .nav-header-right {
      display: flex;
      align-items: center;
      /* margin-top: 1.4%;*/
      position: relative;
    }
  }
  @media screen and (min-width: 1281px) and (max-width: 1600px) {
    .nav-header-left {
      display: flex;
      align-items: center;
      margin-top: 1.4%;
    }
    .nav-header-center {
      h1 {
        color: #fff;
        font-size: 20px;
        text-align: center;
        padding-top: 3px;
      }
      .nav-header-center-nav {
        display: flex;
        padding-top: 2%;
        justify-content: space-around;
        li {
          list-style: none;
          font-size: 14px;
          color: #fff;
          background: url("../static/images/NavHeader/nav_bg.jpg") no-repeat;
          background-size: 100% 100%;
          position: relative;
          i {
            font-size: 14px;
            color: transparent;
          }
          ul.child-nav {
            position: absolute;
            width: 100%;
            top: 20px;
            z-index: 9999;
            li {
              /* background: #000;*/
              line-height: 25px;
              text-align: center;
            }
          }
        }
      }
    }
    .nav-header-right {
      display: flex;
      align-items: center;
      /* margin-top: 1.4%;*/
      position: relative;
    }
  }
  @media screen and (min-width: 1601px) {
    .nav-header-left {
      display: flex;
      align-items: center;
      margin-top: 1.4%;
    }
    .nav-header-center {
      h1 {
        color: #fff;
        font-size: 26px;
        text-align: center;
        padding-top: 3px;
      }
      .nav-header-center-nav {
        display: flex;
        padding-top: 2%;
        justify-content: space-around;
        li {
          list-style: none;
          font-size: 17px;
          color: #fff;
          background: url("../static/images/NavHeader/nav_bg.jpg") no-repeat;
          background-size: 100% 100%;
          position: relative;
          i {
            font-size: 17px;
            color: transparent;
          }
          ul.child-nav {
            position: absolute;
            width: 100%;
            top: 20px;
            z-index: 9999;
            li {
              /* background: #000;*/
              line-height: 25px;
              text-align: center;
            }
          }
        }
      }
    }
    .nav-header-right {
      display: flex;
      align-items: center;
      /* margin-top: 1.4%;*/
      position: relative;
    }
  }



  .my-view  {
    height: 88%;
  }

  /*双伪元素庆祝浮动,可用flex布局代替浮动*/
  .clearfix:before, .clearfix:after {
    content: '';
    display: table;
  }
  .clearfix:after {
    clear: both;
  }
  .clearfix {
    zoom: 1;
  }

  /*显示省略号*/
  .ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }</style>