基于VUE + Echarts 实现可视化数据大屏效果展示大数据

IT-司马青衫

于 2022-08-16 10:13:32 发布

阅读量3.9k

点赞数 1

分类专栏： VUE+Echarts大屏数据可视化文章标签： echarts vue.js javascript 前端 echarts可视化数据大屏

本文链接：https://blog.csdn.net/bigwhiteshark/article/details/126347849

版权

VUE+Echarts大屏数据可视化专栏收录该内容

22 篇文章 150 订阅

订阅专栏

前言

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

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

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

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

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

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

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

一、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)
//   
export default new Router({
  routes: [
    {
      path: '/',
      redirect: to => {
        return '/home'
      }
    },
    {
      path: '/home',
      name: 'home',
      component: () => import('./views/Home.vue')
    }
  ]
})

main.js


import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'vue-g2'
import './plugins/element.js'
import 'vue-mapboxgl-components'
import 'vue-mapboxgl-components/lib/vue-mapboxgl-components.css'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
//   
Vue.config.productionTip = false
Vue.use(VideoPlayer)
Vue.use(ElementUI)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
html,body{
  height: 100%;
  width: 100%;
  margin: 0;
}
#app{
  height: 100%;
  width: 100%;
}
</style>

home.vue

<template>
  <div class="homeCtn">
    <!-- 标题模块 -->
    <div class="topCtn">
      <div class="title"><span>智慧司法 · 智慧法援</span></div>
      <span class="number">
        <!-- {{caseTotal|addComma}} -->
        <span class="countNumber" @click="setFinereportLogin()">
          <ICountUp :startVal="ICountUp.startVal" :endVal="caseTotal" :decimals="ICountUp.decimals"
         :duration="ICountUp.duration" :options="ICountUp.options" />
         </span>
        <div class="eleCtn ctn1">
          <el-select v-model="timeValue" placeholder="请选择" @change="getMap">
            <el-option
              v-for="item in timeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="eleCtn ctn2">
          <el-select v-model="casetypeValue" placeholder="请选择" @change="getMap">
            <el-option
              v-for="item in casetypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="eleCtn ctn3">
          <div :class="mapFlag === 'zhongguo'?'btn active':'btn'" @click="mapFlag = 'zhongguo'">户籍分布</div>
          <div :class="mapFlag === 'shanghai'?'btn active':'btn'" @click="mapFlag = 'shanghai'">案件分布</div>
        </div>
      </span>
      <div class="content"><span>案件总量</span></div>
    </div>
    <!-- 左侧栏 -->
    <div class="sideBar sideBarLeft">
      <div class="model model1">
        <div class="title">法援案件</div>
        <div class="box">
          <div class="boxTitle" style="height:54px">
            <span class="titles">今年在办</span>
            <!-- {{inProgress|addComma}} -->
            <span class="numbers">
              <ICountUp :startVal="ICountUp.startVal" :endVal="inProgress" :decimals="ICountUp.decimals"
               :duration="ICountUp.duration" :options="ICountUp.options"/>
              <em>件</em>
            </span>
          </div>
        </div>
        <div class="box">
          <div class="boxTitle">
            <span class="titles">案件数量</span>
            <div class="select">
              <span :class="caseNumFlag === 'today'?'button active':'button'" @click="caseNumFlag='today'">今日</span>
              <span :class="caseNumFlag === 'month'?'button active':'button'" @click="caseNumFlag='month'">本月</span>
              <span :class="caseNumFlag === 'years'?'button active':'button'" @click="caseNumFlag='years'">全年</span>
            </div>
          </div>
          <div class="boxContent boxContent1">
            <div class="line">
              <span class="span1">受理案件</span>
              <!-- {{acceptCase[caseNumFlag]|addComma}} -->
              <span class="span2">
                <ICountUp :startVal="ICountUp.startVal" :endVal="acceptCase[caseNumFlag]" :decimals="ICountUp.decimals"
               :duration="ICountUp.duration" :options="ICountUp.options"/>
                <em>件</em>
              </span>
            </div>
            <div class="line">
              <span class="span1">办案结案</span>
              <!-- {{finishCase[caseNumFlag]|addComma}} -->
              <span class="span2">
                <ICountUp :startVal="ICountUp.startVal" :endVal="finishCase[caseNumFlag]" :decimals="ICountUp.decimals"
               :duration="ICountUp.duration" :options="ICountUp.options"/>
                <em>件</em>
              </span>
            </div>
          </div>
        </div>
        <div class="box">
           <div class="boxTitle">
            <span class="titles">久办不结</span>
            <!-- {{timeoutNum|addComma}} -->
            <span class="numbers">
              <ICountUp :startVal="ICountUp.startVal" :endVal="timeoutNum" :decimals="ICountUp.decimals"
               :duration="ICountUp.duration" :options="ICountUp.options"/>
                <em>件</em>
            </span>
          </div>
        </div>
        <div class="box">
          <div class="boxTitle">
            <span class="titles">区域人案比</span>
            <div class="select">
              <span :class="personRatioFlag === 'today'?'button active':'button'" @click="personRatioFlag='today'">今日</span>
              <span :class="personRatioFlag === 'month'?'button active':'button'" @click="personRatioFlag='month'">本月</span>
              <span :class="personRatioFlag === 'years'?'button active':'button'" @click="personRatioFlag='years'">全年</span>
            </div>
          </div>
          <div class="boxContent boxContent2">
            <div v-for=" (item,index) in personRatio[personRatioFlag]" :key="index" class="line">
              <span class="span1">{{item.name}}</span>
              <div class="rate">
                <div class="rated" :style="{width:rateCmp(item.value)}"></div>
              </div>
              <!-- {{item.value}} -->
              <span class="span2">
               <ICountUp :startVal="ICountUp.startVal" :endVal="item.value" :decimals="ICountUp.decimals"
               :duration="ICountUp.duration" :options="ICountUp.options"/>
              </span>
            </div>
            <div style="font-size: 26px;font-weight: bold;color: #aeedf9;text-align:center;line-height:126px" v-if=" personRatio[personRatioFlag].length === 0">暂无数据</div>
          </div>
        </div>
        <div class="box flexbox">
          <div class="boxTitle">
            <span class="titles">趋势分析</span>
            <div class="select">
              <span class="button active">近7日</span>
            </div>
          </div>
          <div class="boxContent boxContent3">
            <g2-area style="width:100%;margin:auto" :height="130" :id="'area'" :is-smooth="true" :padding="['auto','auto']"
              :axisColor = "{lineColor:'#4B6278', labelColor:'#FFFFFF'}" :useTooltip="false"
              :data="trendAnalysis" :axis-name="{name:'年份', value:'案件数量'}">
            </g2-area>
          </div>
        </div>
      </div>
      <div class="model model2">
        <div class="title">法援力量</div>
        <div class="box flexbox">
          <div class="boxTitle" style="height:54px">
            <span class="titles">今日指派律师</span>
            <!-- {{lawerToday}} -->
            <span class="numbers">
              <ICountUp :startVal="ICountUp.startVal" :endVal="lawerToday" :decimals="ICountUp.decimals"
               :duration="ICountUp.duration" :options="ICountUp.options"/>
              <em>人</em>
            </span>
          </div>
          <div class="boxContent boxContent3" style="position:relative">
            <g2-liquidfill style="width: 200px;margin:auto" :id="'liquidfill'" :height="150" :color="{ backgroundColor: '#3454bd', labelColor: '#d4d8db' }"
              :max-value="1" :is-percent="true" :data="[{ name: '剩余力量', value: percentRemain }]" :useTooltip="false">
            </g2-liquidfill>
            <div style="font-size:16px;color:#fff;position:absolute;left:0;right:0;margin:auto;bottom:3%;text-align:center">剩余力量</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部栏 -->
    <div class="bottomCtn">
      <div class="main">
        <div class="boxLeft">
          <div v-for="(item,index) in caseFrom.tongZhiLYFB" :key="index" class="circleCtn">
            <span class="circle">{{item.name}}</span>
            <span class="number">
              {{item.value|numClear}}
              <!-- <ICountUp :startVal="ICountUp.startVal" :endVal="item.value>1000?item.value/10000:item.value" :decimals="item.value>1000?2:0"
              :duration="ICountUp.duration" :options="{useEasing: true, useGrouping: true, separator: ',', decimal: '.',Prefix:'',Suffix:`${item.value>1000?'万':''}`}"/> -->
            </span>
          </div>
        </div>
        <div class="boxMiddle"></div>
        <div class="boxRight">
           <div v-for="(item,index) in caseFrom.shenQingLYFB" :key="index" class="circleCtn">
            <span class="circle">{{item.name}}</span>
            <span class="number">
              {{item.value|numClear}}
              <!-- <ICountUp :startVal="ICountUp.startVal" :endVal="item.value>1000?item.value/10000:item.value" :decimals="item.value>1000?2:0"
              :duration="ICountUp.duration" :options="{useEasing: true, useGrouping: true, separator: ',', decimal: '.',Prefix:'',Suffix:`${item.value>1000?'万':''}`}"/> -->
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧栏 -->
    <div class="sideBar sideBarRight">
      <div class="model">
        <div class="title">风险预警</div>
        <div class="box flexbox">
          <div class="boxTitle" style="height:54px;background:transparent">
            <!-- 这个空标签用于占位 -->
            <span class=""></span>
            <div class="select">
              <span :class="riskWarningFlag === 'jinRi'?'button active':'button'" @click="riskWarningFlag='jinRi'">今日</span>
              <span :class="riskWarningFlag === 'benYue'?'button active':'button'" @click="riskWarningFlag='benYue'">本月</span>
              <span :class="riskWarningFlag === 'quanNian'?'button active':'button'" @click="riskWarningFlag='quanNian'">全年</span>
            </div>
          </div>
           <div class="boxContent boxContent3" style="position:relative">
             <div class="leftTop">
               <!-- {{riskWarningArr[riskWarningFlag].zhongDaAJ + riskWarningArr[riskWarningFlag].qunTiAJ + riskWarningArr[riskWarningFlag].gaoWeiRQ}} -->
               <span class="number">
                  <ICountUp :startVal="ICountUp.startVal" :endVal="riskWarningArr[riskWarningFlag].zhongDaAJ + riskWarningArr[riskWarningFlag].qunTiAJ + riskWarningArr[riskWarningFlag].gaoWeiRQ" :decimals="ICountUp.decimals"
                  :duration="ICountUp.duration" :options="{useEasing: true, useGrouping: true, separator: '', decimal: '.', suffix: ''}"/>
               </span>
               <span class="content">预警总量</span>
             </div>
             <div class="imgCtn">
               <img src="../assets/image/rotate.gif" />
               <div class="circle circle1" :number="riskWarningArr[riskWarningFlag].zhongDaAJ">重大案件</div>
               <div class="circle circle3" :number="riskWarningArr[riskWarningFlag].gaoWeiRQ">高风险人员</div>
               <div class="circle circle2" :number="riskWarningArr[riskWarningFlag].qunTiAJ">群体案件</div>
             </div>
           </div>
        </div>
      </div>
      <div class="model">
        <div class="title">热点洞察</div>
        <div class="box flexbox">
           <div class="boxContent boxContent3">
            <g2-word-cloud :id="'wordcloud'" style="margin:auto" :height="220" :width="300"
            :use-image = "false" :data="wordArr" :useTooltip="false">
            </g2-word-cloud>
           </div>
        </div>
      </div>
      <div class="model">
        <div class="title">申请现场</div>
        <div class="box flexbox">
           <div class="boxContent boxContent3">
             <div class="videoCtn">
              <div class="border borderleftT"></div>
              <div class="border borderrightT"></div>
              <div class="border borderleftB"></div>
              <div class="border borderrightB"></div>
              <video-player  class="video-player vjs-custom-skin"
                ref="videoPlayer"
                :playsinline="false"
                :options="playerOptions"
              ></video-player>
             </div>
           </div>
        </div>
      </div>
    </div>
    <!-- 地图模块 -->
    <div class="middleCtn">
      <mapview
        :map-config="{center:mapFlag === 'shanghai'?randomCase.center:[110.142577,32.27719], zoom:mapFlag === 'shanghai'?11:4, pitch:mapFlag === 'shanghai'?60:0, bearing:0}"
        :osm-config="{osmUrl: osmUrl, backgroundStyle: 'custombrightstyle'}"
        :map-types="mapFlag === 'shanghai'?['extrusion']:['line','point']"
        :line="{color: '#a6c84c', width: 2, opacity: 0.2, useCurve: true, showAnimation: true, data:mapData.map((item)=>{return [{lng: item.lng, lat: item.lat},{lng: 121.36, lat: 31.3}]})}"
        :point="{maxValue:10000, minValue:0, color: '#a6c84c', textColor: '#6e6e6e', showAnimation: false, opacity: 0.8, maxRadius: 18, minRadius: 5, textOffset: 2, data: mapData}"
        :extrusion="{offset:0.003,shape:'column', data: mapData2,color:'#6AFFFF',maxHeight:4000,minHeight:1000,maxValue:7000,minValue:0}"
        @extrusionMouseenter="showTips"
        @extrusionMouseleave="tipsFlag = false"
        @pointMouseenter="showTips2"
        @pointMouseleave="tipsFlag2 = false"
        >
        <popup :laglng="randomCase.center" name="预警弹窗" :html-content="
          `<div class='popupCtn'>
            <div class='popupTitle'>${randomCase.shiJianMC}</div>
            <div class='popupContent bg1'>${randomCase.fengXianLX}</div>
            <div class='popupContent bg2'>${randomCase.shiJian}</div>
            <div class='popupContent bg3'>${randomCase.jiGou}</div>
          </div>`
          " :show-popup="mapFlag === 'shanghai'&&randomCase.fengXianLX!==''">
        </popup>
        <popup :laglng="tips.center" name="调委会tip" :html-content="
          `<div class='tipsCtn'>
            <div class='tipsNum'>${tips.value}<em>件</em></div>
            <div class='tipsArea'>${tips.name}</div>
          </div>`
          " :show-popup="mapFlag === 'shanghai'&& tipsFlag === true">
        </popup>
        <popup :laglng="tips2.center" name="省份tip" :html-content="
          `<div class='tipsCtn'>
            <div class='tipsNum'>${tips2.value}<em>人</em></div>
            <div class='tipsArea'>${tips2.name}受援人数</div>
          </div>`
          " :show-popup="mapFlag === 'zhongguo'&& tipsFlag2 === true">
        </popup>
      </mapview>
    </div>
  </div>
