diff --git a/src/views/course/CourseObjectives.vue b/src/views/course/CourseObjectives.vue index 23f10a8..ffe0644 100644 --- a/src/views/course/CourseObjectives.vue +++ b/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