File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="chart-wrap">
<div class="banner2">
<div>
<p style="color:#1c7ed6">물류운송</p>
<p style="color:#0d426d">데이터 시각화</p>
</div>
</div>
<div class="chart-zone">
<div class="content-box">
<div class="chart-title">
<div class="flex">
<p>각 시도별 평균, 최소, 최대 이동거리</p>
<select name="" id="">
<option v-for="(month, index) in months" :key="index" :value="month">{{ month }}</option>
</select>
</div>
</div>
<MultiBarChart :setData="emptyData" :color="['#339af0','#e67700']" />
<table>
<tr>
<th></th>
<th>경기</th>
<th>경남</th>
<th>경북</th>
<th>광주</th>
<th>대구</th>
<th>대전</th>
<th>부산</th>
<th>서울</th>
<th>울산</th>
<th>인천</th>
<th>전남</th>
<th>전북</th>
<th>제주</th>
<th>충남</th>
<th>충북</th>
</tr>
<tr>
<th class="min-title">최소</th>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th class="avg-title">평균</th>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th class="max-title">최대</th>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</table>
</div>
<div class="content-box">
<div class="chart-title">
<div class="flex">
<p>각 시도별 평균, 최소, 최대 소요시간</p>
<select name="" id="">
<option v-for="(month, index) in months" :key="index" :value="month">{{ month }}</option>
</select>
</div>
</div>
<MultiBarChart :setData="emptyData" :color="['#339af0','#e67700']" />
<table>
<tr>
<th></th>
<th>경기</th>
<th>경남</th>
<th>경북</th>
<th>광주</th>
<th>대구</th>
<th>대전</th>
<th>부산</th>
<th>서울</th>
<th>울산</th>
<th>인천</th>
<th>전남</th>
<th>전북</th>
<th>제주</th>
<th>충남</th>
<th>충북</th>
</tr>
<tr>
<th class="min-title">최소</th>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th class="avg-title">평균</th>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th class="max-title">최대</th>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</table>
</div>
<div class="content-box">
<div class="chart-title">
<div>
<p>지역별 배송 건수</p>
</div>
</div>
<PieChart :setData="emptyPieData" />
</div>
<div class="content-box">
<div class="chart-title">
<div>
<p>지역별 평균 이동 시간</p>
</div>
</div>
<NetworkingChart :setData="emptyNetData" />
</div>
</div>
</div>
</template>
<script>
import MultiBarChart from '../../components/MultiBarChart.vue'
import PieChart from '../../components/PeiChart.vue'
import NetworkingChart from '../../components/NetworkingChart.vue'
export default {
data() {
return {
months: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
// 이동 거리 및 소요시간 더미 데이터
emptyData: {},
distanceData: {
경기: {
min: 10,
max: 35,
quantity: 430
},
경남: {
min: 15,
max: 21,
quantity: 210
},
경북: {
min: 25,
max: 11,
quantity: 265
},
광주: {
min: 12,
max: 15,
quantity: 98
},
대구: {
min: 12,
max: 15,
quantity: 98
},
대전: {
min: 12,
max: 15,
quantity: 98
},
부산: {
min: 12,
max: 15,
quantity: 98
},
서울: {
min: 12,
max: 15,
quantity: 98
},
울산: {
min: 12,
max: 15,
quantity: 98
},
인천: {
min: 12,
max: 15,
quantity: 98
},
전남: {
min: 12,
max: 15,
quantity: 98
},
전북: {
min: 12,
max: 15,
quantity: 98
},
제주: {
min: 12,
max: 15,
quantity: 98
},
충남: {
min: 12,
max: 15,
quantity: 98
},
충북: {
min: 12,
max: 15,
quantity: 98
}
},
// 파이차트 데이터
emptyPieData: [],
pieData: [
{ value: 10, category: "One" },
{ value: 9, category: "Two" },
{ value: 6, category: "Three" },
{ value: 5, category: "Four" },
{ value: 4, category: "Five" },
{ value: 3, category: "Six" },
{ value: 1, category: "Seven" }
],
// 네트워크 데이터
emptyNetData: [],
netData: {
name: "경북영천시고경면삼포리",
children: [
{ name: "경기", value: 320 },
{ name: "경남", value: 160 },
{ name: "경북", value: 40 },
{ name: "광주", value: 350 },
{ name: "대구", value: 90 },
{ name: "대전", value: 250 },
{ name: "부산", value: 120 },
{ name: "서울", value: 360 },
{ name: "울산", value: 85 },
{ name: "인천", value: 370 },
{ name: "전남", value: 400 },
{ name: "전북", value: 300 },
{ name: "제주", value: 600 },
{ name: "충남", value: 280 },
{ name: "충북", value: 230 }
]
}
}
},
methods: {
dataSet: function () {
this.emptyData = this.distanceData;
this.emptyPieData = this.pieData;
this.emptyNetData=this.netData;
}
},
watch: {
},
computed: {},
components: {
'MultiBarChart': MultiBarChart,
'PieChart': PieChart,
'NetworkingChart':NetworkingChart
},
mounted() {
this.dataSet();
}
}
</script>