</template>

<script>
import { legalCaseCount, legalCaseTrend, hotSpotInsight, riskWarning, caseEarlyWarning, mapDatas, videoUrl } from '@/api/index.js'
import ICountUp from 'vue-countup-v2'
export default {
  name: 'home',
  components: {
    ICountUp
  },
  data () {
    return {
      ICountUp: {
        startVal: 0,
        decimals: 0,
        duration: 3,
        options: {
          useEasing: true,
          useGrouping: true,
          separator: ' , ',
          decimal: '.',
          prefix: '',
          suffix: ''
        }
      },
      timeOptions: [{
        value: 'YJ0001',
        label: '今日'
      }, {
        value: 'YJ0002',
        label: '本月'
      }, {
        value: 'YJ0003',
        label: '今年'
      }, {
        value: 'YJ0004',
        label: '至今'
      }],
      timeValue: 'YJ0003',
      casetypeOptions: [{
        value: 'YJ0101',
        label: '民事'
      }, {
        value: 'YJ0102',
        label: '刑事'
      }, {
        value: 'YJ0103',
        label: '全部'
      }],
      casetypeValue: 'YJ0103',
      wordArr: [{
        name: '暂无',
        value: 10
      }],
      playerOptions: {
        playbackRates: [], // 播放速度
        autoplay: true, // 如果true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: true, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4',
          src: videoUrl // url地址
        }],
        poster: '', // 你的封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: false,
          durationDisplay: false,
          remainingTimeDisplay: false,
          fullscreenToggle: false // 全屏按钮
        }
      },
      inProgress: 0, // 今年在办案件数量
      timeoutNum: 0, // 久办不结
      lawerToday: 0, // 今日指派律师
      percentRemain: 0, // 律师剩余力量
      caseTotal: 0, // 案件总量
      acceptCase: {
        today: 0,
        month: 0,
        years: 0
      }, // 受理案件
      finishCase: {
        today: 0,
        month: 0,
        years: 0
      }, // 办案结案
      caseNumFlag: 'years',
      personRatio: {
        today: [{
          name: '暂无',
          value: 0
        }, {
          name: '暂无',
          value: 0
        }, {
          name: '暂无',
          value: 0
        }],
        month: [{
          name: '暂无',
          value: 0
        }, {
          name: '暂无',
          value: 0
        }, {
          name: '暂无',
          value: 0
        }],
        years: [{
          name: '暂无',
          value: 0
        }, {
          name: '暂无',
          value: 0
        }, {
          name: '暂无',
          value: 0
        }]
      }, // 区域人案比
      personRatioFlag: 'years',
      trendAnalysis: [],
      riskWarningArr: {
        benYue: {
          gaoWeiRQ: 0,
          qunTiAJ: 0,
          zhongDaAJ: 0
        },
        jinRi: {
          gaoWeiRQ: 0,
          qunTiAJ: 0,
          zhongDaAJ: 0
        },
        quanNian: {
          gaoWeiRQ: 0,
          qunTiAJ: 0,
          zhongDaAJ: 0
        }
      },
      riskWarningFlag: 'quanNian',
      caseFrom: {
        shenQingLYFB: [],
        tongZhiLYFB: []
      }, // 来源分析
      mapData: [],
      mapData2: [],
      mapFlag: 'shanghai',
      osmUrl: process.env.VUE_APP_OSMURL,
      caseArr: [],
      randomCase: {
        fengXianLX: '',
        jiGou: '',
        center: [121.46, 31.22],
        shiJian: '',
        shiJianMC: ''
      },
      tipsFlag: false,
      tips: {
        center: [],
        value: 0,
        name: ''
      },
      tipsFlag2: false,
      tips2: {
        center: [],
        value: 0,
        name: ''
      }
    }
  },
  computed: {
    mapMaxVal () {
      let max = 0
      this.mapData.forEach((item) => {
        max = item.value > max ? item.value : max
      })
      return max
    },
    mapMinVal () {
      let min = 0
      if (this.mapData[0].value) {
        min = this.mapData[0].value
      }
      this.mapData.forEach((item) => {
        min = item.value < min ? item.value : min
      })
      return min
    }
  },
  filters: {
    // 数字加逗号
    addComma (val) {
      var b = parseInt(val).toString()
      var len = b.length
      if (len <= 3) { return b }
      var r = len % 3
      return r > 0 ? b.slice(0, r) + ',' + b.slice(r, len).match(/\d{3}/g).join(',') : b.slice(r, len).match(/\d{3}/g).join(',')
    },
    // 数字精简
    numClear (val) {
      return val < 1000 ? val : (val / 10000).toFixed(2) + '万'
    }
  },
  methods: {
    // 区域人案比特殊计算方式
    rateCmp (val) {
      let max = this.personRatio[this.personRatioFlag][0].value
      return 0.8 * val / max * 100 + '%'
    },
    // 日期处理
    dateFormat (val) {
      let newDate = new Date(val)
      let valueFormat = 'MM / dd'
      let date = {
        'yy': newDate.getFullYear(),
        'MM': newDate.getMonth() + 1,
        'dd': newDate.getDate(),
        'hh': newDate.getHours(),
        'mm': newDate.getMinutes(),
        'ss': newDate.getSeconds(),
        'D': ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][newDate.getDay()]
      }
      // 输出年 y+:匹配1个到多个y,i:忽略大小写
      if (/(y+)/i.test(valueFormat)) {
        valueFormat = valueFormat.replace(RegExp.$1, (newDate.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      // 输出月、日、时、分、秒、星期
      Object.keys(date).forEach(function (i) {
        // 只有写成`(${i})`形式，才能在正则表达式中捕获子匹配，进而才能用到RegExp.$1的值
        if (new RegExp(`(${i})`).test(valueFormat)) {
          // 判断，如果时间为一位数，则在前面加'0'
          if (RegExp.$1.length === 2) {
            if (date[i] < 10) {
              date[i] = `0${date[i]}`
            }
          }
          // 替换初始化函数时候传入yyyy-mm-dd hh:mm:ss D
          valueFormat = valueFormat.replace(RegExp.$1, date[i])
        }
      })
      return valueFormat
    },
    // 地图取数据
    getMap () {
      let _this = this
      mapDatas({
        time: _this.timeValue,
        casetype: _this.casetypeValue
      }).then((res) => {
        if (res.data.code === 1) {
          let data = res.data.data
          _this.caseFrom.shenQingLYFB = data.shenQingLYFB
          _this.caseFrom.tongZhiLYFB = data.tongZhiLYFB
          _this.mapData = data.shouYuanRHJFB
          _this.mapData2 = data.faYuanSLFB.map((item) => {
            return {
              'value': item.value,
              'lat': item.lat,
              'lng': item.lng,
              'name': item.name
            }
          })
        }
      })
    },
    // 鼠标移入柱图
    showTips (ev) {
      this.tips.center = [ev.lng, ev.lat]
      this.tips.value = ev.value
      this.tips.name = ev.name
      this.tipsFlag = true
    },
    // 鼠标移入点图
    showTips2 (ev) {
      this.tips2.center = [ev.lng, ev.lat]
      this.tips2.value = ev.value
      this.tips2.name = ev.name
      this.tipsFlag2 = true
    },
    setFinereportLogin () {
      let username = 'demo'
      let password = 'demo'
      let url = process.env.VUE_APP_FINREPORTURL
      // 创建iframe
      let scr = document.createElement('iframe')
      // 将报表验证用户名密码的地址指向此iframe
      scr.src = url + '/login/cross/domain?fine_username=' + username + '&fine_password=' + password + '&validity=-1' + '&callback='
      if (scr.attachEvent) { // 判断是否为ie浏览器
        // 如果为ie浏览器则页面加载完成后立即执行
        scr.attachEvent('onload', function () {
          // 直接跳转到数据决策系统
          window.open(url)
        })
      } else {
        // 其他浏览器则重新加载onload事件
        scr.onload = function () {
          // 直接跳转到数据决策系统
          window.open(url)
        }
      }
      // 将iframe标签嵌入到head中
      document.getElementsByTagName('head')[0].appendChild(scr)
    }
  },
  mounted () {
    let _this = this
    legalCaseCount().then((res) => {
      if (res.data.code === 1) {
        let data = res.data.data
        _this.inProgress = data.inProgress
        _this.timeoutNum = data.timeoutNum
        _this.lawerToday = data.lawerCount.lawerToday
        _this.percentRemain = data.lawerCount.percentRemain
        _this.caseTotal = data.caseTotal
      }
    })
    legalCaseTrend().then((res) => {
      if (res.data.code === 1) {
        let data = res.data.data
        _this.acceptCase = data.caseNum.acceptCase
        _this.finishCase = data.caseNum.finishCase
        _this.personRatio = data.personRatio
        _this.trendAnalysis = data.trendAnalysis.map((item) => {
          item.name = _this.dateFormat(item.name)
          return item
        })
      }
    })
    hotSpotInsight().then((res) => {
      if (res.data.code === 1) {
        _this.wordArr = res.data.data
      }
    })
    riskWarning().then((res) => {
      if (res.data.code === 1) {
        _this.riskWarningArr = res.data.data
      }
    })
    caseEarlyWarning().then((res) => {
      if (res.data.code === 1) {
        _this.caseArr = res.data.data
      }
    })
    _this.getMap()
    // 设置定时器
    setInterval(() => {
      let len = _this.caseArr.length
      if (len !== 0) {
        let cases = _this.caseArr[Math.round(Math.random() * (len - 1))]
        _this.randomCase = {
          fengXianLX: cases.fengXianLX,
          jiGou: cases.jiGou,
          center: [(Number(cases.lng) - 0.01), cases.lat],
          shiJian: cases.shiJian,
          shiJianMC: cases.shiJianMC
        }
      }
    }, 15000)
  }
}
</script>
<style lang="less">
.video-player{
  padding: 0 15px;
  position: relative;
  height: 100%;
  // 视频居中
  #vjs_video_3{
    position: absolute!important;
    left: 2px;
    top: 2px;
    right:2px;
    bottom: 2px;
    margin: auto;
  }
}
.vjs-custom-skin{
  background: transparent;
}
// 选择框
.homeCtn .el-select .el-input__inner{
  color: #19C8E2;
  height: 36px;
  background: #021326;
  border-color:#014760;
}
.homeCtn .el-select .el-input.is-focus .el-input__inner{
  border-color:#014760;
}
.el-select-dropdown{
  margin-top: 0!important;
  background: #021326;
  border: 0;
  border-color:#014760;
  color: #19C8E2;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
  background: #014760;
  color:white;
}
.el-select-dropdown__item.selected{
  color: #19C8E2;
}
.homeCtn .el-select{
  width:100px;
}
.el-popper[x-placement^=bottom] .popper__arrow,
.el-popper[x-placement^=bottom] .popper__arrow::after{
    border-bottom-color: #021326 !important;
}

