This commit is contained in:
duanliang
2025-04-23 02:00:16 +08:00
parent 5ce6f4c899
commit cc43098ca7
12 changed files with 114 additions and 33 deletions

View File

@@ -4,7 +4,8 @@
:id="id"
:style="{
width: styleUtil.px2vw(width),
height: styleUtil.px2vh(height)
height: styleUtil.px2vh(height),
opacity:data.length?1:0,
}"
/>
<div v-if="condShow==0" class="nYong-du">加载中...</div>
@@ -172,7 +173,7 @@
[() => props.data, () => props.xAxisData],
(val) => {
aIndex+=1
if(aIndex>=3&&!val[0].length){
if(aIndex>=3&&!val[0][0].data.length){
condShow.value = 1
}
if (val[0].length > 0 && val[1].length > 0) {
@@ -181,7 +182,7 @@
init()
}, 1000)
}else{
// condShow.value = 1
}
},
{ immediate: true }

View File

@@ -4,7 +4,8 @@
:id="id"
:style="{
width: styleUtil.px2vw(width),
height: styleUtil.px2vh(height)
height: styleUtil.px2vh(height),
opacity:dataList.length?1:0,
}"
/>
<div v-if="condShow==0" class="nYong-du">加载中...</div>
@@ -47,7 +48,7 @@
}
})
const { id, setOption } = useEchart()
const { id, setOption,chartVal,dispose ,clearOption} = useEchart()
var colorList = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
@@ -106,6 +107,7 @@
watch(
() => props.dataList,
(newVal) => {
console.log(chartVal.value,newVal,'newValnewValnewValnewValnewVal')
aIndex+=1
if(aIndex>=3&&!newVal.length){
condShow.value = 1
@@ -125,7 +127,11 @@
...defaultCofig,
...props.config
})
})
}else{
}
},
{ immediate: true }
@@ -146,5 +152,6 @@
display: flex;
align-items: center;
justify-content: center;
}
</style>

View File

@@ -1,12 +1,18 @@
<!-- 客源地分析TOP5 -->
<template>
<div style="position:relative;">
<div
:id="id"
:style="{
width: styleUtil.px2vw(width),
height: styleUtil.px2vh(height)
height: styleUtil.px2vh(height),
opacity:list.length?1:0,
}"
/>
<div v-if="condShow==0" class="nYong-du">加载中...</div>
<div v-if="condShow==1" class="nYong-du">暂无数据</div>
</div>
</template>
<script setup>
@@ -31,13 +37,21 @@
const { id, setOption } = useEchart()
let params = null
let condShow = ref(0)
let aIndex = 1
watch(
() => props.list,
() => {
(val) => {
aIndex+=1
if(aIndex>=3&&!val.length){
condShow.value = 1
}
if (val.length > 0) {
setTimeout(() => {
init()
}, 1000)
}
},
{
immediate: true
@@ -165,6 +179,19 @@
</script>
<style scoped lang="scss">
.nYong-du{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
font-size:vw(18);
// color:#999;
color:#02f9fa;
display: flex;
align-items: center;
justify-content: center;
}
.top {
width: vw(250);
height: vh(366);

View File

@@ -6,7 +6,8 @@
:id="id"
:style="{
width: styleUtil.px2vw(width),
height: styleUtil.px2vh(height)
height: styleUtil.px2vh(height),
opacity:list.length?1:0,
}"
/>
<div v-if="condShow==0" class="nYong-du">加载中...</div>
@@ -42,7 +43,8 @@
watch(
() => props.list,
(val) => {
if(aIndex>=3&&!newVal.length){
aIndex+=1
if(aIndex>=3&&!val.length){
condShow.value = 1
}
if (val.length > 0) {

View File

@@ -4,14 +4,22 @@ import { guid } from '@/utils/util'
export function useEchart() {
let chart = null
let chartVal = ref(null)
let id = ref(guid())
const initChart = () => {
const dom = document.getElementById(id.value)
chart = echarts.init(dom)
chartVal.value = chart
}
const setOption = (params, update = false) => {
chart.setOption(params, update)
}
const clearOption = () => {
// 将series设置为空数组可以清空图表内容
chart.setOption({
series:[]
})
}
const dispose = () => {
chart.dispose()
chart = null
@@ -25,5 +33,5 @@ export function useEchart() {
window.addEventListener('resize', resize)
})
return { id, chart, setOption, dispose, initChart }
return { id, chart, setOption, dispose, initChart,chartVal,clearOption }
}

View File

@@ -27,7 +27,7 @@
<img class="icon" src="@/assets/images/icon-4.png" alt="" />
<div>
<countup :end-val="homeStore.trafficInfoData.info.zdydsc" />
<div class="label">最大拥堵时长 </div>
<div class="label">最大拥堵时长(分钟) </div>
</div>
</div>
</div>

View File

@@ -1,7 +1,9 @@
<!-- 拥堵次数占比 -->
<template>
<div style="position: relative;">
<div class="jam-count" :id="id" />
<div class="jam-count" :style="{
opacity:list.length?1:0,
}" :id="id" />
<div v-if="condShow==0" class="nYong-du">加载中...</div>
<div v-if="condShow==1" class="nYong-du">{{text}}</div>
</div>
@@ -81,7 +83,8 @@
itemGap: fitChartSize(6),
formatter: (name) => {
let obj = props.list.find((item) => item.name == name)
return '{name|' + name + '} {value|' + obj?.count + '}{value|%}'
console.log(obj,'5555555555555555555')
return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
},
textStyle: {
rich: {

View File

@@ -1,7 +1,9 @@
<template>
<!-- 拥堵时长 -->
<div style="position:relative;">
<div class="jam" :id="id" />
<div class="jam" :style="{
opacity:list.length?1:0,
}" :id="id" />
<div v-if="condShow==0" class="nYong-du">加载中...</div>
<div v-if="condShow==1" class="nYong-du">{{text}}</div>
</div>

View File

@@ -131,8 +131,8 @@
number: 0
},
{
label: '行',
value: '行',
label: '行',
value: '行',
number: 0
},
{

View File

@@ -5,7 +5,8 @@
:id="id"
:style="{
width: styleUtil.px2vw(width),
height: styleUtil.px2vh(height)
height: styleUtil.px2vh(height),
opacity:list.length?1:0,
}"
/>
<div v-if="condShow==0" class="nYong-du">加载中...</div>

View File

@@ -1,6 +1,13 @@
<!-- 交通负载 -->
<template>
<div class="traffic-flow" :id="id" />
<div style="position: relative;">
<div class="traffic-flow" :style="{
opacity:list.length?1:0,
}" :id="id" />
<div v-if="condShow==0" class="nYong-du">加载中...</div>
<div v-if="condShow==1" class="nYong-du">{{text}}</div>
</div>
</template>
<script setup>
@@ -13,14 +20,24 @@
list: {
type: Array,
default: () => []
},
text:{
type: String,
default: '暂无数据'
}
})
let condShow = ref(0)
let aIndex = 1
watch(
() => props.list,
(val) => {
aIndex+=1
if(aIndex>=3&&!val.length){
condShow.value = 1
}
if (val.length) {
setTimeout(() => {
condShow.value = 2
init()
}, 1000)
}
@@ -126,6 +143,19 @@
</script>
<style scoped lang="scss">
.nYong-du{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
font-size:vw(18);
// color:#999;
color:#02f9fa;
display: flex;
align-items: center;
justify-content: center;
}
.traffic-flow {
width: vw(260);
height: vh(300);

View File

@@ -133,8 +133,8 @@ import PubSub from 'pubsub-js'
number: 0
},
{
label: '行',
value: '行',
label: '行',
value: '行',
number: 0
},
{