基于VUE + Echarts 实现可视化数据大屏景区管理平台

npm install echarts --save

import echarts from 'echarts' //引入echartsVue.prototype.$echarts = echarts //挂载在原型，组件内使用直接this.$echarts调用

//在组件引入基本模板let echarts = require("echarts/lib/echarts");//在组件引入柱状图组件require("echarts/lib/chart/bar");

<template>  <div class="view-content">    <div id="myChart" :style="{width: '300px', height: '300px'}"></div>  </div></template><script>export default {    name: 'Echarts',    data() {      return {      }    },    mounted() {      this.drawLine();    },    methods: {      drawLine() {        // 基于准备好的dom，初始化echarts实例        let myChart = this.$echarts.init(document.getElementById('myChart'))        // 绘制图表配置        let option = {          tooltip: {},          xAxis: {            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]          },          yAxis: {},          series: [{            name: '销量',            type: 'bar',            data: [5, 20, 36, 10, 10, 20]          }]        };        // 窗口大小自适应方案        myChart.setOption(option);        setTimeout(function() {          window.onresize = function() {            myChart.resize();          }        }, 200)      }    }  }</script><style lang="scss" scoped></style>

<template>  <div id="app">    <!--最顶部-->  <navheader></navheader>  <transition name="router" mode="out-in">      <router-view></router-view>    </transition>  </div></template><script>import navheader from './components/NavHeader';import Vue from 'vue'import GeminiScrollbar from 'vue-gemini-scrollbar'Vue.use(GeminiScrollbar)export default {  name: 'App',  components: {    'navheader': navheader  },  beforeMount:function(){         let that = this;         window.bus.$on("resize",function(){           let matrix = that.getMatrixParam();           if(!isNaN(matrix)){                            //通知body调整高度              // window.bus.$emit("adjustHeight",matrix);              setTimeout(function(){                window.bus.$emit("adjustHeight",matrix);              },50);           }      });  },  beforeCreate:function(){      let that = this;      // window.bus.$emit("adjustHeight",that.getMatrixParam());  },  mounted:function(){    window.bus.$emit("adjustHeight",this.getMatrixParam());  },  updated:function(){    window.bus.$emit("adjustHeight",this.getMatrixParam());      },  beforeUpdate:function(){  },  methods:{    resize:function(){    },    getMatrixParam:function(){        //获取第一个子节点的高度。        var el = this.$children[0];        var tHight = el.$el.clientHeight        var docHight = document.body.clientHeight;        return docHight - tHight;    }  }}</script><style>body{    margin: 0;    padding: 0;    background-color: #012352!important;  }  html{    overflow: hidden;  }  #app {    font-family: 'microsoft yahei','Avenir', Helvetica, Arial, sans-serif;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;    height: 100%;  }</style>

import Vue from 'vue'import Router from 'vue-router'import App from './App'import './assets/css/common.css'import './assets/js/jquery-1.9.1.min.js'import './assets/js/common.js'import './assets/font/icon.css'import '../static/font/style.css'//引入element-uiimport ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI);// 引入地图样式import './assets/js/index.js';import './assets/js/mapv.js';import Axios from 'axios'//配置默认的请求url// Axios.defaults.baseURL = 'http://192.168.2.4:8080/publiccms-V4.0.20180210/';Axios.defaults.baseURL = 'http://localhost:3000/static/services/';Vue.prototype.$ajax = Axios;import routerConfig from './router'Vue.use(Router);const router = new Router(routerConfig);//引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echartsvar bus = new Vue();window.bus = bus;// Copyright © 青岛研锦网络科技有限公司, All Rights Reserved.Vue.config.productionTip = falsenew Vue({  el: '#app',  router,  components: { App },  template: ''});//广播一个全局事件window.onresize = function(){  window.bus.$emit("resize");}

<template>    <div class="t-index">      <div class="t-container">        <div class="t-row-33">          <div class="t-left">            <div class="t-row-33">              <div class="t-zh-service">                <h2 class="t-tit">智慧服务</h2>                <div class="t-row-5">                  <div class="t-line-3">                    <div class="t-list-item">                      <a href="javascript: void(0)" class="link-item link-item-s bg-e6ba01">                        <i class="icon-a1"></i>                        <p>智慧服务item</p>                      </a>                    </div>                    <div class="t-list-item">                      <a href="javascript: void(0)" class="link-item link-item-s bg-689f0e">                        <i class="icon-a1"></i>                        <p>智慧服务item</p>                      </a>                    </div>                    <div class="t-list-item">                      <a href="javascript: void(0)" class="link-item link-item-m bg-03be87">                        <i class="icon-a1"></i>                        <p>智慧服务item</p>                      </a>                    </div>                  </div>                  <div class="t-line-3">                    <div class="t-list-item">                      <a href="javascript: void(0)" class="link-item link-item-m bg-ed6e07">                        <i class="icon-a1"></i>                        <p>智慧服务item</p>                      </a>                    </div>                    <div class="t-list-item">                      <a href="javascript: void(0)" class="link-item link-item-s bg-9b36e3">                        <i class="icon-a1"></i>                        <p>智慧服务item</p>                      </a>                    </div>                    <div class="t-list-item">                      <a href="javascript: void(0)" class="link-item link-item-s bg-ce045a">                        <i class="icon-a1"></i>                        <p>智慧服务item</p>                      </a>                    </div>                  </div>                  <div class="t-line-3">                    <div class="t-list-item">                      <a href="javascript: void(0)" class="link-item link-item-s bg-03be87">                        <i class="icon-a1"></i>                        <p>智慧服务item</p>                      </a>                    </div>                    <div class="t-list-item">                      <a href="javascript: void(0)" class="link-item link-item-s bg-5292f4">                        <i class="icon-a1"></i>                        <p>智慧服务item</p>                      </a>                    </div>                    <div class="t-list-item">                      <a href="javascript: void(0)" class="link-item link-item-m bg-e6ba01">                        <i class="icon-a1"></i>                        <p>智慧服务item</p>                      </a>                    </div>                  </div>                </div>              </div>              <!-- 智慧服务 end -->              <div class="t-zh-marketing">                <h2 class="t-tit">智慧营销</h2>                <div class="t-row-5">                  <div class="t-line-2">                    <div class="t-list-item">                      <a href="javascript: void(0)" class="link-item link-item-m bg-9b36e3">                        <i class="icon-a1"></i>                        <p>智慧服务item</p>                      </a>                    </div>                    <div class="t-list-item">                      <a href="javascript: void(0)" class="link-item link-item-s bg-e6ba01">                        <i class="icon-a1"></i>                        <p>智慧服务item</p>                      </a>                    </div>                    <div class="t-list-item">                      <a href="javascript: void(0)" class="link-item link-item-s bg-ce045a">                        <i class="icon-a1"></i>                        <p>智慧服务item</p>                      </a>                    </div>                  </div>                  <div class="t-line-2">                    <div class="t-list-item">                      <a href="javascript: void(0)" class="link-item link-item-s bg-689f0e">                        <i class="icon-a1"></i>                        <p>智慧服务item</p>                      </a>                    </div>                    <div class="t-list-item">                      <a href="javascript: void(0)" class="link-item link-item-s bg-5292f4">                        <i class="icon-a1"></i>                        <p>智慧服务item</p>                      </a>                    </div>                    <div class="t-list-item">                      <a href="javascript: void(0)" class="link-item link-item-m bg-03be87">                        <i class="icon-a1"></i>                        <p>智慧服务item</p>                      </a>                    </div>                  </div>                </div>              </div>              <!-- 智慧营销 end -->            </div>            <div class="t-bigData-warp">              <h2 class="t-tit">景区大数据</h2>              <div class="opacity-bg">                <div class="t-row-5">                  <div class="t-line-3">                    <a href="javascript: void(0)" class="bg-ed6e07">                      <i class="icon-a1"></i> 大数据采集                    </a>                  </div>                  <div class="t-line-3">                    <a href="javascript: void(0)" class="bg-5292f4">                      <i class="icon-a1"></i> 大数据采集                    </a>                  </div>                  <div class="t-line-3">                    <a href="javascript: void(0)" class="bg-9b36e3">                      <i class="icon-a1"></i> 大数据采集                    </a>                  </div>                </div>              </div>            </div>          </div>          <!-- t-left end -->          <div class="t-right">            <div class="t-zh-manage">              <h2 class="t-tit">智慧管理</h2>              <div class="t-row-5">                <div class="t-line-3">                  <div class="t-list-item">                    <a href="javascript: void(0)" class="link-item link-item-s bg-e6ba01">                      <i class="icon-a1"></i>                      <p>智慧服务item</p>                    </a>                  </div>                  <div class="t-list-item">                    <a href="javascript: void(0)" class="link-item link-item-m bg-9b36e3">                      <i class="icon-a1"></i>                      <p>智慧服务item</p>                    </a>                  </div>                </div>                <div class="t-line-3">                  <div class="t-list-item">                    <a href="javascript: void(0)" class="link-item link-item-m bg-ce045a">                      <i class="icon-a1"></i>                      <p>智慧服务item</p>                    </a>                  </div>                  <div class="t-list-item">                    <a href="javascript: void(0)" class="link-item link-item-s bg-ed6e07">                      <i class="icon-a1"></i>                      <p>智慧服务item</p>                    </a>                  </div>                </div>                <div class="t-line-3">                  <div class="t-list-item">                    <a href="javascript: void(0)" class="link-item link-item-s bg-5292f4">                      <i class="icon-a1"></i>                      <p>智慧服务item</p>                    </a>                  </div>                  <div class="t-list-item">                    <a href="javascript: void(0)" class="link-item link-item-m bg-03be87">                      <i class="icon-a1"></i>                      <p>智慧服务item</p>                    </a>                  </div>                </div>                <div class="t-link-item-l">                  <div class="t-list-item">                    <a href="javascript: void(0)" class="link-item link-item-m bg-e6ba01">                      <i class="icon-a1"></i>                      <p>智慧服务item</p>                    </a>                  </div>                </div>                <div class="t-line-3">                  <div class="t-list-item">                    <a href="javascript: void(0)" class="link-item link-item-m bg-689f0e">                      <i class="icon-a1"></i>                      <p>智慧服务item</p>                    </a>                  </div>                </div>                <div class="t-line-3">                  <div class="t-list-item">                    <a href="javascript: void(0)" class="link-item link-item-m bg-5292f4">                      <i class="icon-a1"></i>                      <p>智慧服务item</p>                    </a>                  </div>                </div>                <div class="t-line-3">                  <div class="t-list-item">                    <a href="javascript: void(0)" class="link-item link-item-m bg-9b36e3">                      <i class="icon-a1"></i>                      <p>智慧服务item</p>                    </a>                  </div>                </div>                <div class="t-line-3">                  <div class="t-list-item">                    <a href="javascript: void(0)" class="link-item link-item-m bg-ed6e07">                      <i class="icon-a1"></i>                      <p>智慧服务{{1374 - 466 - 66}}</p>                    </a>                  </div>                </div>              </div>            </div>            <!-- 智慧管理 end -->          </div>          <!-- t-right end -->        </div>      </div>    </div></template><script>export default {        name: "index"    }</script><style scoped>/* 设计稿 宽1374 466*2 + 66*2 + 310 */  .t-container{ width: 13.74rem; margin: 0 auto;  padding-top: .3rem; }  .t-container *{    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;  }  .t-row-33:before,  .t-row-33:after,  .t-row-5:before,  .t-row-5:after,  .clearfix:after,  .clearfix:before{    content: '';    display: table;  }  .t-row-33:after,  .t-row-5:after,  .clearfix:after{ clear: both; }  .t-row-33{ margin-left: -.33rem; margin-right: -.33rem; }  .t-row-5{ margin-left: -.05rem; margin-right: -.05rem; }  .bg-e6ba01{ background-color: #e6ba01; }  .bg-ed6e07{ background-color: #ed6e07; }  .bg-689f0e{ background-color: #689f0e; }  .bg-03be87{ background-color: #03be87; }  .bg-9b36e3{ background-color: #9b36e3; }  .bg-9b36e3{ background-color: #9b36e3; }  .bg-ce045a{ background-color: #ce045a; }  .bg-5292f4{ background-color: #5292f4; }  .t-container .t-left,  .t-container .t-right,  .t-zh-service,  .t-zh-marketing{ float: left; padding-left: .33rem; padding-right: .33rem;}  .t-container .t-left{ width: 9.08rem; padding-left: .33rem; padding-right: .33rem;}  .t-container .t-right{ width: 5.22rem; padding-left: .33rem; padding-right: .33rem;}  .t-tit{ color: #fff; font-size: 18px; font-weight: normal; margin-bottom: .15rem; }  .t-zh-service{ width: 5.32rem; }  .t-zh-marketing{ width: 3.76rem; }  .t-line-3,  .t-line-2,  .t-link-item-l{ float: left; padding-left: 5px; padding-right: 5px; }  .t-line-3{ width: 33.333333%; }  .t-line-2{ width: 50%; }  .t-link-item-l{ width: 66.66666% }  .link-item{ display: table-cell; width: 3.5%; vertical-align: middle; text-align: center;    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;  }  .link-item-s{ height: 1.2rem; }  .link-item-m{ height: 1.5rem; }  .t-list-item{ margin-bottom: 10px;    -webkit-transition: all .5s;    -moz-transition: all .5s;    -ms-transition: all .5s;    -o-transition: all .5s;    transition: all .5s;  }  .t-list-item a{ color: #fff; }  .t-list-item a i{ font-size: .5rem; display: inline-block;    -webkit-transition: all .5s;    -moz-transition: all .5s;    -ms-transition: all .5s;    -o-transition: all .5s;    transition: all .5s;  }  .t-list-item a p{ padding-top: .05rem; font-size: .18rem;}  .t-list-item:hover{    -webkit-box-shadow: 0px 5px 20px rgba(0,0,0,.3);    -moz-box-shadow: 0px 5px 20px  rgba(0,0,0,.3);    box-shadow: 0px 5px 20px  rgba(0,0,0,.3);  }  .t-list-item:hover i{    -webkit-transform: scale(1.1);    -moz-transform: scale(1.1);    -ms-transform: scale(1.1);    -o-transform: scale(1.1);    transform: scale(1.1);  }  .t-bigData-warp .opacity-bg{ background-color: rgba(0,0,0,.5); padding: 10px;}  .t-bigData-warp a{ display: block; width: 100%; text-align: center; line-height: 1.08rem; color: #fff; font-size: 0.18rem;    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;  }  .t-bigData-warp a:hover i{    -webkit-transform: scale(1.1);    -moz-transform: scale(1.1);    -ms-transform: scale(1.1);    -o-transform: scale(1.1);    transform: scale(1.1);  }  .t-bigData-warp a i{ font-size: .4rem; vertical-align: middle; margin-right: .15rem; display: inline-block;    -webkit-transition: all .5s;    -moz-transition: all .5s;    -ms-transition: all .5s;    -o-transition: all .5s;    transition: all .5s;  }</style>

<template>  <div>    <div class="top-warp">      <div class="grid-content topheader">        <img class="logo1" src="../../static/images/logo1.png" alt="">        <div class="title">景区综合管理平台</div>        <div class="time">今天是2018年4月23日</div>      </div>      <div class="header-nav">        <ul class="clearfix">          <li v-for="(item,index) in datas" :key="index" @click="changeBg(index)" :class="{libg: index == curIndex}">            <router-link :to="item.route">              <div class="pr navli">                <i class="pa" :class="[item.class]"></i>                <p>{{item.title}}</p>              </div>            </router-link>          </li>        </ul>      </div>    </div>  </div></template><script>export default{    name:"NavHeader",    data(){      return {        datas:[          {            title:'综合大屏',            class: 'icon-a1',            route:'/screen'          },          {            title:'视频监控',            class: 'icon-a2',            route:'/video'          },          {            title:'旅游大数据',            class: 'icon-a3',            route:'/dataV'          },          {            title:'营销分析',            class: 'icon-a4',            route:'/marketing'          },          {            title:'应急管理',            class: 'icon-a5',            route:'/emergencyManage'          },          {            title:'景区地图',            class: 'icon-a6',            route:'/scMap'          },          {            title:'协同办公',            class: 'icon-a7',            route:'/synergeticOffice'          },          {            title:'旅游投诉',            class: 'icon-a8',            route:'/touristComplaint'          },          {            title:'环境保护',            class: 'icon-a9',            route:'/environmentalProtection'          },          {            title:'呼叫中心',            class: 'icon-a10',            route:'/callCenter'          },          {            title:'信息发布',            class: 'icon-a11',            route:'/infoRelease'          },          {            title:'应用后台',            class: 'icon-a12',            route:'/backstageApplication'          }        ],        curIndex:0      }    },    methods:{      changeBg(index){        this.curIndex = index;      }    }  }</script><style scoped>.topheader{height: 1rem; line-height: 1rem;width: 100%;background-image: linear-gradient(top, #3b72ee, #012352);background-image: -o-linear-gradient(top, #3b72ee, #012352);    background-image: -moz-linear-gradient(top, #3b72ee, #012352);    background-image: -webkit-linear-gradient(top, #3b72ee, #012352);  }  .logo1{width: 1.4rem;float: left;margin-top: .32rem;padding-left: .5rem;}  .title{font-size: .22rem;color: #fff;float: left;margin-left: .2rem;}  .time{font-size: .16rem;color: #fff;float: right;padding-right: .5rem;}  .header-nav{width:100%;height:.96rem;overflow: hidden}  .header-nav ul li{width:8.325%;background: #3b72ee; float: left; height: .94rem;cursor: pointer;border-bottom: solid 1px #012352;border-top: solid 1px #012352}  .header-nav .navli{border-left: solid 2px #012352;height: .94rem;text-align: center}  .header-nav .navli p{padding-top:.58rem;text-align: center; color: #fff;font-size: .16rem}  .navli .pa{font-size:0.36rem;color: #fff;left:50%;top: .18rem;margin-left: -.2rem;}  .header-nav ul li.libg{    background: -webkit-linear-gradient(#05459c, #012352);    background: -o-linear-gradient(#05459c, #012352);    background: -moz-linear-gradient(#05459c, #012352);    background: linear-gradient(#05459c, #012352);    height:.9rem;    border-top: solid 0.04rem #ffd452;  }</style>