422
This commit is contained in:
@@ -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 }
|
||||
|
||||
@@ -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,8 +127,12 @@
|
||||
...defaultCofig,
|
||||
...props.config
|
||||
})
|
||||
|
||||
})
|
||||
}
|
||||
}else{
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
@@ -146,5 +152,6 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,18 @@
|
||||
<!-- 客源地分析TOP5 -->
|
||||
<template>
|
||||
<div
|
||||
:id="id"
|
||||
:style="{
|
||||
width: styleUtil.px2vw(width),
|
||||
height: styleUtil.px2vh(height)
|
||||
}"
|
||||
/>
|
||||
|
||||
<div style="position:relative;">
|
||||
<div
|
||||
:id="id"
|
||||
:style="{
|
||||
width: styleUtil.px2vw(width),
|
||||
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,
|
||||
() => {
|
||||
setTimeout(() => {
|
||||
init()
|
||||
}, 1000)
|
||||
(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);
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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 }
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -131,8 +131,8 @@
|
||||
number: 0
|
||||
},
|
||||
{
|
||||
label: '行驶',
|
||||
value: '行驶',
|
||||
label: '运行',
|
||||
value: '运行',
|
||||
number: 0
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -133,8 +133,8 @@ import PubSub from 'pubsub-js'
|
||||
number: 0
|
||||
},
|
||||
{
|
||||
label: '行驶',
|
||||
value: '行驶',
|
||||
label: '运行',
|
||||
value: '运行',
|
||||
number: 0
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user