前言
🚀 基于 vue、datav、Echart 框架的大数据可视化（大屏展示）源码，基于VUE+Echarts 制作，实现大数据可视化。通过 vue 组件实现数据动态刷新渲染，内部图表可自由替换。部分图表使用 DataV 自带组件，可自由进行更改， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【作者主页——🔥获取更多优质源码】
❤ 【1000套 毕设项目精品实战案例】
❤ 【 20套 VUE+Echarts 大数据可视化源码】
❤ 【150套 HTML+ Echarts大数据可视化源码 】
文章目录
- 前言
- 一、Echart是什么
- 二、ECharts入门教程
- 三、作品演示
- 四、代码实现
- router.js
- main.js
- App.vue
- home.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)
//
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.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥
