更新 雷达组件样式

src/components/Radar.vue

@@ -1,9 +1,9 @@
 <template>
-  <div id="radar"></div>
+  <div style="width: 100%; height: 160px" id="radar"></div>
 </template>
 
 <script>
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted, computed, inject } from "vue";
 import { mapState } from "vuex";
 
 export default {
@@ -14,7 +14,7 @@ export default {
     let radarChart = ref({});
     function init() {
       radartDom.value = document.getElementById("radar");
-      radarChart.value = echarts.init(radartDom, "dark");
+      radarChart.value = echarts.init(radartDom.value, "dark");
       radarChart.value.setOption(option.value);
     }
     function exchangeUrl(icon) {
@@ -23,8 +23,8 @@ export default {
 
     let option = ref({
       title: {},
-      legend: {},
       radar: {
+        center: ["50%", 90],
         // shape: 'circle',
         indicator: [
           { name: "数据1", max: 6500 },
@@ -38,7 +38,7 @@ export default {
           lineStyle: {
             color: "#45FAFF",
             // 坐标轴线线的颜色。
-            width: 2,
+            width: 1,
             // 坐标轴线线宽。
             type: "solid",
             // 坐标轴线线的类型。
@@ -49,7 +49,7 @@ export default {
           lineStyle: {
             color: "#45FAFF",
             // 分隔线颜色
-            width: 2,
+            width: 1,
             // 分隔线线宽
           },
         },
@@ -59,12 +59,14 @@ export default {
           areaStyle: {
             // 分隔区域的样式设置。
             color: ["rgba(250,250,250,0)", "rgba(200,200,200,0)"],
+
             // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
           },
         },
       },
       series: [
         {
+          symbolSize: 1,
           name: "Budget vs spending",
           type: "radar",
           data: [
@@ -74,12 +76,13 @@ export default {
           ],
           areaStyle: {
             // 单项区域填充样式
-            normal: {
-              color: "rgb(69,250,255)", // 填充的颜色。[ default: "#000" ]
-            },
+            color: "rgb(69,250,255)", // 填充的颜色。[ default: "#000" ]
+            opacity: 1,
           },
+          color: "#45FAFF",
         },
       ],
+      backgroundColor: "rgba(0, 0, 0, 0)",
     });
 
     onMounted(() => {