前言
🚀 基于 vue、datav、Echart 框架的大数据可视化(大屏展示)源码，基于VUE+Echarts 制作，实现大数据可视化。通过 vue 组件实现数据动态刷新渲染，内部图表可自由替换。部分图表使用 DataV 自带组件，可自由进行更改， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
文章目录
- 前言
- 一、Echart是什么
- 二、ECharts入门教程
- 三、作品演示
- 四、代码实现
- router.js
- main.js
- App.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 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>
