更新

src/views/course/CourseObjectives.vue

@@ -3,9 +3,10 @@ import { ref, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { id } from 'element-plus/es/locales.mjs'
 import * as echarts from 'echarts'
-import { useRoute } from 'vue-router'
+import { useRoute ,useRouter} from 'vue-router'
 import { getCourseList, addCourse, editCourse, deleteCourse, getCourseInfo } from '@/api/courseChaptersApi'
 const route = useRoute()
+const router = useRouter()
 // id ： 分目标id
 // targetId ： 选中的分类
 
@@ -144,6 +145,9 @@ const getList = async () => {
 const data = ref({})
 const courseId = ref(0)
 onMounted(async () => {
+  if (!Object.keys(route.query).length){
+   return router.push('/curriculumCenter/basicCourseInformation')
+  }
   courseId.value = route.query.id
   console.log(courseId.value);
   getList()
@@ -152,40 +156,146 @@ onMounted(async () => {
   let myChart = echarts.init(chartDom)
   let option
   option = {
-    title: {
-      text: '分目标',
-    },
-    legend: {
-      data: ['Allocated Budget', 'Actual Spending'],
+    radar: [{
+      nameGap: 20,
+      indicator: [{
+        text: '目标一\n',
+        max: 100
+      }, {
+        text: '目标五\n\n',
+        max: 100
+      }, {
+        text: '目标四\n\n',
+        max: 100
+      }, {
+        text: '目标三\n\n',
+        max: 100
+      }, {
+        text: '目标二\n\n',
+        max: 100
+      }],
+      center: ['50%', '50%'],
+      radius: 100,
+      startAngle: 90,
+      splitNumber: 6,
+      shape: 'circle',
+      name: {
+        formatter: '{value}',
+        textStyle: {
+          color: '#333333',
+          fontSize: 20,
+        },
+        gap: 60
+      },
+      splitArea: {
+        areaStyle: {
+          color: ['transparent',
+            'transparent', 'rgba(114, 172, 209, 0)',
+            'transparent', 'rgba(114, 172, 209, 0)'
+          ],
+        }
+      },
+      // 设置雷达图中间射线的颜色
+      axisLine: {
+        lineStyle: {
+          color: '#C8D9FF'
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#DADADA',
+          width: 3,
+          type: 'dashed', //dashed  solid dotted 射线类型【实线 虚线】
+        }
+      },
     },
-    radar: {
-      // shape: 'circle',
-      indicator: [
-        { name: 'Sales', max: 6500 },
-        { name: 'Administration', max: 16000 },
-        { name: 'Information Technology', max: 30000 },
-        { name: 'Customer Support', max: 38000 },
-        { name: 'Development', max: 52000 },
-        { name: 'Marketing', max: 25000 },
-      ],
+    {
+
+      nameGap: 20,
+      indicator: [{
+        text: '达成度',
+        max: 100
+      }, {
+        text: '达成度',
+        max: 100
+      }, {
+        text: '达成度',
+        max: 100
+      }, {
+        text: '达成度',
+        max: 100
+      }, {
+        text: '达成度',
+        max: 100
+      }],
+
+      center: ['50%', '50%'],
+      radius: 100,
+      startAngle: 90,
+      splitNumber: 1,
+      shape: 'circle',
+      splitArea: {
+        show: false,
+      },
+      axisLine: {
+        show: false
+      },
+      name: {
+        formatter: '{value}',
+        textStyle: {
+          color: 'rgba(0,0,0,0.4)',
+          fontSize: 18,
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#6093FF',
+          type: 'solid',
+          width: 8
+        }
+      },
     },
+    ],
     series: [
       {
-        name: 'Budget vs spending',
         type: 'radar',
+        emphasis: {
+          lineStyle: {
+            width: 50
+          }
+        },
+        symbol: 'none',
         data: [
           {
-            value: [4200, 3000, 20000, 35000, 50000, 18000],
-            name: 'Allocated Budget',
-          },
+            value: [74, 60, 80, 60, 74],
+            name: 'Data C',
+            areaStyle: {
+              color: '#DBE4F9'
+            }
+          }
+        ]
+      },
+      {
+        type: 'radar',
+        emphasis: {
+          lineStyle: {
+            width: 50
+          }
+        },
+        symbol: 'none',
+        data: [
           {
-            value: [5000, 14000, 28000, 26000, 42000, 21000],
-            name: 'Actual Spending',
+            value: [74, 60, 80, 40, 74],
+            name: 'Data B',
+            areaStyle: {
+              color: '#0052FF'
+            }
           },
-        ],
+        ]
       },
-    ],
-  }
+
+    ]
+  };
 
   option && myChart.setOption(option)
 })
@@ -295,7 +405,7 @@ const li
 
 <style lang="scss" scoped>
 #main {
-  padding: 15px;
+  padding: 10px;
   width: 100%;
   height: 100%;
 }