From 60930863e57b14c4d852cdae1ec3d270e8deda95 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期二, 19 三月 2024 16:44:34 +0800
Subject: [PATCH] feat:考核数据
---
src/views/screen/components/screen-examine/components/examine-chart.vue | 74 ++++++++++-------
src/views/screen/components/screen-examine/components/examine-hola.vue | 157 +++++++++++++++++++++++++++++++++++++++
src/views/screen/components/screen-examine/index.vue | 5
3 files changed, 203 insertions(+), 33 deletions(-)
diff --git a/src/views/screen/components/screen-examine/components/examine-chart.vue b/src/views/screen/components/screen-examine/components/examine-chart.vue
index 0a6b467..3146d3d 100644
--- a/src/views/screen/components/screen-examine/components/examine-chart.vue
+++ b/src/views/screen/components/screen-examine/components/examine-chart.vue
@@ -1,61 +1,73 @@
<template>
<div class="chart-container">
- <div class="rank-chart" ref="rankChart"></div>
+ <div class="rank-chart">
+ <div class="hola-item" v-for="item in dataList" :key="item.id">
+ <examine-hola :startColor="'#02C77E'" :endColor="'#017770'" :centerValue="item.value"
+ :bottomTitle="item.name"></examine-hola>
+ </div>
+ </div>
</div>
</template>
<script>
import * as echarts from 'echarts';
+import ExamineHola from './examine-hola.vue';
let barChart = null;
export default {
name: 'ExamineChart',
+ components: {
+ ExamineHola
+ },
data() {
return {
-
+ dataList: [
+ {id: 1,name: '骞冲彴鍦ㄧ嚎鐜�', value: 60},
+ {id: 2,name: '涓�鏈轰竴妗ｅ悎鏍肩巼', value: 20},
+ {id: 3,name: '妗ｆ鑰冩牳姣�', value: 60},
+ {id: 4,name: '鐐逛綅鍦ㄧ嚎鐜�', value: 40},
+ {id: 5,name: '褰曞儚鍙敤鐜�', value: 80},
+ {id: 6,name: '閲嶇偣鐐逛綅褰曞儚鍙敤鐜�', value: 20},
+ {id: 7,name: '鏍囨敞姝ｇ‘鐜�', value: 24},
+ {id: 8,name: '瑙嗗浘搴撳鎺ョǔ瀹氭��', value: 25},
+ {id: 9,name: '淇℃伅閲囬泦鍑嗙‘鐜�', value: 75},
+ {id: 10,name: '杞﹁締鍗″彛璁惧鏃堕挓鍑嗙‘鎬�', value: 12},
+ {id: 11,name: '璁惧鎶撴媿鍥剧墖鏃堕挓鍑嗙‘鎬�', value: 82},
+ {id: 12,name: '浜鸿劯鍗″彛淇℃伅閲囬泦鍑嗙‘鐜�', value: 13},
+ {id: 13,name: '璁惧鎶撴媿鍥剧墖鍚堟牸鎬�', value: 91},
+ {id: 14,name: '璁惧鎶撴媿鍥剧墖鏃堕挓鍑嗙‘鎬�', value: 12},
+ {id: 15,name: '骞冲彴鍦ㄧ嚎鐜�', value: 42},
+ ]
}
},
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;
+ height: 100%;
+
.rank-chart {
width: 100%;
height: 100%;
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ align-content: space-between;
+
+ .hola-item {
+ flex-shrink: 0;
+ width: 180px;
+ height: 150px;
+ color: #008000
+ }
}
}
</style>
\ No newline at end of file
diff --git a/src/views/screen/components/screen-examine/components/examine-hola.vue b/src/views/screen/components/screen-examine/components/examine-hola.vue
new file mode 100644
index 0000000..e034ab7
--- /dev/null
+++ b/src/views/screen/components/screen-examine/components/examine-hola.vue
@@ -0,0 +1,157 @@
+<template>
+ <!-- 杩涘害鏉＄被鍨嬬粍浠� -->
+ <div class="progressChart">
+ <div class="chart" id="progressChart" ref="chartRef"></div>
+ <label class="bottom le-0-font">{{ bottomTitle }}</label>
+ </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+export default {
+ data() {
+ return {
+ series: [
+ {
+ type: 'gauge', // 浠〃鐩樼被鍨�
+ name: '绯诲垪鍚嶇О', // 鐢ㄤ簬tooltip鐨勬樉绀�
+ startAngle: 90, // 浠〃鐩樺紑濮嬭搴︼紙璁剧疆鑳屾櫙鍦嗙殑瑙掑害锛�
+ endAngle: -270, // 浠〃鐩樼粨鏉熻搴�
+ center: ['50%', '50%'], // 涓績鐐癸紙鍦嗗績鍧愭爣锛�
+ radius: '100%', // 鍦嗗ぇ灏忥紙浠〃鐩樺崐寰勶級
+ clockwise: true, // 浠〃鐩樺埢搴︽槸鍚︽槸椤烘椂閽堝闀�
+ // 浠〃鐩樿酱绾跨浉鍏抽厤缃�
+ axisLine: {
+ show: true,
+ roundCap: false, // 涓ょ鏄剧ず鎴愬渾褰紙鑳屾櫙鐜級
+ clip: false, // 鏄惁瑁佸壀瓒呭嚭閮ㄥ垎
+ // 璁剧疆鑳屾櫙鍦嗙幆鏍峰紡
+ lineStyle: {
+ width: 10, // 鍦嗙幆瀹藉害
+ color: [[1, '#002865']] // 鍦嗙幆鑳屾櫙鑹�
+ }
+ },
+ // 浠〃鐩樻寚閽�
+ pointer: {
+ show: false
+ },
+ // 杩涘害璁剧疆
+ progress: {
+ show: true,
+ overlap: false, // 澶氱粍鏁版嵁鏃惰繘搴︽潯鏄惁閲嶅彔
+ roundCap: true, // 鏄惁鍦ㄤ袱绔樉绀烘垚鍦嗗舰
+ clip: false, // 鏄惁瑁佹帀瓒呭嚭閮ㄥ垎
+ // 杩涘害鏉℃牱寮�
+ itemStyle: {
+ borderWidth: 0,
+ shadowColor: '',
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: this.startColor // 0% 澶勭殑棰滆壊 '#02C77E'
+ },
+ {
+ offset: 1,
+ color: this.endColor // 100% 澶勭殑棰滆壊 '#017770'
+ }
+ ],
+ global: false // 缂虹渷涓� false
+ }
+ }
+ },
+ // 浠〃鐩樺垎鍓茬嚎
+ splitLine: {
+ show: false
+ },
+ // 鍒诲害鏍峰紡
+ axisTick: {
+ show: false
+ },
+ // 鍒诲害鏍囩
+ axisLabel: {
+ show: false
+ },
+ title: {
+ show: false,
+ fontSize: 24
+ },
+ detail: {
+ // width: 50,
+ // height: 14,
+ fontSize: 14,
+ color: 'auto'
+ },
+ data: [
+ {
+ value: this.centerValue,
+ name: '345',
+ title: {},
+ detail: {
+ // 涓績title璁剧疆
+ offsetCenter: ['0%', '0%'],
+ color: '#01F8FF',
+ formatter: '{value}%'
+ // borderColor: '#01F8FF',
+ // borderRadius: 20,
+ // borderWidth: 1,
+ }
+ }
+ ],
+ }
+ ]
+ }
+ },
+ setup() { },
+ props: {
+ startColor: {
+ type: String,
+ default: ''
+ },
+ endColor: {
+ type: String,
+ default: ''
+ },
+ centerValue: {
+ type: [Number, String],
+ default: 0
+ },
+ bottomTitle: {
+ type: String,
+ default: ''
+ }
+ },
+ methods: {},
+ created() { },
+ mounted() {
+ let myChart = echarts.init(this.$refs['chartRef']) // 浣跨敤Id鏃犳硶瀹炵幇
+ myChart.setOption({
+ series: this.series
+ })
+ }
+}
+</script>
+<style lang="scss" scoped>
+.progressChart {
+ width: 100%;
+ height: 100%;
+
+ .chart {
+ width: 100%;
+ height: 75%;
+ }
+
+ .bottom {
+ display: inline-block;
+ width: 100%;
+ color: #01f8ff;
+ text-align: center;
+ font-size: 16px;
+ margin-top: 10px;
+ }
+}
+</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
index 9240013..5447573 100644
--- a/src/views/screen/components/screen-examine/index.vue
+++ b/src/views/screen/components/screen-examine/index.vue
@@ -1,10 +1,10 @@
<template>
<div class="examine-container">
- <wrapper-title :title="'鑰冩牳鎴愮哗鏁版嵁'"></wrapper-title>
+ <wrapper-title :title="'鑰冩牳鏁版嵁'"></wrapper-title>
<div class="examine-content">
<div class="examine-wrapper">
- <examine-table class="wrapper-item"></examine-table>
<examine-chart class="wrapper-item"></examine-chart>
+ <!-- <examine-table class="wrapper-item"></examine-table> -->
</div>
</div>
</div>
@@ -39,6 +39,7 @@
position: relative;
.examine-wrapper {
+ position: absolute;
width: 100%;
height: 100%;
display: flex;
--
Gitblit v1.8.0