From 9ba706f594356dc3b2315c14dd8a521426331bab Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期三, 16 八月 2023 09:03:29 +0800
Subject: [PATCH] 设置按钮加载效果
---
src/sfc/DashboardChart.vue | 145 ++++++++++++++++++++++++++++--------------------
1 files changed, 85 insertions(+), 60 deletions(-)
diff --git a/src/sfc/DashboardChart.vue b/src/sfc/DashboardChart.vue
index c9211af..e54969d 100644
--- a/src/sfc/DashboardChart.vue
+++ b/src/sfc/DashboardChart.vue
@@ -1,92 +1,117 @@
<!-- 浠〃鐩樼粍浠�
鐖剁粍浠朵紶鍏ユ暟鎹簮涓巇ata缁戝畾鍚� 鑷姩娓叉煋
鐖剁粍浠舵渶濂藉惎鍔ㄥ紓姝ョ粍浠�
+ 鍝嶅簲寮忓彉鍖栧ぇ灏�
-->
<template>
<div class="dashboard-item" ref="chartContainer"></div>
</template>
<script>
-
import * as echarts from 'echarts';
export default {
props: ['data'],
data() {
- return {
- chart: null
- }
+ return {
+ chart: null
+ };
},
// 鐖剁粍浠惰缃簡瀹炴椂鏇存柊 褰撴簮鏁版嵁鍙戠敓鍙樺寲鏄� 鐩戝惉鍒扮珛鍗虫洿鏂颁华琛ㄧ洏
- watch:{
- data(newValue){
- this.chart.setOption({
- series: [
- {
- name: '瀹炴椂鏁版嵁',
- type: 'gauge',
- detail: { formatter: '{value} mg/m鲁', fontSize : 17},
- axisLine: {
- lineStyle: { color: [[0.2, '#f45c6e'], [0.8, '#ffd854'], [1, '#57cdbd']], width: 10 }
- },
- data: [{
- value: newValue,
- name: '娌圭儫娴撳害',
- itemStyle: {
- color: newValue >= 1 ? 'red' : 'green'
- },
-
- }],
-
- max: 2
+ watch: {
+ data(newValue) {
+ this.chart.setOption({
+ series: [
+ {
+ name: '瀹炴椂鏁版嵁',
+ type: 'gauge',
+ detail: { formatter: '{value} mg/m鲁', fontSize: 17 },
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#67e0e3'],
+ [0.5, '#37a2da'],
+ [1, '#fd666d']
+ ],
+ width: 15
}
- ]
- })
- }
- },
- mounted() {
- // 椤甸潰鍔犺浇瀹屾垚鍚庤皟鐢ㄤ华琛ㄧ洏
- this.init()
+ },
+ data: [
+ {
+ value: newValue,
+ name: '娌圭儫娴撳害',
+ itemStyle: {
+ color: newValue >= 1 ? 'red' : 'green'
+ }
+ }
+ ],
+
+ max: 2
+ }
+ ]
+ });
+ }
},
- methods:{
- // 鍒濆鍖栦华琛ㄧ洏
- init(){
- this.chart = echarts.init(this.$refs.chartContainer);
+ mounted() {
+ // 椤甸潰鍔犺浇瀹屾垚鍚庤皟鐢ㄤ华琛ㄧ洏
+ this.init();
+ window.addEventListener('resize', this.updateChart);
+ },
+ methods: {
+ // 鍒濆鍖栦华琛ㄧ洏
+ init() {
+ this.chart = echarts.init(this.$refs.chartContainer);
// 璁剧疆榛樿鐨勭┖鏁版嵁浠〃鐩�
this.chart.setOption({
- // 浣犵殑浠〃鐩橀厤缃」
- series: [
- {
- name: '瀹炴椂鏁版嵁',
- type: 'gauge',
- detail: { formatter: '{value} mg/m鲁', fontSize : 17},
- axisLine: {
- lineStyle: { color: [[0.2, '#f45c6e'], [0.8, '#ffd854'], [1, '#57cdbd']], width: 10 }
- },
- data: [{
- value: this.data,
- name: '娌圭儫娴撳害',
- itemStyle: {
- color: this.data >= 1 ? 'red' : 'green'
- }
- }],
- max: 2
+ // 浣犵殑浠〃鐩橀厤缃」
+ series: [
+ {
+ name: '瀹炴椂鏁版嵁',
+ type: 'gauge',
+ detail: { formatter: '{value} mg/m鲁', fontSize: 17 },
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#67e0e3'],
+ [0.5, '#37a2da'],
+ [1, '#fd666d']
+ ],
+ width: 15
}
- ]
+ },
+ data: [
+ {
+ value: this.data,
+ name: '娌圭儫娴撳害',
+ itemStyle: {
+ color: this.data >= 1 ? 'red' : 'green'
+ }
+ }
+ ],
+ max: 2
+ }
+ ]
});
- }
+ },
+ updateChart() {
+ this.$nextTick(() => {
+ if (this.chart) {
+ this.chart.resize();
+ }
+ });
+ }
},
beforeUnmount() {
- // 閿�姣佷华琛ㄧ洏瀹炰緥
- this.chart.dispose();
+ // 閿�姣佷华琛ㄧ洏瀹炰緥
+ this.chart.dispose();
}
};
</script>
<style>
.dashboard-item {
- width: 400px;
+ width: 100%;
height: 300px;
- margin: 10px;
+ /* margin: 10px; */
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3