From 47519ea9fd53705418a6c83ea40ae1cfecb26ae3 Mon Sep 17 00:00:00 2001
From: gongchunyi <deslre0381@gmail.com>
Date: 星期二, 13 一月 2026 17:54:15 +0800
Subject: [PATCH] 合格率统计重构：物料属性分类查询各自的合格率饼图及对应的柱状图以和详情表格
---
src/components/echarts/echarts.vue | 46 +++++++++++++++++++++++++++++++++++++++-------
1 files changed, 39 insertions(+), 7 deletions(-)
diff --git a/src/components/echarts/echarts.vue b/src/components/echarts/echarts.vue
index 7b8e67c..8e72a2e 100644
--- a/src/components/echarts/echarts.vue
+++ b/src/components/echarts/echarts.vue
@@ -18,13 +18,13 @@
chartStyle: {
type: Object,
default: () => ({
- height: '80%',
+ height: '95%',
width: '100%'
})
},
dataset: {
type: Object,
- default: () => {}
+ default: () => { }
},
xAxis: {
type: Array,
@@ -52,11 +52,15 @@
},
lineColors: {
type: Array,
- default: () => ['#00BAFF', '#3DE7C9', '#CCEDF0', '#FFB71C', '#FF5A5A']
+ default: () => ['#A4EEDA', '#86C1F4', '#91A0FC', '#F6C18B', '#F09595']
},
barColors: {
type: Array,
- default: () => ['#ff8800', '#3DE7C9', '#CCEDF0', '#FFB71C', '#FF5A5A']
+ default: () => ['#A4EEDA', '#86C1F4', '#91A0FC', '#F6C18B', '#F09595']
+ },
+ pieColors: {
+ type: Array,
+ default: () => ['#A4EEDA', '#86C1F4', '#91A0FC', '#F6C18B', '#F09595']
},
loadingOption: {
type: Object,
@@ -77,8 +81,8 @@
watch: {
options: {
deep: true,
- // immediate: true,
- handler(val) {
+ // immediate: true,
+ handler(val) {
this.$nextTick(() => {
this.renderChart()
})
@@ -157,6 +161,15 @@
},
},
barColors: {
+ deep: true,
+ // immediate: true,
+ handler(val) {
+ this.$nextTick(() => {
+ this.renderChart()
+ })
+ },
+ },
+ pieColors: {
deep: true,
// immediate: true,
handler(val) {
@@ -185,6 +198,7 @@
},
renderChart() {
const option = {
+ ...this.options,
backgroundColor: this.options.backgroundColor || '#fff',
xAxis: this.xAxis,
yAxis: this.yAxis,
@@ -217,7 +231,6 @@
})
}
this.chartInstance.clear()
-
// 娓叉煋鍥捐〃
this.chartInstance.setOption(option)
},
@@ -228,7 +241,26 @@
this.chartInstance.dispose()
this.chartInstance = null
}
+ },
+
+ // 涓嬭浇鍥剧墖鍔熻兘
+ downloadImage(fileName = 'chart') {
+ if (!this.chartInstance) return;
+
+ const url = this.chartInstance.getDataURL({
+ type: 'png',
+ pixelRatio: 2,
+ backgroundColor: '#fff'
+ });
+
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `${fileName}.png`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
}
+
},
}
</script>
--
Gitblit v1.9.3