基于VUE + Echarts 实现可视化数据大屏旅游大数据
发布时间
阅读量：
阅读量
前言
以简洁高效的方式
本项目采用的是ECharts图表库，并支持多种数据可视化功能。具体而言，它包含基础图表如折线图、柱状图、散点图、饼图和K线图；此外还支持统计分析所需的盒形图；地理数据可视化的地图、热力图和线图；关系数据可视化的树形图、treemap和旭日图；多维数据可视化的平行坐标图；以及用于商业智能（BI）的漏斗图和仪表盘布局。这些图表类型可实现混搭使用以适应不同场景需求
文章目录
-
前言
-
一、Echart是什么
-
二、ECharts入门教程
-
三、作品演示
-
四、代码实现
-
router.js
-
main.js
-
App.vue
-
五、更多干货
一、Echart是什么
基于JavaScript开发的ECharts是一款开源的数据可视化工具。该工具在主流PC端及移动端设备上有良好的兼容性（适用于IE8至IE11、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>全部评论 (0)
还没有任何评论哟~