365 lines
8.7 KiB
TypeScript
365 lines
8.7 KiB
TypeScript
import * as echarts from 'echarts';
|
|
|
|
export let option1 = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross'
|
|
}
|
|
},
|
|
// 图例
|
|
legend: {
|
|
top: '1%',
|
|
itemWidth: 12,
|
|
itemHeight: 12,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 14
|
|
},
|
|
data: [
|
|
{ name: 'A区', itemStyle: { color: '#00bfff' } },
|
|
{ name: 'B区', itemStyle: { color: '#00f5a6' } },
|
|
{ name: 'C区', itemStyle: { color: '#ffa500' } }
|
|
]
|
|
},
|
|
// 网格
|
|
grid: {
|
|
left: '3%',
|
|
right: '5%',
|
|
bottom: '5%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
// X轴
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: true,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#fff',
|
|
fontSize: 12
|
|
},
|
|
data: ['00:00', '06:00', '12:00', '18:00', '24:00']
|
|
},
|
|
// Y轴
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,0.2)'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#fff',
|
|
fontSize: 12
|
|
},
|
|
min: 0,
|
|
max: 100,
|
|
interval: 25
|
|
},
|
|
// 系列
|
|
series: [
|
|
{
|
|
name: 'A区',
|
|
type: 'line',
|
|
data: [15, 70, 40, 55, 65, 85, 30, 80, 60],
|
|
lineStyle: {
|
|
color: '#00bfff',
|
|
width: 2
|
|
},
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: 'rgba(0, 191, 255, 0.3)'
|
|
}, {
|
|
offset: 1, color: 'rgba(0, 191, 255, 0.0)'
|
|
}]
|
|
}
|
|
},
|
|
symbol: 'none',
|
|
smooth: true
|
|
},
|
|
{
|
|
name: 'B区',
|
|
type: 'line',
|
|
data: [50, 20, 45, 50, 85, 70, 50, 60, 50],
|
|
lineStyle: {
|
|
color: '#00f5a6',
|
|
width: 2
|
|
},
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: 'rgba(0, 245, 166, 0.3)'
|
|
}, {
|
|
offset: 1, color: 'rgba(0, 245, 166, 0.0)'
|
|
}]
|
|
}
|
|
},
|
|
symbol: 'none',
|
|
smooth: true
|
|
},
|
|
{
|
|
name: 'C区',
|
|
type: 'line',
|
|
data: [20, 50, 30, 35, 30, 35, 30, 35, 30],
|
|
lineStyle: {
|
|
color: '#ffa500',
|
|
width: 2
|
|
},
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: 'rgba(255, 165, 0, 0.3)'
|
|
}, {
|
|
offset: 1, color: 'rgba(255, 165, 0, 0.0)'
|
|
}]
|
|
}
|
|
},
|
|
symbol: 'none',
|
|
smooth: true
|
|
}
|
|
],
|
|
backgroundColor: 'transparent'
|
|
};
|
|
|
|
export let option2 = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross'
|
|
}
|
|
},
|
|
// 图例
|
|
legend: {
|
|
top: '3%',
|
|
itemWidth: 12,
|
|
itemHeight: 12,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 14
|
|
},
|
|
data: [
|
|
{ name: '发电量', itemStyle: { color: 'rgba(125, 255, 253, 1)' } },
|
|
{ name: '发电趋势', itemStyle: { color: '#ffa500' } }
|
|
]
|
|
},
|
|
// 网格
|
|
grid: {
|
|
left: '3%',
|
|
right: '3%',
|
|
bottom: '5%',
|
|
top: '30%',
|
|
containLabel: true
|
|
},
|
|
// X轴
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: true,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#fff',
|
|
fontSize: 14
|
|
},
|
|
data: ['周一', '周二', '周三', '周四', '周五']
|
|
},
|
|
// Y轴
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '单位: Kwh',
|
|
nameTextStyle: {
|
|
color: '#fff',
|
|
fontSize: 14
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,0.3)'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#fff',
|
|
fontSize: 14
|
|
},
|
|
interval: 1000
|
|
},
|
|
// 系列
|
|
series: [
|
|
{
|
|
name: '发电量',
|
|
type: 'bar',
|
|
data: [2800, 1800, 1200, 1700, 1500],
|
|
itemStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: 'rgba(125, 255, 253, 1)'
|
|
}, {
|
|
offset: 1, color: 'rgba(225, 255, 255, 0)'
|
|
}]
|
|
},
|
|
borderRadius: [4, 4, 0, 0]
|
|
},
|
|
barWidth: '30px'
|
|
},
|
|
{
|
|
name: '发电趋势',
|
|
type: 'line',
|
|
data: [1800, 4000, 2500, 4000, 2000],
|
|
lineStyle: {
|
|
color: 'rgba(255, 209, 92, 1)',
|
|
width: 2
|
|
},
|
|
symbol: 'circle',
|
|
symbolSize: 10,
|
|
itemStyle: {
|
|
color: 'rgba(255, 209, 92, 1)',
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
smooth: false
|
|
}
|
|
],
|
|
// 背景透明
|
|
backgroundColor: 'transparent'
|
|
};
|
|
|
|
export let option3 = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross'
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['光照度', '功率'],
|
|
top: '1%',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '5%',
|
|
bottom: '5%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: true,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#fff',
|
|
fontSize: 12
|
|
},
|
|
data: ['00:00', '06:00', '12:00', '18:00', '24:00']
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff',
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#fff',
|
|
fontSize: 12
|
|
},
|
|
interval: 6,
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'rgba(255, 255, 255, 0.3)',
|
|
width: 1,
|
|
type: [4, 3]
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '光照度',
|
|
type: 'line',
|
|
data: [5.5, 5, 9, 11, 11.5, 12, 11.8, 12, 13],
|
|
itemStyle: {
|
|
color: 'rgba(82, 155, 255, 1)'
|
|
},
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(72, 149, 239, 0.8)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(72, 149, 239, 0.2)'
|
|
}
|
|
])
|
|
},
|
|
smooth: true
|
|
},
|
|
{
|
|
name: '功率',
|
|
type: 'line',
|
|
data: [2, 18, 5, 2, 6, 9, 12, 4, 5.5],
|
|
itemStyle: {
|
|
color: 'rgba(125, 255, 253, 1)'
|
|
},
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(152, 230, 205, 0.8)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(152, 230, 205, 0.2)'
|
|
}
|
|
])
|
|
},
|
|
smooth: true
|
|
}
|
|
],
|
|
backgroundColor: 'transparent'
|
|
}; |