From d0f98ad8e1047e3161a458399ad3005404ed87b8 Mon Sep 17 00:00:00 2001
From: whychdw <496960745@qq.com>
Date: 星期五, 06 六月 2025 15:52:15 +0800
Subject: [PATCH] 标准参数管理
---
src/components/echarts/line1.vue | 213 +++++++++++++++-------------------------------------
1 files changed, 62 insertions(+), 151 deletions(-)
diff --git a/src/components/echarts/line1.vue b/src/components/echarts/line1.vue
index facffb1..f71efd2 100644
--- a/src/components/echarts/line1.vue
+++ b/src/components/echarts/line1.vue
@@ -4,44 +4,48 @@
import baseChart from "./BaseChart.vue";
const chart = ref(null);
+ const props = defineProps({
+ type: {
+ type: String,
+ default: '鐢垫祦'
+ },
+ title: {
+ type: String,
+ default: ''
+ },
+ unit: {
+ type: String,
+ default: ''
+ }
+ });
- function getOptions() {
-
+ function getOptions(xLabels, datas) {
+ xLabels = xLabels || [];
+ datas = datas || [];
const option = {
- title: {
- text: '璇锋眰鏁�',
- textStyle: {
- fontWeight: 'normal',
- fontSize: 16,
- color: '#F1F1F3'
- },
- left: '6%'
- },
+ // title: {
+ // text: props.title,
+ // textStyle: {
+ // fontWeight: 'normal',
+ // fontSize: 14,
+ // color: '#fff'
+ // },
+ // left: '6%'
+ // },
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
- color: '#57617B'
+ color: '#fff'
}
}
},
- // legend: {
- // icon: 'rect',
- // itemWidth: 14,
- // itemHeight: 5,
- // itemGap: 13,
- // data: ['绉诲姩', '鐢典俊', '鑱旈��'],
- // right: '4%',
- // textStyle: {
- // fontSize: 12,
- // color: '#F1F1F3'
- // }
- // },
grid: {
left: '3%',
right: '4%',
bottom: '3%',
+ top: 30,
containLabel: true
},
xAxis: [{
@@ -49,158 +53,62 @@
boundaryGap: false,
axisLine: {
lineStyle: {
- color: '#57617B'
+ color: '#fff'
}
},
- data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
- }, {
- axisPointer: {
- show: false
- },
- axisLine: {
- lineStyle: {
- color: '#57617B'
- }
- },
- axisTick: {
- show: false
- },
-
- position: 'bottom',
- offset: 20,
- data: ['', '', '', '', '', '', '', '', '', '', {
- value: '鍛ㄥ叚',
- textStyle: {
- align: 'left'
- }
- }, '鍛ㄦ棩']
+ data: xLabels
}],
yAxis: [{
type: 'value',
- name: '鍗曚綅锛�%锛�',
+ name: props.unit,
axisTick: {
- show: false
+ show: true,
},
axisLine: {
+ show: true,
lineStyle: {
- color: '#57617B'
+ color: '#fff'
}
},
axisLabel: {
margin: 10,
- textStyle: {
- fontSize: 14
- }
+ fontSize: 12,
+ color: '#fff'
},
splitLine: {
lineStyle: {
- color: '#57617B'
+ color: 'rgba(255,255,255,0.2)'
}
}
}],
series: [{
- name: '绉诲姩',
+ name: props.type,
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
- normal: {
- width: 1
- }
+ width: 1
},
areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgba(137, 189, 27, 0.3)'
- }, {
- offset: 0.8,
- color: 'rgba(137, 189, 27, 0)'
- }], false),
- shadowColor: 'rgba(0, 0, 0, 0.1)',
- shadowBlur: 10
- }
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(0, 136, 212, 0.3)'
+ }, {
+ offset: 0.8,
+ color: 'rgba(0, 136, 212, 0)'
+ }], false),
+ shadowColor: 'rgba(0, 0, 0, 0.1)',
+ shadowBlur: 10
},
itemStyle: {
- normal: {
- color: 'rgb(137,189,27)',
- borderColor: 'rgba(137,189,2,0.27)',
- borderWidth: 12
-
- }
+ color: 'rgb(0,136,212)',
+ borderColor: 'rgba(0,136,212,0.2)',
+ borderWidth: 12
},
- data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
- }, {
- name: '鐢典俊',
- type: 'line',
- smooth: true,
- symbol: 'circle',
- symbolSize: 5,
- showSymbol: false,
- lineStyle: {
- normal: {
- width: 1
- }
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgba(0, 136, 212, 0.3)'
- }, {
- offset: 0.8,
- color: 'rgba(0, 136, 212, 0)'
- }], false),
- shadowColor: 'rgba(0, 0, 0, 0.1)',
- shadowBlur: 10
- }
- },
- itemStyle: {
- normal: {
- color: 'rgb(0,136,212)',
- borderColor: 'rgba(0,136,212,0.2)',
- borderWidth: 12
-
- }
- },
- data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
- }, {
- name: '鑱旈��',
- type: 'line',
- smooth: true,
- symbol: 'circle',
- symbolSize: 5,
- showSymbol: false,
- lineStyle: {
- normal: {
- width: 1
- }
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgba(219, 50, 51, 0.3)'
- }, {
- offset: 0.8,
- color: 'rgba(219, 50, 51, 0)'
- }], false),
- shadowColor: 'rgba(0, 0, 0, 0.1)',
- shadowBlur: 10
- }
- },
- itemStyle: {
- normal: {
-
- color: 'rgb(219,50,51)',
- borderColor: 'rgba(219,50,51,0.2)',
- borderWidth: 12
- }
- },
- data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
- },]
+ data: datas
+ }]
};
return option;
@@ -218,15 +126,18 @@
}
function updateChart(xLabels, datas) {
- let option = getOptions(xLabels, datas);
- // if (myChart) {
-
- // myChart.setOption(option);
- // }
+ if (chart.value) {
+ let option = getOptions(xLabels, datas);
+ chart.value.setOption(option);
+ }
}
+ defineExpose({
+ updateChart
+ });
+
onMounted(() => {
- console.log('line mounted', '=============');
+ // console.log('line mounted', '=============');
initChart();
});
--
Gitblit v1.9.1