//地图随即框样式修改
.homeCtn .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{
  border:0;
}
.homeCtn .mapboxgl-popup-content{
  padding:0;
  background: transparent;
}
.homeCtn .mapboxgl-popup-close-button{
  clip:rect(0,0,0,0)
}
.popupCtn{
  position: relative;
  padding:24px 24px 24px 16px;
  max-width: 300px;
  min-width: 220px;
  border-top: 2px solid #20D9F0;
  border-bottom:2px solid #20D9F0;
  background: rgba(0,14,25,0.8);
  top: -40px;
}
.popupCtn::after{
  content:url('../assets/image/pic_location.png');
  position: absolute;
  bottom: -47px;
  width: 100%;
  left: 0;
  text-align: center;
}
.popupCtn .popupTitle{
  line-height: 28px;
  padding: 4px 0 16px 0;
  color:#19C8E2;
  font-size:20px;
}
.popupCtn .popupContent{
  font-size:16px;
  line-height: 28px;
  color:#FFFFFF;
  padding-left: 28px;
  background-position: left center;
  background-repeat: no-repeat;
}
.popupCtn .bg1{
  background-image: url('../assets/image/icon_type.png')
}
.popupCtn .bg2{
  background-image: url('../assets/image/icon_time.png')
}
.popupCtn .bg3{
  background-image: url('../assets/image/icon_place.png')
}

