This commit is contained in:
shi
2025-11-15 14:21:50 +08:00
parent 3af08a5d0f
commit bcf74e463c
4 changed files with 110 additions and 83 deletions

View File

@ -1,10 +1,15 @@
import * as echarts from 'echarts';
export let option1 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
// 图例
legend: {
top: '0px',
right: '20px',
top: '1%',
itemWidth: 12,
itemHeight: 12,
textStyle: {
@ -20,20 +25,15 @@ export let option1 = {
// 网格
grid: {
left: '3%',
right: '3%',
bottom: '3%',
right: '5%',
bottom: '5%',
top: '15%',
containLabel: true
},
// X轴
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#fff'
}
},
boundaryGap: true,
axisTick: {
show: false
},
@ -41,7 +41,7 @@ export let option1 = {
color: '#fff',
fontSize: 12
},
data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00']
data: ['00:00', '06:00', '12:00', '18:00', '24:00']
},
// Y轴
yAxis: {
@ -149,10 +149,15 @@ export let option1 = {
};
export let option2 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
// 图例
legend: {
top: '10px',
right: '20px',
top: '3%',
itemWidth: 12,
itemHeight: 12,
textStyle: {
@ -160,7 +165,7 @@ export let option2 = {
fontSize: 14
},
data: [
{ name: '发电量', itemStyle: { color: '#00f5a6' } },
{ name: '发电量', itemStyle: { color: 'rgba(125, 255, 253, 1)' } },
{ name: '发电趋势', itemStyle: { color: '#ffa500' } }
]
},
@ -168,18 +173,14 @@ export let option2 = {
grid: {
left: '3%',
right: '3%',
bottom: '3%',
top: '15%',
bottom: '5%',
top: '30%',
containLabel: true
},
// X轴
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#fff'
}
},
boundaryGap: true,
axisTick: {
show: false
},
@ -207,15 +208,13 @@ export let option2 = {
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.2)'
color: 'rgba(255,255,255,0.3)'
}
},
axisLabel: {
color: '#fff',
fontSize: 14
},
min: 0,
max: 5000,
interval: 1000
},
// 系列
@ -232,9 +231,9 @@ export let option2 = {
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(0, 245, 166, 0.8)'
offset: 0, color: 'rgba(125, 255, 253, 1)'
}, {
offset: 1, color: 'rgba(0, 245, 166, 0.2)'
offset: 1, color: 'rgba(225, 255, 255, 0)'
}]
},
borderRadius: [4, 4, 0, 0]
@ -272,35 +271,49 @@ export let option3 = {
},
legend: {
data: ['光照度', '功率'],
top: '5%',
top: '1%',
textStyle: {
color: '#fff' // 若背景是深色,确保文字颜色可见
color: '#fff',
fontSize: 14
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
right: '5%',
bottom: '5%',
top: '15%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00']
boundaryGap: true,
axisTick: {
show: false
},
axisLabel: {
color: '#fff',
fontSize: 12
},
data: ['00:00', '06:00', '12:00', '18:00', '24:00']
},
yAxis: {
name: '单位: Kwh',
type: 'value',
axisLabel: {
formatter: '{value}',
fontSize: 20
axisLine: {
lineStyle: {
color: '#fff',
}
},
axisLabel: {
color: '#fff',
fontSize: 12
},
interval: 6,
splitLine: {
show: true,
lineStyle: {
color: 'rgba(192, 192, 192, 0.3)',
color: 'rgba(255, 255, 255, 0.3)',
width: 1,
type: [5, 10]
type: [4, 3]
}
}
},
@ -310,7 +323,7 @@ export let option3 = {
type: 'line',
data: [5.5, 5, 9, 11, 11.5, 12, 11.8, 12, 13],
itemStyle: {
color: '#4895ef'
color: 'rgba(82, 155, 255, 1)'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -329,9 +342,9 @@ export let option3 = {
{
name: '功率',
type: 'line',
data: [2, 15, 5, 2, 3, 2.5, 3, 4, 5.5],
data: [2, 18, 5, 2, 6, 9, 12, 4, 5.5],
itemStyle: {
color: '#98e6cd'
color: 'rgba(125, 255, 253, 1)'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [