160 lines
3.5 KiB
JavaScript
160 lines
3.5 KiB
JavaScript
import echarts from 'echarts/lib/echarts';
|
|
|
|
export default function drpOption({ data, grid, title }) {
|
|
let totalDrp = 0;
|
|
const data2 = data.reduce((pre, cur) => {
|
|
totalDrp += cur.drp;
|
|
pre.push({
|
|
...cur,
|
|
totalDrp,
|
|
});
|
|
return pre;
|
|
}, []);
|
|
|
|
const DRPLEVEL = [10, 25, 50, 100, 250];
|
|
const maxVal = DRPLEVEL.find(o => o > totalDrp);
|
|
|
|
return {
|
|
title: title ? {
|
|
text: title,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 14,
|
|
fontWeight: 'normal'
|
|
},
|
|
left: 8,
|
|
top: 16,
|
|
} : null,
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
formatter: function (params) {
|
|
var res = `${params[0].name.substr('2020-10-14 '.length, 2)}时降雨: ${params[0].data}mm<br />累计降雨: ${params[1].data}mm`;
|
|
return res;
|
|
}
|
|
},
|
|
grid: grid || {
|
|
x: 18,
|
|
y: 24,
|
|
x2: 28,
|
|
y2: 28,
|
|
borderWidth: 0
|
|
},
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: data2.map(o => o.tm),
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#bbb',
|
|
fontSize: 9,
|
|
textShadowBlur: 4,
|
|
textShadowColor: '#6ab',
|
|
formatter: val => val.substr('2020-'.length, 10)
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#07a6ff',
|
|
width: 0.5,
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
position: 'right',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#07a6ff',
|
|
width: 0.25,
|
|
type: 'dashed'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#bbb',
|
|
fontSize: 10,
|
|
textShadowBlur: 4,
|
|
textShadowColor: '#6ab',
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
min: 0,
|
|
max: maxVal
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '降雨',
|
|
type: 'bar',
|
|
barWidth: '60%',
|
|
data: data2.map(o => o.drp),
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: [3, 3, 0, 0],
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[
|
|
{ offset: 0, color: '#3876cd' },
|
|
{ offset: 0.5, color: '#45b4e7' },
|
|
{ offset: 1, color: '#54ffff' }
|
|
]
|
|
),
|
|
},
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
markPoint: {
|
|
data: [
|
|
{ type: 'max', name: '最大值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, -12] },
|
|
]
|
|
},
|
|
},
|
|
{
|
|
name: '累计降雨',
|
|
type: 'line',
|
|
showSymbol: false,
|
|
label: {
|
|
show: false,
|
|
},
|
|
data: data2.map(o => Number((o.totalDrp).toFixed(2))),
|
|
lineStyle: {
|
|
normal: {
|
|
width: 1,
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(3, 194, 236, 0.3)'
|
|
}, {
|
|
offset: 0.8,
|
|
color: 'rgba(3, 194, 236, 0)'
|
|
}
|
|
], false),
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
shadowBlur: 10
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#03C2EC'
|
|
}
|
|
},
|
|
}
|
|
]
|
|
};
|
|
}
|