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="banner">
<div>
<p>가공도구 마모</p>
<p>데이터 시각화</p>
</div>
</div>
<div class="chart-zone">
<div class="content-box">
<div class="chart-title">
<div class="flex">
<p>월별 평균 길이 Z축 마모</p>
<select name="" id="">
<option v-for="(tool, index) in tools" :key="index" :value="tool">{{ tool }}</option>
</select>
</div>
</div>
<VerticalBarChart :chartData="emptyData" xField="month" yField="value" />
</div>
<div class="content-box">
<div class="chart-title">
<div class="flex">
<p>시간대별 평균 길이 Z축 마모</p>
<select name="" id="">
<option v-for="(tool, index) in tools" :key="index" :value="tool">{{ tool }}</option>
</select>
</div>
</div>
<VerticalBarChart :chartData="emptyTimeData" :xField="'time'" :yField="'value'" :color="['#1c7ed6','#74c0fc','#1864ab']" />
</div>
<div class="content-box">
<div class="chart-title">
<div>
<p>가동시간에 따른 각 툴별(도구) 길이 Z축 마모</p>
</div>
</div>
<LineChart :chartData="emptyLineData" :keyMapping="lineDataKeyMapping" :xField="lineDataKeyMapping.date" />
</div>
<div class="content-box">
<div class="chart-title">
<div>
<p>가동시간에 따른 각 툴별(도구) 길이 X축 형상마모</p>
</div>
</div>
<LineChart :chartData="emptyLineData" :keyMapping="lineDataKeyMapping" :xField="lineDataKeyMapping.date" />
</div>
</div>
</div>
</template>
<script>
import VerticalBarChart from '../../components/VerticalBarChart.vue';
import LineChart from '../../components/LineChart.vue';
export default {
data() {
return {
tools: ["T1", "T2", "T3", "T4", "T5"],
// 월별 데이터
emptyData: [],
monthToolData: [
{ month: "2023.11", value: 300 }
],
// 시간대별
emptyTimeData: [],
timeData: [
{ time: "01", value: 300 },
{ time: "02", value: 300 },
{ time: "03", value: 300 },
{ time: "04", value: 300 },
{ time: "05", value: 300 },
{ time: "06", value: 300 },
{ time: "07", value: 300 },
],
// z축 마모 라인 데이터,
lineDataKeyMapping: {
date: "날짜",
value1: "T1",
value2: "T2",
value3: "T3",
},
emptyLineData: [],
lineData: [
{ date: "2023-01-01", value1: 10, value2: 20, value3: 50 },
{ date: "2023-01-02", value1: 15, value2: 25, value3: 50 },
{ date: "2023-01-03", value1: 20, value2: 30, value3: 50 },
]
}
},
methods: {
dataSet: function () {
this.emptyData = this.monthToolData;
this.emptyTimeData = this.timeData;
this.emptyNetData = this.netData;
this.emptyLineData = this.lineData;
}
},
watch: {
},
computed: {},
components: {
'VerticalBarChart': VerticalBarChart,
'LineChart': LineChart
},
mounted() {
this.dataSet();
}
}
</script>