echarts报错解决

src/assets/css/index.scss

@@ -620,4 +620,8 @@
                         opacity: .2;
                     }
                 }
+            }
+            
+            .frequencyPanel {
+                text-align: center
             }

src/views/powerQuality/asseReport/scoreReportComponent/pieChart.vue

@@ -47,12 +47,12 @@ const worksChartOption: EChartOption = {
             color: 'black'
         },
         textAlign:"center",
-        x: '49%',
-        y: '40%',
+        left: '49%',
+        top: '40%',
     }],
     tooltip: {
         trigger: 'item',
-        formatter:function (parms){
+        formatter:function (parms:any){
           var str=  parms.seriesName+"</br>"+
             parms.marker+""+parms.data.legendname+"</br>"+
             "数量："+ parms.data.value+"</br>"+

src/views/powerQuality/realTimeMonitoring/loopMonitor.vue

@@ -258,11 +258,13 @@
       </el-col>
       <!-- 电压end -->
 
-
+      <!-- 频率 start-->
       <el-col :span="8">
         <frequency-panel></frequency-panel>   
-        
       </el-col>
+      <!-- 频率 end -->
+
+      
       <el-col :span="8">
         <div class="grid-content bg-purple">
           <div class="blanceChartTit">

src/views/powerQuality/realTimeMonitoring/loopMonitorComponent/frequencyPanel.vue

@@ -1,53 +1,22 @@
 <template>
-  <div>
-      <div class="grid-content bg-purple">
-          <div class="blanceChartTit">
-            <span>频率</span>
-          </div>
-          <el-row :gutter="20" style="padding: 20px">
-          
-
-            <el-col :span="24"
-              ><div
-                class="grid-content bg-purple assCard"
-                style="text-align: center"
-              >
-                <div class="subTits">电压不平衡度</div>
-                <el-row :gutter="20" style="padding: 0 20px">
-                  <el-col :span="12">
-                    <div class="grid-content bg-purple assSmallbox">
-                      <div class="assNum">0/128</div>
-                      <div class="assTxt">超限数/测点数</div>
-                    </div></el-col
-                  >
-                  <el-col :span="12">
-                    <div class="grid-content bg-purple assSmallbox">
-                      <div class="assNum greenRate">100%</div>
-                      <div class="assTxt">合格率</div>
-                    </div></el-col
-                  >
-                </el-row>
-                <el-button class="banlanceBtn" round type="primary"
-                  >合格</el-button
-                >
-                <ul>
-                  <li>
-                    <div>最大值：234.87V(6.76%)</div>
-                    <span>未超限</span>
-                  </li>
-                  <li>
-                    <div>最小值：234.87V(6.76%)</div>
-                    <span>未超限</span>
-                  </li>
-                  <li>
-                    <div>平均值：234.87V(6.76%)</div>
-                    <span>未超限</span>
-                  </li>
-                </ul>
-              </div></el-col
-            >
-          </el-row>
-        </div>
+  <div class="frequencyPanel">
+    <div class="grid-content bg-purple">
+      <div class="blanceChartTit">
+        <span>频率</span>
+      </div>
+      <div style="padding: 20px">
+        <div>当前频率 50.03hZ</div>
+        <div>频率偏差<el-button type="success" round>0.06%</el-button></div>
+        <el-row>
+            <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
+            <el-col :span="5"><div class="grid-content bg-purple-light"></div></el-col>
+            <el-col :span="5"><div class="grid-content bg-purple"></div></el-col>
+            <el-col :span="5"><div class="grid-content bg-purple-light"></div></el-col>
+            <el-col :span="5"><div class="grid-content bg-purple-light"></div></el-col>
+            <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
+        </el-row>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -104,5 +73,5 @@ export default {
 .row-bg {
   padding: 10px 0;
   border: 1px solid #f9fafc;
-} 
+}
 </style>

src/views/powerQuality/realTimeMonitoring/loopMonitorComponent/loopPieChart.vue

@@ -47,12 +47,12 @@ const worksChartOption: EChartOption = {
             color: 'black'
         },
         textAlign:"center",
-        x: '49%',
-        y: '40%',
+        left: '49%',
+        top: '40%',
     }],
     tooltip: {
         trigger: 'item',
-        formatter:function (parms){
+        formatter:function (parms:any){
           var str=  parms.seriesName+"</br>"+
             parms.marker+""+parms.data.legendname+"</br>"+
             "数量："+ parms.data.value+"</br>"+

src/views/powerQuality/realTimeMonitoring/realScoreComponent/pieChart.vue

@@ -47,12 +47,12 @@ const worksChartOption: EChartOption = {
             color: 'black'
         },
         textAlign:"center",
-        x: '49%',
-        y: '40%',
+        left: '49%',
+        top: '40%',
     }],
     tooltip: {
         trigger: 'item',
-        formatter:function (parms){
+        formatter:function (parms:any){
           var str=  parms.seriesName+"</br>"+
             parms.marker+""+parms.data.legendname+"</br>"+
             "数量："+ parms.data.value+"</br>"+

src/views/powerQuality/realTimeMonitoring/realScoreComponent/radarChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div shadow="never" class="homeBoxCard" v-loading="loading">
-    <div class="height260" ref="lineChartBanlance" />
+    <div class="height260" ref="radarChart" />
   </div>
 </template>
 <script lang="ts">
@@ -110,7 +110,7 @@ const worksChartOption: EChartOption = {
 interface WorksChartCardSetupData {
   t: (key: string | number) => string;
   loading: Ref<boolean>;
-  lineChartBanlance: Ref;
+  radarChart: Ref;
   total: ComputedRef<number>;
   num: ComputedRef<number>;
 }
@@ -131,8 +131,8 @@ export default defineComponent({
     // );
 
     // echarts 图表
-    const lineChartBanlance = ref<HTMLDivElement>();
-    const echarts = useEcharts(lineChartBanlance, worksChartOption);
+    const radarChart = ref<HTMLDivElement>();
+    const echarts = useEcharts(radarChart, worksChartOption);
     // watch([echarts, chartData], () => {
     //   if (echarts.value) {
     //     const option: EChartOption = {
@@ -167,7 +167,7 @@ export default defineComponent({
     return {
       t,
       loading,
-      lineChartBanlance,
+      radarChart,
       total,
       num,
     };