实时数据-数据更新闪动问题修改

src/components/echarts/MyEchart.vue

@@ -20,7 +20,7 @@ const config = useConfig()
 color[0] = config.layout.elementUiPrimary[0]
 const chartRef = ref<HTMLDivElement>()
 
-const props = defineProps(['options','isInterVal'])
+const props = defineProps(['options', 'isInterVal', 'pieInterVal'])
 let chart: echarts.ECharts | any = null
 const resizeHandler = () => {
     // 不在视野中的时候不进行resize
@@ -33,8 +33,8 @@ const resizeHandler = () => {
     })
 }
 const initChart = () => {
-    if(!props.isInterVal){
+    if (!props.isInterVal && !props.pieInterVal) {
-         chart?.dispose()
+        chart?.dispose()
     }
     // chart?.dispose()
     chart = echarts.init(chartRef.value as HTMLDivElement)
@@ -111,6 +111,7 @@ const initChart = () => {
     handlerBar(options)
     // 处理柱状图
     chart.setOption(options)
+
     setTimeout(() => {
         chart.resize()
     }, 0)
@@ -146,7 +147,7 @@ const handlerYAxis = () => {
         nameTextStyle: {
             color: '#000'
         },
-        splitNumber:5,
+        splitNumber: 5,
         minInterval: 1,
         axisLine: {
             show: true,
@@ -158,7 +159,7 @@ const handlerYAxis = () => {
             color: '#000',
             fontSize: 14,
             formatter: function (value) {
-                return value.toFixed(0); // 格式化显示为一位小数
+                return value.toFixed(0) // 格式化显示为一位小数
             }
         },
         splitLine: {
@@ -168,8 +169,7 @@ const handlerYAxis = () => {
                 type: 'dashed',
                 opacity: 0.5
             }
-        },
+        }
-
     }
     // props.options?.xAxis 是数组还是对象
     if (Array.isArray(props.options?.yAxis)) {
@@ -199,11 +199,9 @@ const handlerXAxis = () => {
             // textStyle: {
             fontFamily: 'dinproRegular',
             color: '#000',
-            fontSize: '12',
+            fontSize: '12'
             // }
-      
         }
-        
     }
     // props.options?.xAxis 是数组还是对象
     if (Array.isArray(props.options?.xAxis)) {
@@ -244,7 +242,7 @@ onBeforeUnmount(() => {
 watch(
     () => props.options,
     (newVal, oldVal) => {
-            initChart()
+        initChart()
     }
 )
 </script>

src/views/govern/device/control/tabs/realtime.vue

@@ -4,20 +4,32 @@
             <!-- 左侧仪表盘 -->
             <div class="view_top_left">
                 <div class="left_charts_title">电压有效值(kV)</div>
-                <div class="left_charts"><MyEchart ref="pieChart1" :options="echartsDataV1"></MyEchart></div>
+                <div class="left_charts">
-                <div class="left_charts"><MyEchart ref="pieChart2" :options="echartsDataV2"></MyEchart></div>
+                    <MyEchart :pieInterVal="true" ref="pieChart1" :options="echartsDataV1"></MyEchart>
-                <div class="left_charts"><MyEchart ref="pieChart3" :options="echartsDataV3"></MyEchart></div>
+                </div>
+                <div class="left_charts">
+                    <MyEchart :pieInterVal="true" ref="pieChart2" :options="echartsDataV2"></MyEchart>
+                </div>
+                <div class="left_charts">
+                    <MyEchart :pieInterVal="true" ref="pieChart3" :options="echartsDataV3"></MyEchart>
+                </div>
             </div>
             <div class="view_top_mid">
                 <div class="mid_charts_title">基波电压/电流幅值(相位)</div>
-                <div class="mid_charts"><MyEchart :options="echartsData1"></MyEchart></div>
+                <div class="mid_charts"><MyEchart :pieInterVal="true" :options="echartsData1"></MyEchart></div>
             </div>
             <!-- 右侧仪表盘 -->
             <div class="view_top_right">
                 <div class="right_charts_title">电流有效值(A)</div>
-                <div class="right_charts"><MyEchart ref="pieChart4" :options="echartsDataA1"></MyEchart></div>
+                <div class="right_charts">
-                <div class="right_charts"><MyEchart ref="pieChart5" :options="echartsDataA2"></MyEchart></div>
+                    <MyEchart :pieInterVal="true" ref="pieChart4" :options="echartsDataA1"></MyEchart>
-                <div class="right_charts"><MyEchart ref="pieChart6" :options="echartsDataA3"></MyEchart></div>
+                </div>
+                <div class="right_charts">
+                    <MyEchart :pieInterVal="true" ref="pieChart5" :options="echartsDataA2"></MyEchart>
+                </div>
+                <div class="right_charts">
+                    <MyEchart :pieInterVal="true" ref="pieChart6" :options="echartsDataA3"></MyEchart>
+                </div>
             </div>
         </div>
         <div class="view_bot">
@@ -178,7 +190,9 @@ const initRadioCharts = () => {
             tooltip: {
                 formatter: '{a} <br/>{c} {b}'
             },
-            legend: [],
+            legend: {
+                show: false
+            },
             series: [
                 // 外圈电压 内圈电流
                 {
@@ -456,6 +470,7 @@ const init = () => {
                     //数值位置
                     detail: {
                         fontSize: 12,
+                        valueAnimation: true,
                         formatter: '{value}',
                         offsetCenter: ['0%', '25%']
                     },
@@ -490,7 +505,6 @@ const columnsData: any = ref([])
 const getColumns = () => {
     getRealTimeTableList().then(res => {
         columnsData.value = res.data
-        console.log(dataList.value, '+++++++++++++++++++++++++446')
         getTableData(dataList.value)
     })
 }
@@ -498,12 +512,10 @@ const getColumns = () => {
 const columnsDataTop: any = ref([])
 const columnsDataBot: any = ref([])
 const getTableData = (list: any) => {
-    console.log(list, '+++++++++++')
     loading.value = true
     tableData.value = list
     columnsDataTop.value = []
     columnsDataBot.value = []
-    console.log('🚀 ~ columnsData.value.map ~ columnsData.value:', columnsData.value)
 
     columnsData.value.map((item: any, index: any) => {
         item.map((vv: any) => {
@@ -526,14 +538,11 @@ const vRadioList: any = ref([])
 
 const realData = ref<any>({})
 const realList = ref<any>([])
-console.log(realData.value, '++++++++++++++++++++++757')
 const setRealData = (val: any) => {
-    console.log(val, '实时数据')
     realData.value = val
     realList.value = [val]
     initRadioCharts()
     //新的
-    console.log(realData.value, '--99--88--77')
     echartsDataV1.value.options.series[0].data = [
         {
             name: 'A相',
@@ -630,7 +639,7 @@ onMounted(() => {
                 height: 80%;
                 position: absolute;
                 top: 20%;
-                bottom:10px;
+                bottom: 10px;
             }
         }