实时趋势折线图闪动问题修改

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'])
+const props = defineProps(['options','isInterVal'])
 let chart: echarts.ECharts | any = null
 const resizeHandler = () => {
     // 不在视野中的时候不进行resize
@@ -33,8 +33,10 @@ const resizeHandler = () => {
     })
 }
 const initChart = () => {
-    chart?.dispose()
+    if(!props.isInterVal){
-
+         chart?.dispose()
+    }
+    // chart?.dispose()
     chart = echarts.init(chartRef.value as HTMLDivElement)
     const options = {
         title: {
@@ -242,7 +244,7 @@ onBeforeUnmount(() => {
 watch(
     () => props.options,
     (newVal, oldVal) => {
-        initChart()
+            initChart()
     }
 )
 </script>

src/views/govern/device/control/tabs/components/harmonicSpectrum.vue

@@ -38,7 +38,7 @@
                         })?.name
                     }}
                 </p> -->
-                <MyEchart :ref="setChildRef(index)" :options="item.echartsData"></MyEchart>
+                <MyEchart :ref="setChildRef(index)" :options="item.echartsData" :isInterVal="true"></MyEchart>
             </div>
         </div>
     </div>
@@ -389,6 +389,7 @@ const init = () => {
             item.echartsData.options.series.push({
                 name: zz.phase,
                 type: 'line',
+                increment: true,
                 barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                 itemStyle: {
                     // normal: {

src/views/govern/device/control/tabs/components/realtrend.vue

@@ -48,7 +48,7 @@
                     </div>
                     <div class="tab_info" v-if="Object.keys(tableData).length != 0">
                         <div class="charts">
-                            <MyEchart ref="barCharts" :options="echartsData"></MyEchart>
+                            <MyEchart ref="barCharts" :options="echartsData" :isInterVal="true"></MyEchart>
                         </div>
                     </div>
                     <el-empty v-else style="margin: 0 auto" />

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

@@ -169,7 +169,7 @@ const initRadioCharts = () => {
     echartsData1.value = {
         options: {
             grid: {
-                top: 230
+                top: 0
             },
             title: {
                 text: '',
@@ -624,9 +624,13 @@ onMounted(() => {
             border: 1px solid #eee;
             margin: 0 10px;
             padding: 10px;
+            position: relative;
             .mid_charts {
                 width: 100%;
-                height: 100%;
+                height: 80%;
+                position: absolute;
+                top: 20%;
+                bottom:10px;
             }
         }