Sfoglia il codice sorgente

新增 雷达组件更新数据方法

wzh 4 anni fa
parent
commit
50ce237330
1 ha cambiato i file con 15 aggiunte e 7 eliminazioni
  1. 15 7
      src/components/Radar.vue

+ 15 - 7
src/components/Radar.vue

@@ -1,5 +1,7 @@
 <template>
-  <div style="width: 100%; height: 160px" id="radar"></div>
+  <div>
+    <div style="width: 100%; height: 160px" id="radar"></div>
+  </div>
 </template>
 
 <script>
@@ -19,17 +21,22 @@ export default {
       radarChart.value.setOption(option.value);
     }
 
+    function updateData(data = [300, 900, 800, 100, 700]) {
+      option.value.series[0].data[0].value = data;
+      radarChart.value.setOption(option.value);
+    }
+
     let option = ref({
       title: {},
       radar: {
         center: ["50%", 90],
         // shape: 'circle',
         indicator: [
-          { name: "数据1", max: 6500 },
-          { name: "数据2", max: 16000 },
-          { name: "数据3", max: 30000 },
-          { name: "数据4", max: 38000 },
-          { name: "数据5", max: 52000 },
+          { name: "数据1", max: 1000 },
+          { name: "数据2", max: 1000 },
+          { name: "数据3", max: 1000 },
+          { name: "数据4", max: 1000 },
+          { name: "数据5", max: 1000 },
         ],
         axisLine: {
           // (圆内的几条直线)坐标轴轴线相关设置
@@ -69,7 +76,7 @@ export default {
           type: "radar",
           data: [
             {
-              value: [4200, 3000, 20000, 35000, 50000],
+              value: [650, 300, 100, 900, 500],
             },
           ],
           areaStyle: {
@@ -91,6 +98,7 @@ export default {
     return {
       init,
       exchangeUrl,
+      updateData,
     };
   },
 };