@@ -7,7 +7,7 @@ import ReactECharts from 'echarts-for-react'; | |||||
const EnergyCostChart = (props) => { | const EnergyCostChart = (props) => { | ||||
const options = { | const options = { | ||||
color: ['#FFD160', '#12FFF5', '#2760FF'], | color: ['#FFD160', '#12FFF5', '#2760FF'], | ||||
grid: { top: 28, right: 12, bottom: 32, left: 48 }, | |||||
grid: { top: 32, right: 12, bottom: 20, left: 48 }, | |||||
xAxis: { | xAxis: { | ||||
type: 'category', | type: 'category', | ||||
data: Array(7) | data: Array(7) | ||||
@@ -33,6 +33,12 @@ const EnergyCostChart = (props) => { | |||||
}, | }, | ||||
}, | }, | ||||
yAxis: { | yAxis: { | ||||
name: '单位/m³', | |||||
nameTextStyle: { | |||||
color: '#fff', | |||||
fontSize: 10, | |||||
align: 'right', | |||||
}, | |||||
type: 'value', | type: 'value', | ||||
axisLabel: { | axisLabel: { | ||||
color: '#fff', | color: '#fff', | ||||
@@ -112,7 +118,9 @@ const EnergyCostChart = (props) => { | |||||
</Radio.Button> | </Radio.Button> | ||||
</Radio.Group> | </Radio.Group> | ||||
</div> | </div> | ||||
<ReactECharts option={options} /> | |||||
<div className="flex-1"> | |||||
<ReactECharts option={options} style={{ height: '180px' }} /> | |||||
</div> | |||||
</div> | </div> | ||||
); | ); | ||||
}; | }; | ||||
@@ -1,5 +1,4 @@ | |||||
.energyCostChart { | .energyCostChart { | ||||
margin-top: 12px; | |||||
height: 1px; | height: 1px; | ||||
flex: 1; | flex: 1; | ||||
padding-top: 8px; | padding-top: 8px; | ||||
@@ -2,10 +2,11 @@ | |||||
background: url(../../../assets/energy.png) no-repeat; | background: url(../../../assets/energy.png) no-repeat; | ||||
background-size: 100% 100%; | background-size: 100% 100%; | ||||
width: 626px; | width: 626px; | ||||
height: 400px; | |||||
} | } | ||||
.cost__info { | .cost__info { | ||||
margin-top: 8px; | |||||
margin-top: 4px; | |||||
margin-bottom: 12px; | margin-bottom: 12px; | ||||
div { | div { | ||||
@@ -124,7 +124,7 @@ const SmokeTrendChart = (props) => { | |||||
return ( | return ( | ||||
<div className={cls.energyCostChart}> | <div className={cls.energyCostChart}> | ||||
<div className={cls.titleBar}> | <div className={cls.titleBar}> | ||||
<h2>能耗趋势图</h2> | |||||
<h2>烟气趋势图</h2> | |||||
<Switch defaultChecked onChange={handleSwitchChange} /> | <Switch defaultChecked onChange={handleSwitchChange} /> | ||||
<div className={cls.legend}> | <div className={cls.legend}> | ||||
<span className="legend__title">班次详情</span> | <span className="legend__title">班次详情</span> | ||||
@@ -175,7 +175,7 @@ const SmokeTrendChart = (props) => { | |||||
</Radio.Button> | </Radio.Button> | ||||
</Radio.Group> | </Radio.Group> | ||||
</div> | </div> | ||||
<ReactECharts option={options} /> | |||||
<ReactECharts option={options} style={{ height: '270px' }} /> | |||||
</div> | </div> | ||||
); | ); | ||||
}; | }; | ||||
@@ -66,6 +66,7 @@ | |||||
} | } | ||||
.choiceBar { | .choiceBar { | ||||
margin: 4px 0; | |||||
} | } | ||||
.radioGroup * { | .radioGroup * { | ||||
@@ -3,7 +3,7 @@ | |||||
background: url(../../../assets/smoke.png) no-repeat; | background: url(../../../assets/smoke.png) no-repeat; | ||||
background-size: 100% 100%; | background-size: 100% 100%; | ||||
width: 626px; | width: 626px; | ||||
height: 540px; | |||||
.smokeHandle__content { | .smokeHandle__content { | ||||
margin-top: 8px; | margin-top: 8px; | ||||
} | } | ||||
@@ -1,8 +1,8 @@ | |||||
import React from 'react'; | import React from 'react'; | ||||
import Chart1 from './Chart1'; | |||||
import Chart2 from './Chart2'; | |||||
import Chart3 from './Chart3'; | |||||
// import Chart1 from './Chart1'; | |||||
// import Chart2 from './Chart2'; | |||||
// import Chart3 from './Chart3'; | |||||
// import RightChart2 from './Chart2' | // import RightChart2 from './Chart2' | ||||
import SmokeHandle from './SmokeHandle'; | import SmokeHandle from './SmokeHandle'; | ||||
import EnergyCost from './EnergyCost'; | import EnergyCost from './EnergyCost'; | ||||
@@ -14,14 +14,13 @@ import cls from './index.module.less'; | |||||
export default function index() { | export default function index() { | ||||
return ( | return ( | ||||
<div className={cls.rightBar}> | |||||
<div className={cls.demoFloat}> | |||||
<EnergyCost /> | |||||
<SmokeHandle /> | |||||
</div> | |||||
<Chart1 /> | |||||
<div className={`${cls.rightBar} flex flex-col`}> | |||||
<EnergyCost /> | |||||
<SmokeHandle /> | |||||
{/* <Chart1 /> | |||||
<Chart2 /> | <Chart2 /> | ||||
<Chart3 /> | |||||
<Chart3 /> */} | |||||
</div> | </div> | ||||
); | ); | ||||
} | } |
@@ -1,4 +1,14 @@ | |||||
.rightBar { | .rightBar { | ||||
// background: #f00; | |||||
> div { | |||||
// height: 1px; | |||||
// flex: 1; | |||||
&:first-child { | |||||
margin-bottom: 24px; | |||||
} | |||||
} | |||||
} | } | ||||
.demoFloat { | .demoFloat { | ||||
@@ -6,6 +6,10 @@ | |||||
flex-direction: column; | flex-direction: column; | ||||
} | } | ||||
.flex-1 { | |||||
flex: 1; | |||||
} | |||||
.justify-between { | .justify-between { | ||||
justify-content: space-between; | justify-content: space-between; | ||||
} | } | ||||