// 地图提示框样式
.tipsCtn{
  min-width: 141px;
  padding: 0 10px;
  border-top: 2px solid #20D9F0;
  background: rgba(0,14,25,0.8);
}
.tipsCtn .tipsNum{
  color:#19C8E2;
  font-size:24px;
  font-family:Acens;
  padding-top: 20px;
  text-align: center;
}
.tipsCtn .tipsNum em{
  font-size:14px;
  font-family:MicrosoftYaHei;
  font-weight:400;
  color:rgba(255,255,255,0.4);
  font-style: normal;
  margin-left: 4px;
}
.tipsCtn .tipsArea{
  text-align: center;
  font-size:16px;
  color:rgba(255,255,255,0.8);
  padding-bottom: 12px;
}
</style>

<style lang="less" scoped>
  @import '~@/assets/css/home.less';
</style>

五、更多干货

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

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

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

IT-司马青衫

关注

1
点赞
踩
32

收藏

觉得还不错? 一键收藏
0
评论
基于VUE + Echarts 实现可视化数据大屏效果展示大数据

🚀 基于 vue、datav、Echart 框架的大数据可视化（大屏展示）源码，基于VUE+Echarts 制作，实现大数据可视化。通过 vue 组件实现数据动态刷新渲染，内部图表可自由替换。部分图表使用 DataV 自带组件，可自由进行更改，可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，.
复制链接

扫一扫