前言

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

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

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】

❤ 【1000套 毕设项目精品实战案例】

❤ 【 20套 VUE+Echarts 大数据可视化源码】

❤ 【150套 HTML+ Echarts大数据可视化源码 】

文章目录

前言一、Echart是什么二、ECharts入门教程三、作品演示四、代码实现router.jsmain.jsApp.vue五、更多干货

一、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'// 版权所有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 ReservedVue.config.productionTip = false;//轮播图import VueAwesomeSwiper from 'vue-awesome-swiper';import 'swiper/dist/css/swiper.css';Vue.use(VueAwesomeSwiper);//ElementUiimport ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);//文字滚动import scroll from 'vue-seamless-scroll';Vue.use(scroll);//引入Echartsimport 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>

五、更多干货

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

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

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