106 lines
2.2 KiB
JavaScript
106 lines
2.2 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import ReactECharts from 'echarts-for-react';
|
||
|
|
import { makeStyles } from '@material-ui/core/styles';
|
||
|
|
|
||
|
|
const useStyles = makeStyles({
|
||
|
|
chart: {
|
||
|
|
height: 100,
|
||
|
|
backgroundColor: 'transparent'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const WaterSupplyChart = ({type}) => {
|
||
|
|
const classes = useStyles();
|
||
|
|
|
||
|
|
// 生成近7天的日期
|
||
|
|
const getDates = () => {
|
||
|
|
const dates = [];
|
||
|
|
for (let i = 6; i >= 0; i--) {
|
||
|
|
const date = new Date();
|
||
|
|
date.setDate(date.getDate() - i);
|
||
|
|
dates.push(date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' }));
|
||
|
|
}
|
||
|
|
return dates;
|
||
|
|
};
|
||
|
|
|
||
|
|
const option = {
|
||
|
|
backgroundColor: 'transparent',
|
||
|
|
grid: {
|
||
|
|
left: '5%',
|
||
|
|
right: '5%',
|
||
|
|
top: '20%',
|
||
|
|
bottom: '1%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
data: getDates(),
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: { color: '#fff' }
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: 12
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
name: 'm³',
|
||
|
|
nameTextStyle: {
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: 12
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: { color: '#fff' }
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: 12
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: 'rgba(255, 255, 255, 0.1)',
|
||
|
|
type: 'dashed'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
min: 0,
|
||
|
|
max: 3000,
|
||
|
|
interval: 1000
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||
|
|
borderColor: '#4a90e2',
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name:'供水量',
|
||
|
|
data: type == 1 ? [1800, 1700, 1900, 1800, 1800, 2200, 2200]: [900, 1900, 1200, 2600, 1000, 2100, 2300], // 示例数据
|
||
|
|
type: 'bar',
|
||
|
|
barWidth: '40%',
|
||
|
|
itemStyle: {
|
||
|
|
color: '#4a90e2'
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
position: 'top',
|
||
|
|
color: '#fff',
|
||
|
|
formatter: '{c} m³'
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ReactECharts
|
||
|
|
option={option}
|
||
|
|
style={{height:230}}
|
||
|
|
className={classes.chart}
|
||
|
|
// theme="dark"
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default WaterSupplyChart;
|