261 lines
6.8 KiB
JavaScript
261 lines
6.8 KiB
JavaScript
|
|
import echarts from 'echarts/lib/echarts';
|
|
|
|
export default function DrpOption(
|
|
data,
|
|
afsltdz,
|
|
flLowLimLev,
|
|
desFloodLev,
|
|
calFloodLev) {
|
|
const maxVal = Math.max(...data.map(obj => obj.drp))
|
|
const maxSw = Math.ceil(Math.max(...data.map(obj => obj.rz)))
|
|
const minSw = Math.floor(Math.min(...data.map(obj => obj.rz)))
|
|
const maxKr = Math.max(...data.map(obj => obj.w))
|
|
const minKr = Math.min(...data.map(obj => obj.w))
|
|
let eopts = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
grid: [
|
|
{
|
|
top: "13%",
|
|
left: "10%",
|
|
right: "8%",
|
|
width: '80%',
|
|
height: '35%'
|
|
},
|
|
{
|
|
bottom: "5%",
|
|
left: "10%",
|
|
right: "8%",
|
|
width: '80%',
|
|
height: '35%'
|
|
},
|
|
],
|
|
legend: {
|
|
// 显示图例
|
|
show: true,
|
|
// 图例的位置
|
|
data: ["校核水位", '设计水位', '汛限水位', '降雨量', '水位', '库容'],
|
|
left:0,
|
|
right:0,
|
|
itemWidth:10,
|
|
padding:0
|
|
},
|
|
xAxis: [
|
|
{
|
|
gridIndex: 0,
|
|
type: 'category',
|
|
data: data.map(o => o.tm).reverse(),
|
|
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#333',
|
|
fontSize: 12,
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#07a6ff',
|
|
width: 0.5
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
{
|
|
gridIndex: 1,
|
|
type: 'category',
|
|
data: data.map(o => o.tm.substr("2020-".length,11)),
|
|
inverse: true,
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#333',
|
|
fontSize: 12,
|
|
formatter: val => val.substr('2020-'.length, 11)
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#07a6ff',
|
|
width: 0.5
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
inverse: true,
|
|
gridIndex: 0,
|
|
type: 'value',
|
|
position: 'left',
|
|
name: '降雨量(mm)',
|
|
nameLocation: 'start',
|
|
axisLabel: {
|
|
color: '#333',
|
|
fontSize: 12
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#07a6ff',
|
|
width: 0.25,
|
|
type: 'dotted'
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
min: 0,
|
|
max: maxVal
|
|
},
|
|
{
|
|
gridIndex: 1,
|
|
type: 'value',
|
|
position: 'left',
|
|
name: '水位(m)',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#07a6ff',
|
|
width: 0.25,
|
|
type: 'dotted'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#333',
|
|
fontSize: 12
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
min: minSw,
|
|
max: maxSw
|
|
},
|
|
{
|
|
gridIndex: 1,
|
|
type: 'value',
|
|
position: 'right',
|
|
name: '库容(万m³)',
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#07a6ff',
|
|
width: 0.25,
|
|
type: 'dotted'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#333',
|
|
fontSize: 12
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
min: minKr,
|
|
max: maxKr
|
|
}
|
|
],
|
|
}
|
|
let chartData = {
|
|
series: [
|
|
{
|
|
xAxisIndex: 1,
|
|
yAxisIndex: 1,
|
|
name: '校核水位',
|
|
type: 'line',
|
|
color: '#D9001B',
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
},
|
|
data: data.map(o => calFloodLev),
|
|
symbol: 'none' // 设置标记点为'none'，即去掉圆点
|
|
},
|
|
{
|
|
xAxisIndex: 1,
|
|
yAxisIndex: 1,
|
|
name: '设计水位',
|
|
type: 'line',
|
|
color: '#F59A23',
|
|
data: data.map(o => desFloodLev),
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
},
|
|
symbol: 'none' // 设置标记点为'none'，即去掉圆点
|
|
},
|
|
{
|
|
xAxisIndex: 1,
|
|
yAxisIndex: 1,
|
|
name: '汛限水位',
|
|
type: 'line',
|
|
color: '#FDDC9F',
|
|
data: data.map(o => {
|
|
return flLowLimLev
|
|
}),
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
},
|
|
symbol: 'none' // 设置标记点为'none'，即去掉圆点
|
|
},
|
|
{
|
|
name: '降雨量',
|
|
type: 'bar',
|
|
barWidth: '60%',
|
|
data: data.map(o => o.drp).reverse(),
|
|
itemStyle: {
|
|
color: '#007AFD'
|
|
},
|
|
label: {
|
|
show: false
|
|
}
|
|
},
|
|
{
|
|
xAxisIndex: 1,
|
|
yAxisIndex: 1,
|
|
name: '水位',
|
|
type: 'line',
|
|
symbol: 'none',
|
|
color: '#0AE0B5',
|
|
label: {
|
|
show: false
|
|
},
|
|
data: data.map(o => o.rz ? o.rz.toFixed(2):null )
|
|
},
|
|
{
|
|
xAxisIndex: 1,
|
|
yAxisIndex: 2,
|
|
name: '库容',
|
|
type: 'line',
|
|
color: '#007AFD',
|
|
symbol: 'none',
|
|
showSymbol: false,
|
|
label: {
|
|
show: false
|
|
},
|
|
data: data.map(o => o.w)
|
|
}
|
|
],
|
|
}
|
|
return {
|
|
eopts,
|
|
chartData
|
|
}
|
|
}
|
|
|