-
Notifications
You must be signed in to change notification settings - Fork 0
/
PopulationpyramidPref.vue
100 lines (96 loc) · 2.1 KB
/
PopulationpyramidPref.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<template>
<v-col cols="4" sm="8" md="6">
<v-card :loading="$fetchState.pending">
<p v-if="$fetchState.pending" />
<div v-else>
<!-- タイトル -->
<v-card-title class="headline">
{{ title }}
</v-card-title>
<v-card-text>
<!-- スライダー -->
<v-slider
v-model="year"
thumb-label="always"
class="Slider"
:max="2045"
:min="1980"
step="5"
hide-details
@change="$emit('input', $event)"
/>
<!-- グラフ -->
<HighchartsPyramidChart :display-data="displayData" />
<!-- 注釈 -->
<hr class="my-3" />
<p>地域経済分析システムRESASのAPIを利用して作成</p>
</v-card-text>
</div>
</v-card>
</v-col>
</template>
<script>
export default {
async fetch() {
const url = this.resasUrl
const params = this.resasParams
const { data } = await this.$resas.get(url, { params })
this.resasResponse = data
},
props: {
selectedPref: {
type: Object,
required: true,
},
},
data() {
return {
resasResponse: null,
year: 2015,
unit: '人',
}
},
computed: {
prefCode() {
return this.selectedPref.prefCode
},
prefName() {
return this.selectedPref.prefName
},
resasUrl() {
return `api/v1/population/composition/pyramid`
},
resasParams() {
return {
prefCode: String(this.prefCode),
cityCode: '-',
yearLeft: String(this.year),
yearRight: '2040',
}
},
title() {
return `${this.prefName}の人口ピラミッド`
},
chartData() {
const data = this.resasResponse.result.yearLeft.data
return data.map((d) => {
return {
category: d.class,
man: d.man,
woman: d.woman,
unit: this.unit,
}
})
},
displayData() {
return this.chartData
},
},
created() {},
watch: {
year() {
this.$fetch()
},
},
}
</script>