From 99d0cefca0ba2b3d5a5b07080e21a311348a3d13 Mon Sep 17 00:00:00 2001 From: ZhangXianQiang <1135831638@qq.com> Date: 星期一, 18 三月 2024 15:02:12 +0800 Subject: [PATCH] feat:考核成绩柱形图 --- src/views/screen/components/screen-examine/components/examine-chart.vue | 61 ++++++++++++++++++++++++++++++ src/views/screen/components/screen-wrapper/index.vue | 6 ++- src/views/screen/components/screen-detection/index.vue | 2 src/views/screen/components/screen-examine/index.vue | 47 +++++++++++++++++++++++ 4 files changed, 113 insertions(+), 3 deletions(-) diff --git a/src/views/screen/components/screen-detection/index.vue b/src/views/screen/components/screen-detection/index.vue index 5c8d21f..714f076 100644 --- a/src/views/screen/components/screen-detection/index.vue +++ b/src/views/screen/components/screen-detection/index.vue @@ -28,7 +28,7 @@ </template> <script> -import WrapperTitle from '../wrapper-title/index' +import WrapperTitle from '../wrapper-title/index'; export default { components: { WrapperTitle diff --git a/src/views/screen/components/screen-examine/components/examine-chart.vue b/src/views/screen/components/screen-examine/components/examine-chart.vue new file mode 100644 index 0000000..0a6b467 --- /dev/null +++ b/src/views/screen/components/screen-examine/components/examine-chart.vue @@ -0,0 +1,61 @@ +<template> + <div class="chart-container"> + <div class="rank-chart" ref="rankChart"></div> + </div> +</template> + +<script> +import * as echarts from 'echarts'; +let barChart = null; +export default { + name: 'ExamineChart', + data() { + return { + + } + }, + + methods: { + initChart() { + const options = { + xAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }, + yAxis: { + type: 'value' + }, + series: [ + { + data: [120, 200, 150, 80, 70, 110, 130], + type: 'bar' + } + ] + } + barChart.setOption(options,true); + } + }, + mounted() { + barChart = echarts.init(this.$refs.rankChart); + + this.initChart(); + }, + beforeDestroy() { + if (lineChart) { + barChart.dispose(); + } + }, + +} +</script> + +<style lang="scss" scoped> +.chart-container { + width: 100%; + height: 400px; + .rank-chart { + width: 100%; + height: 100%; + } +} +</style> \ No newline at end of file diff --git a/src/views/screen/components/screen-examine/index.vue b/src/views/screen/components/screen-examine/index.vue new file mode 100644 index 0000000..eccbc90 --- /dev/null +++ b/src/views/screen/components/screen-examine/index.vue @@ -0,0 +1,47 @@ +<template> + <div class="examine-container"> + <wrapper-title :title="'鑰冩牳鎴愮哗鏁版嵁'"></wrapper-title> + <div class="examine-content"> + <div class="examine-wrapper"> + <examine-chart></examine-chart> + </div> + </div> + </div> +</template> + +<script> +import WrapperTitle from '../wrapper-title/index'; +import ExamineChart from './components/examine-chart'; +export default { + name: 'ScreenExamine', + components: { + WrapperTitle, + ExamineChart + } +} + +</script> + +<style lang="scss" scoped> +.examine-container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} +.examine-content { + width: 100%; + flex: 1; + background: rgba(67, 102, 155, 0.3); + border: 1px solid rgba(47, 91, 157, 0.8); + padding: 20px 20px; + position: relative; + .examine-wrapper { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } +} +</style> \ No newline at end of file diff --git a/src/views/screen/components/screen-wrapper/index.vue b/src/views/screen/components/screen-wrapper/index.vue index 6c44f8e..0dbff49 100644 --- a/src/views/screen/components/screen-wrapper/index.vue +++ b/src/views/screen/components/screen-wrapper/index.vue @@ -8,7 +8,7 @@ <screen-detection></screen-detection> </div> <div class="right-container wrapper"> - + <screen-examine></screen-examine> </div> </div> </div> @@ -17,11 +17,13 @@ <script> import ScreenFace from '../screen-face/index'; import ScreenDetection from '../screen-detection/index'; +import ScreenExamine from '../screen-examine/index'; export default { name: 'ScreenWrapper', components: { ScreenFace, - ScreenDetection + ScreenDetection, + ScreenExamine, }, } </script> -- Gitblit v1.8.0