fix: 优化显示方式

src/views/risk/r6/index.vue

@@ -14,7 +14,8 @@
           </div>
         </div>
         <div class="tab-chart">
-          <div ref="chartSort" style="height: 400px"/>
+          <div ref="chartSort" :style="{height: !chartEmpty?'400px' : '0px' }"/>
+          <el-empty description="暂无数据" v-if="chartEmpty"/>
         </div>
       </div>
     </el-tabs>
@@ -31,23 +32,25 @@ import {parseTime} from "@/utils/ruoyi"
 import {onMounted} from "vue";
 import * as echarts from "echarts";
 import indexMapping from "./components/indexMapping.vue"
+
 const modelData = ref([])
 const activeName = ref('')
 const configData = ref([])
 const activeConfig = ref(null)
 const chartSort = ref(null)
 const visible = ref(false)
+const chartEmpty = ref(false)
 
 onMounted(() => {
   initConfig()
 })
 
-async function initConfig(){
+async function initConfig() {
   await getConfig()
   await getModelList()
 }
 
-function handleIMap(){
+function handleIMap() {
   visible.value = true
 }
 
@@ -77,70 +80,76 @@ function changeConfig(item) {
 
 async function getNetwork(modelId, metricsId) {
   const res = await listNetwork(modelId, metricsId)
-  res.data.length && initChart(res.data)
+  initChart(res.data)
 }
 
-function initChart(res){
+function initChart(res) {
   const myChart = echarts.init(chartSort.value);
-  const option = {
-    tooltip: {
-      trigger: 'axis'
-    },
-    legend: {
-      data: res.map(p=>p.name),
-      textStyle: {
-        color: "#849ac4"
-      }
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      top: '15%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: res[0].data.map(p=>parseTime(p.time,'{y}-{m}-{d}')),
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: "#849ac4",
-          width: 0,
+  if (res.length) {
+    chartEmpty.value = false
+    const option = {
+      tooltip: {
+        trigger: 'axis'
+      },
+      legend: {
+        data: res.map(p => p.name),
+        textStyle: {
+          color: "#849ac4"
         }
       },
-      axisTick: {
-        show: false,
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        top: '15%',
+        containLabel: true
       },
-    },
-    yAxis: {
-      type: 'value',
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: "#849ac4",
-          width: 0,
-        }
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: res[0].data.map(p => parseTime(p.time, '{y}-{m}-{d}')),
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "#849ac4",
+            width: 0,
+          }
+        },
+        axisTick: {
+          show: false,
+        },
       },
-      splitLine: {
-        lineStyle: {
-          color: "#849ac480",
-          type: 'dashed',
-        }
+      yAxis: {
+        type: 'value',
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "#849ac4",
+            width: 0,
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: "#849ac480",
+            type: 'dashed',
+          }
+        },
       },
-    },
-    series:res.map(p=>{
-      return {
-        name: p.name,
-        type: 'line',
-        smooth: true,
-        symbolSize: 0,
-        data: p.data.map(j=>j.value)
-      }
-    })
-  };
-  myChart.setOption(option)
+      series: res.map(p => {
+        return {
+          name: p.name,
+          type: 'line',
+          smooth: true,
+          symbolSize: 0,
+          data: p.data.map(j => j.value)
+        }
+      })
+    };
+    myChart.setOption(option)
+  } else {
+    chartEmpty.value = true
+    myChart.clear()
+  }
 }