Vue

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

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

前言???? 基于 vue、datav、Echart 框架的大数据可视化(大屏展示)源码，基于VUE+Echarts 制作，实现大数据可视化。通过 vue 组件实现数据动态刷新渲染，内部图表可自由替换。部分图表使用 DataV 自带组件，可自由进行更改， 可以在此基础上重新开发。本项目中使用的是echarts图表库，EChart...

@码住夏天-web网页设计

4098人浏览 · 2022-10-23 10:32:04
@码住夏天-web网页设计  ·  2022-10-23 10:32:04 发布

前言

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

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

​

文章目录

一、Echart是什么

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

二、ECharts入门教程

​​5 分钟上手ECharts​​

三、如何在vue中引入echarts

1.先安装依赖

npm install echarts --save

2全局引入​​main.js​​中配置(不推荐使用，会导致包过大，冗余多)

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

3.组件内按需引入 ( 推荐使用 )
这种方式很简单，在需要引入图表的组件引入,例如如下引入柱状图。

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

4.全局引入为例，在组件中使用示例

<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>

四、作品演示

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

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

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

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

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

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

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

五、代码实现

App.vue

<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>

main.js

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-ui
import 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);
//引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
var bus = new Vue();
window.bus = bus;

// Copyright © 青岛研锦网络科技有限公司, All Rights Reserved.
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});
//广播一个全局事件
window.onresize = function(){
  window.bus.$emit("resize");
}

index.vue

<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>

NavHeader.vue

<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>
# echarts # vue.js # javascript # ecmascript # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue
  • 浏览量 4098
  • 收藏 0
  • 0

所有评论(0)

查看更多评论 

@码住夏天-web网页设计

@qq_365392777
已为社区贡献3条内容