700字范文 > 基于VUE + Echarts 实现可视化数据大屏效果展示大数据

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

时间：2019-10-09 19:01:17

前言

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

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

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

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

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

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

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

文章目录

前言一、Echart是什么二、ECharts入门教程三、作品演示四、代码实现router.jsmain.jsApp.vuehome.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"><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-optionv-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-optionv-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><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><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><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><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><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><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}}</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}}</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"><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 = 0this.mapData.forEach((item) => {max = item.value > max ? item.value : max})return max},mapMinVal () {let min = 0if (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.lengthif (len <= 3) {return b }var r = len % 3return 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].valuereturn 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 DvalueFormat = valueFormat.replace(RegExp.$1, date[i])}})return valueFormat},// 地图取数据getMap () {let _this = thismapDatas({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.valuethis.tips.name = ev.namethis.tipsFlag = true},// 鼠标移入点图showTips2 (ev) {this.tips2.center = [ev.lng, ev.lat]this.tips2.value = ev.valuethis.tips2.name = ev.namethis.tipsFlag2 = true},setFinereportLogin () {let username = 'demo'let password = 'demo'let url = process.env.VUE_APP_FINREPORTURL// 创建iframelet scr = document.createElement('iframe')// 将报表验证用户名密码的地址指向此iframescr.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 = thislegalCaseCount().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.lengthif (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.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。