4.22

src/components/TicketSource/index.vue

@@ -1,12 +1,17 @@
 <!-- 购买来源 -->
 <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)
+  	  }"
+  	/>
+  	<div v-if="condShow==0" class="nYong-du">加载中...</div>
+  	<div v-if="condShow==1" class="nYong-du">暂无数据</div>
+  </div>
 </template>
 
 <script setup>
@@ -32,12 +37,17 @@
   })
 
   let params = null
-
+	let condShow = ref(0)
+	let aIndex = 1
   watch(
     () => props.list,
     (val) => {
+		if(aIndex>=3&&!newVal.length){
+			  condShow.value = 1
+		}
       if (val.length > 0) {
         setTimeout(() => {
+			condShow.value = 2
           init()
         }, 1000)
       }
@@ -48,18 +58,21 @@
   )
 
   const getSeriesData = () => {
+	  console.log(props.list,'props.listprops.listprops.list')
     return props.list.map((item) => {
-      return {
-        type: 'bar',
-        name: item.name,
-        clockwise: false,
-        silent: true,
-        roundCap: true,
-        barWidth: '13%',
-        showBackground: true,
-        coordinateSystem: 'polar',
-        data: [item.value]
-      }
+		item.value?item.value:0;
+		return {
+		  type: 'bar',
+		  name: item.name,
+		  clockwise: false,
+		  silent: true,
+		  roundCap: true,
+		  barWidth: '13%',
+		  showBackground: true,
+		  coordinateSystem: 'polar',
+		  data: [item.value]
+		}
+      
     })
   }
 
@@ -75,7 +88,11 @@
           itemGap: fitChartSize(6),
           formatter: function (name) {
             let obj = props.list.find((item) => item.name == name)
-            return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
+			if(obj?.value){
+				obj.value?obj.value:0;
+				return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
+			}
+		
           },
           textStyle: {
             rich: {
@@ -114,7 +131,8 @@
         },
         series: getSeriesData()
       }
-    } else {
+    } 
+	else {
       params.series = getSeriesData()
     }
     setOption(params)
@@ -122,6 +140,20 @@
 </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;
+	}
   .legend {
     display: flex;
     align-items: center;