110 lines
1.9 KiB
Vue
110 lines
1.9 KiB
Vue
<template>
|
|
<div class="peak-air-quality">
|
|
<div class="line-charts">
|
|
<peak-air-quality-trend-charts :data-source="airQualityTrendDataSource"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PeakAirQualityTrendCharts from "@/components/charts/PeakAirQualityTrendCharts";
|
|
import AirRateCharts from "@/components/charts/AirRateCharts";
|
|
|
|
export default {
|
|
name: "PeakAirQuality",
|
|
components: {AirRateCharts, PeakAirQualityTrendCharts},
|
|
data() {
|
|
return {
|
|
airQualityTrendDataSource: [
|
|
{
|
|
name: '1',
|
|
value: 3,
|
|
attr: '2021'
|
|
},
|
|
{
|
|
name: '2',
|
|
value: 4,
|
|
attr: '2021'
|
|
},
|
|
{
|
|
name: '3',
|
|
value: 1,
|
|
attr: '2021'
|
|
},
|
|
{
|
|
name: '4',
|
|
value: 4,
|
|
attr: '2021'
|
|
},
|
|
{
|
|
name: '5',
|
|
value: 6,
|
|
attr: '2021'
|
|
},
|
|
{
|
|
name: '6',
|
|
value: 1,
|
|
attr: '2021'
|
|
},
|
|
{
|
|
name: '7',
|
|
value: 8,
|
|
attr: '2021'
|
|
},
|
|
{
|
|
name: '1',
|
|
value: 1,
|
|
attr: '2022'
|
|
},
|
|
{
|
|
name: '2',
|
|
value: 4,
|
|
attr: '2022'
|
|
},
|
|
{
|
|
name: '3',
|
|
value: 7,
|
|
attr: '2022'
|
|
},
|
|
{
|
|
name: '4',
|
|
value: 8,
|
|
attr: '2022'
|
|
},
|
|
{
|
|
name: '5',
|
|
value: 2,
|
|
attr: '2022'
|
|
},
|
|
{
|
|
name: '6',
|
|
value: 7,
|
|
attr: '2022'
|
|
},
|
|
{
|
|
name: '7',
|
|
value: 1,
|
|
attr: '2022'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import "../../assets/styles/mixin";
|
|
|
|
.peak-air-quality {
|
|
height: 100%;
|
|
width: 100%;
|
|
.flex-column;
|
|
|
|
.line-charts {
|
|
height: 170px;
|
|
width: 100%;
|
|
}
|
|
|
|
}
|
|
</style>
|