142 lines
2.9 KiB
JavaScript
142 lines
2.9 KiB
JavaScript
import React, { useMemo } from 'react';
|
|
import echarts from 'echarts/lib/echarts';
|
|
import ReactEcharts from 'echarts-for-react';
|
|
|
|
|
|
const pallete = [
|
|
['#177ab3', '#51c3e7'],
|
|
['#9976dc', '#c792ee'],
|
|
['#94a1eb', '#a7caf8'],
|
|
['#7ae5c3', '#c9f4ea'],
|
|
['#c7dca5', '#f5fcd5'],
|
|
['#7988d9', '#9dc6f1'],
|
|
['#d9ed8f', '#d3f89b'],
|
|
];
|
|
|
|
const palleteLen = pallete.length;
|
|
|
|
|
|
const AreaDrpChart = ({ data }) => {
|
|
const { max, sdata } = useMemo(() => {
|
|
let max = 0;
|
|
data.forEach(o => {
|
|
max = Math.max(max, o.av)
|
|
});
|
|
max = [10, 20, 50, 100, 200, 300, 400].find(i => i >= max);
|
|
|
|
return {
|
|
max,
|
|
sdata: data.map(o => ({ ...o, name: o.NAME.split('').join('\n') })),
|
|
}
|
|
}, [data]);
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: function (params) {
|
|
var res = `${params.name.substr('2020-10-14 '.length, 2)}时降雨：${params.data}mm`;
|
|
return res;
|
|
}
|
|
},
|
|
grid: {
|
|
x: 18,
|
|
y: 24,
|
|
x2: 28,
|
|
y2: 36,
|
|
bottom: 65,
|
|
borderWidth: 0
|
|
},
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: sdata.map(o => o.name),
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#bbb',
|
|
fontSize: 10,
|
|
textShadowBlur: 4,
|
|
textShadowColor: '#6ab',
|
|
},
|
|
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,
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '降雨',
|
|
type: 'bar',
|
|
barWidth: '10px',
|
|
data: sdata.map(o => o.av),
|
|
itemStyle: {
|
|
normal: {
|
|
color: (params) => {
|
|
return new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[
|
|
{ offset: 0, color: pallete[params.dataIndex % palleteLen][0] },
|
|
{ offset: 1, color: pallete[params.dataIndex % palleteLen][1] }
|
|
]
|
|
)
|
|
},
|
|
},
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
color: '#bbb',
|
|
fontSize: 12,
|
|
textShadowBlur: 4,
|
|
textShadowColor: '#6ab',
|
|
},
|
|
}
|
|
]
|
|
};
|
|
|
|
return (
|
|
<ReactEcharts
|
|
option={option}
|
|
style={{ height: '11rem', width: '100%' }}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default React.memo(AreaDrpChart);
|