VUE + Echarts 实现可视化数据大屏效果展示大数据
@码住夏天-web网页设计
帮助1人
前言
🚀 基于 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 = falseVue.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.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhghfjij
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13
