|
@@ -1,98 +1,103 @@ |
|
|
import * as echarts from 'echarts'; |
|
|
|
|
|
import { randomInt } from '../../../../utils'; |
|
|
|
|
|
|
|
|
import * as echarts from "echarts"; |
|
|
|
|
|
import { randomInt } from "../../../../utils"; |
|
|
|
|
|
|
|
|
export default function getOptions(seriesData, name) { |
|
|
export default function getOptions(seriesData, name) { |
|
|
const colors = [ |
|
|
|
|
|
'#12FFF5', |
|
|
|
|
|
'#2760FF', |
|
|
|
|
|
'#FFD160', |
|
|
|
|
|
'#E80091', |
|
|
|
|
|
'#8064ff', |
|
|
|
|
|
'#ff8a3b', |
|
|
|
|
|
'#8cd26d', |
|
|
|
|
|
'#2aa1ff', |
|
|
|
|
|
]; |
|
|
|
|
|
return { |
|
|
|
|
|
color: colors, |
|
|
|
|
|
grid: { top: 38, right: 12, bottom: 20, left: 48 }, |
|
|
|
|
|
legend: { |
|
|
|
|
|
show: true, |
|
|
|
|
|
icon: 'roundRect', |
|
|
|
|
|
top: 10, |
|
|
|
|
|
right: 10, |
|
|
|
|
|
padding: 0, |
|
|
|
|
|
itemWidth: 8, |
|
|
|
|
|
itemHeight: 8, |
|
|
|
|
|
itemGap: 3, |
|
|
|
|
|
height: 8, |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
color: '#DFF1FE', |
|
|
|
|
|
fontSize: 10, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
xAxis: { |
|
|
|
|
|
type: 'category', |
|
|
|
|
|
data: Array(7) |
|
|
|
|
|
.fill(1) |
|
|
|
|
|
.map((_, index) => { |
|
|
|
|
|
const today = new Date(); |
|
|
|
|
|
const dtimestamp = today - index * 24 * 60 * 60 * 1000; |
|
|
|
|
|
return `${new Date(dtimestamp).getMonth() + 1}.${new Date( |
|
|
|
|
|
dtimestamp, |
|
|
|
|
|
).getDate()}`; |
|
|
|
|
|
}) |
|
|
|
|
|
.reverse(), |
|
|
|
|
|
axisLabel: { |
|
|
|
|
|
color: '#fff', |
|
|
|
|
|
fontSize: 12, |
|
|
|
|
|
}, |
|
|
|
|
|
axisTick: { show: false }, |
|
|
|
|
|
axisLine: { |
|
|
|
|
|
lineStyle: { |
|
|
|
|
|
width: 1, |
|
|
|
|
|
color: '#213259', |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
yAxis: { |
|
|
|
|
|
name: '单位m³/h', |
|
|
|
|
|
nameTextStyle: { |
|
|
|
|
|
color: '#fff', |
|
|
|
|
|
fontSize: 10, |
|
|
|
|
|
align: 'right', |
|
|
|
|
|
}, |
|
|
|
|
|
type: 'value', |
|
|
|
|
|
axisLabel: { |
|
|
|
|
|
color: '#fff', |
|
|
|
|
|
fontSize: 12, |
|
|
|
|
|
formatter: '{value}', |
|
|
|
|
|
}, |
|
|
|
|
|
axisLine: { |
|
|
|
|
|
show: true, |
|
|
|
|
|
lineStyle: { |
|
|
|
|
|
color: '#213259', |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
splitLine: { |
|
|
|
|
|
lineStyle: { |
|
|
|
|
|
color: '#213259a0', |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
series: seriesData.map((arr, index) => ({ |
|
|
|
|
|
name: index + 1 + '#' + name, |
|
|
|
|
|
data: arr, |
|
|
|
|
|
type: 'line', |
|
|
|
|
|
areaStyle: { |
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
|
|
|
|
{ offset: 0, color: colors[index] + '40' }, |
|
|
|
|
|
{ offset: 0.5, color: colors[index] + '20' }, |
|
|
|
|
|
{ offset: 1, color: colors[index] + '00' }, |
|
|
|
|
|
]), |
|
|
|
|
|
}, |
|
|
|
|
|
})), |
|
|
|
|
|
tooltip: { |
|
|
|
|
|
trigger: 'axis', |
|
|
|
|
|
}, |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
const colors = [ |
|
|
|
|
|
"#12FFF5", |
|
|
|
|
|
"#2760FF", |
|
|
|
|
|
"#FFD160", |
|
|
|
|
|
"#E80091", |
|
|
|
|
|
"#8064ff", |
|
|
|
|
|
"#ff8a3b", |
|
|
|
|
|
"#8cd26d", |
|
|
|
|
|
"#2aa1ff", |
|
|
|
|
|
]; |
|
|
|
|
|
return { |
|
|
|
|
|
color: colors, |
|
|
|
|
|
grid: { top: 38, right: 12, bottom: 20, left: 48 }, |
|
|
|
|
|
legend: { |
|
|
|
|
|
show: true, |
|
|
|
|
|
icon: "roundRect", |
|
|
|
|
|
top: 10, |
|
|
|
|
|
right: 10, |
|
|
|
|
|
padding: 0, |
|
|
|
|
|
itemWidth: 8, |
|
|
|
|
|
itemHeight: 8, |
|
|
|
|
|
itemGap: 3, |
|
|
|
|
|
height: 8, |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
color: "#DFF1FE", |
|
|
|
|
|
fontSize: 10, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
xAxis: { |
|
|
|
|
|
type: "category", |
|
|
|
|
|
data: Array(7) |
|
|
|
|
|
.fill(1) |
|
|
|
|
|
.map((_, index) => { |
|
|
|
|
|
const today = new Date(); |
|
|
|
|
|
const dtimestamp = today - index * 24 * 60 * 60 * 1000; |
|
|
|
|
|
return `${new Date(dtimestamp).getMonth() + 1}.${new Date( |
|
|
|
|
|
dtimestamp |
|
|
|
|
|
).getDate()}`; |
|
|
|
|
|
}) |
|
|
|
|
|
.reverse(), |
|
|
|
|
|
axisLabel: { |
|
|
|
|
|
color: "#fff", |
|
|
|
|
|
fontSize: 12, |
|
|
|
|
|
}, |
|
|
|
|
|
axisTick: { show: false }, |
|
|
|
|
|
axisLine: { |
|
|
|
|
|
lineStyle: { |
|
|
|
|
|
width: 1, |
|
|
|
|
|
color: "#213259", |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
yAxis: { |
|
|
|
|
|
name: "单位m³/h", |
|
|
|
|
|
nameTextStyle: { |
|
|
|
|
|
color: "#fff", |
|
|
|
|
|
fontSize: 10, |
|
|
|
|
|
align: "right", |
|
|
|
|
|
}, |
|
|
|
|
|
type: "value", |
|
|
|
|
|
axisLabel: { |
|
|
|
|
|
color: "#fff", |
|
|
|
|
|
fontSize: 12, |
|
|
|
|
|
formatter: "{value}", |
|
|
|
|
|
}, |
|
|
|
|
|
axisLine: { |
|
|
|
|
|
show: true, |
|
|
|
|
|
lineStyle: { |
|
|
|
|
|
color: "#213259", |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
splitLine: { |
|
|
|
|
|
lineStyle: { |
|
|
|
|
|
color: "#213259a0", |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
series: seriesData.map((arr, index) => ({ |
|
|
|
|
|
name: index + 1 + "#" + name, |
|
|
|
|
|
data: arr, |
|
|
|
|
|
type: "line", |
|
|
|
|
|
areaStyle: { |
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
|
|
|
|
{ offset: 0, color: colors[index] + "40" }, |
|
|
|
|
|
{ offset: 0.5, color: colors[index] + "20" }, |
|
|
|
|
|
{ offset: 1, color: colors[index] + "00" }, |
|
|
|
|
|
]), |
|
|
|
|
|
}, |
|
|
|
|
|
})), |
|
|
|
|
|
tooltip: { |
|
|
|
|
|
trigger: "axis", |
|
|
|
|
|
axisPointer: { |
|
|
|
|
|
type: "shadow", |
|
|
|
|
|
}, |
|
|
|
|
|
className: "xc-chart-tooltip", |
|
|
|
|
|
// backgroundColor: '' |
|
|
|
|
|
}, |
|
|
|
|
|
}; |
|
|
} |
|
|
} |