From 104e60913624bad05979d1827334b3b1694353cb Mon Sep 17 00:00:00 2001
From: whyczyk <525500596@qq.com>
Date: 星期二, 23 三月 2021 17:15:30 +0800
Subject: [PATCH] 新模块添加
---
src/components/charts/AcInput.vue | 154 +++++++++++++++++++++++++--------------------------
1 files changed, 76 insertions(+), 78 deletions(-)
diff --git a/src/components/charts/AcInput.vue b/src/components/charts/AcInput.vue
index dea80b1..9c51e2a 100644
--- a/src/components/charts/AcInput.vue
+++ b/src/components/charts/AcInput.vue
@@ -4,51 +4,46 @@
<div class="echarts-text-wrapper">
<div class="color-strip" :style="{'backgroundColor':resColor}"></div>
<div class="echarts-text">
- 鐔斾笣鍛婅
+ {{title}}
</div>
</div>
</div>
</template>
<script>
-import * as echarts from "echarts";
+ import * as echarts from "echarts";
-export default {
- name: "AcInput",
- chart: "",
- chartData: "",
- props: {
- acColor: {
- type:String,
- default: "#813a74"
+ export default {
+ name: "AcInput",
+ chart: "",
+ chartData: "",
+ data() {
+ return {
+ acColor: '#813a74',
+ resColor: '#ff649d',
+ title: ''
+ }
},
- resColor: {
- type:String,
- default: "#ff649d"
- },
- },
- data() {
- return {}
- },
- methods: {
- setOption(opt) {
- this.$options.chart.setOption(opt);
- },
- setData(value) {
- let acColor = this.acColor;
- let resColor = this.resColor;
- let option = {
- title: {
- text: value+'%',
- x: 'center',
- y: 'center',
- textStyle: {
- color: "#fff",
- fontSize: 40,
- }
- },
- series: [
- {
+ methods: {
+ setOption(opt) {
+ this.$options.chart.setOption(opt);
+ },
+ setData(sendData) {
+ this.$options.chartData = sendData;
+ this.acColor = sendData.acColor;
+ this.resColor = sendData.resColor;
+ this.title = sendData.title;
+ let option = {
+ title: {
+ text: sendData.data + '%',
+ x: 'center',
+ y: 'center',
+ textStyle: {
+ color: "#fff",
+ fontSize: 40,
+ }
+ },
+ series: [{
name: "",
type: 'gauge',
radius: '90%',
@@ -68,10 +63,10 @@
width: 40,
color: [
[
- value / 100, acColor
+ sendData.data / 100, this.acColor
],
[
- 1, resColor
+ 1, this.resColor
]
]
}
@@ -94,53 +89,56 @@
}
},
data: [{
- value: value,
+ value: sendData,
name: '骞村敭鐢甸噺鎯呭喌'
}]
+ }]
+ };
+
+ // 璁剧疆閰嶇疆椤�
+ this.setOption(option);
+ },
+ resize() {
+ setTimeout(() => {
+ this.$options.chart.resize();
+ if (JSON.stringify(this.$options.chartData) != '{}') {
+ this.setData(this.$options.chartData);
}
- ]
- };
-
- // 璁剧疆閰嶇疆椤�
- this.setOption(option);
+ }, 300)
+ }
},
- resize() {
- this.setData(this.$options.chartData);
- this.$options.chart.resize();
- }
- },
- mounted() {
- // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
- this.$options.chart = echarts.init(this.$refs.chart);
- let value = 10;
- this.setData(value);
+ mounted() {
+ // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
+ this.$options.chart = echarts.init(this.$refs.chart);
- window.addEventListener('resize', this.resize);
- },
- destroyed() {
- window.removeEventListener('resize', this.resize);
+ window.addEventListener('resize', this.resize);
+ },
+ destroyed() {
+ window.removeEventListener('resize', this.resize);
+ }
}
-}
</script>
<style scoped>
-.echarts-text-wrapper {
- position: absolute;
- top: 56%;
- left: 22.5%;
- width: 55%;
- text-align: center;
-}
-.color-strip {
- height: 4px;
-}
-.echarts-text {
- display: inline-block;
- margin-top: 8px;
- padding: 8px 32px;
- background-color: #083880;
- border: 1px solid #01b1e0;
- border-radius: 16px;
+ .echarts-text-wrapper {
+ position: absolute;
+ top: 56%;
+ left: 22.5%;
+ width: 55%;
+ text-align: center;
+ }
-}
+ .color-strip {
+ height: 4px;
+ }
+
+ .echarts-text {
+ display: inline-block;
+ margin-top: 8px;
+ padding: 8px 20px;
+ background-color: #083880;
+ border: 1px solid #01b1e0;
+ border-radius: 16px;
+ font-size: 12px;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.1