Code - yjryu/pohang

<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>정비 주기 패턴 군집</p> </div> </div> <DataChart1 :chartData="emptyLineData" :keyMapping="lineDataKeyMapping" :xField="lineDataKeyMapping.date" /> </div> <div class="content-box"> <div class="chart-title"> <div class="flex"> <p>군집/월별 점검 횟수</p> </div> </div>  </div> <div class="content-box"> <div class="chart-title"> <div> <p>군집별 평균 주행거리</p> </div> </div> <VerticalBarChart :chartData="emptyClusterData" :xField="'Cluster_Labels'" :yField="'mean'" :color="['#1c7ed6','#74c0fc','#1864ab']" /> </div> <div class="content-box"> <div class="chart-title"> <div> <p>군집별 평균정비 주기</p> </div> </div> <VerticalBarChart :chartData="emptyClusterData2" :xField="'Cluster_Labels'" :yField="'mean'" :color="['#1c7ed6','#74c0fc','#1864ab']" /> </div> <div class="content-box"> <div class="chart-title"> <div> <p>군집별 차종 현황</p> </div> </div> <StackedColumnChart :chartData="emptyClusterData3" :xField="'Cluster_Labels'" /> </div> <div class="content-box"> <div class="chart-title"> <div> <p>군집별 제조사 현황</p> </div> </div> <StackedColumnChart :chartData="emptyClusterData4" :xField="'Cluster_Labels'" /> </div> </div> </div> </template> <script> import VerticalBarChart from '../../components/VerticalBarChart.vue'; import LineChart from '../../components/LineChart.vue'; import DataChart1 from '../../components/DataChart1.vue'; import StackedColumnChart from '../../components/StackedColumnChart.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 }, ], emptyClusterData: [], clusterData : [ { Cluster_Labels:0.0, mean:242.8801507382 }, { Cluster_Labels:1.0, mean:90.112943153}, { Cluster_Labels:2.0, mean:158.4532030077}, { Cluster_Labels:3.0, mean:60.4299174302 }, ], emptyClusterData2: [], clusterData2 :[ { "Cluster_Labels":0.0, "mean":91.0661736084 }, { "Cluster_Labels":1.0, "mean":331.3113772455 }, { "Cluster_Labels":2.0, "mean":12.2679856115 }, { "Cluster_Labels":3.0, "mean":123.3695111848 } ], emptyClusterData3: [], clusterData3 :[ { "Cluster_Labels":0.0, "9":787.0, "B":41.0, "D":46.0, "F":1135.0, "L":320.0, "M":200.0 }, { "Cluster_Labels":1.0, "9":386.0, "B":105.0, "D":250.0, "F":831.0, "L":329.0, "M":459.0 }, { "Cluster_Labels":2.0, "9":314.0, "B":8.0, "D":34.0, "F":103.0, "L":34.0, "M":29.0 }, { "Cluster_Labels":3.0, "9":297.0, "B":257.0, "D":380.0, "F":1152.0, "L":495.0, "M":667.0 } ], emptyClusterData4: [], clusterData4 :[ { "Cluster_Labels":0.0, "B":40.0, "D":786.0, "M":1501.0, "N":241.0 }, { "Cluster_Labels":1.0, "B":332.0, "D":394.0, "M":1381.0,"N":564.0 }, { "Cluster_Labels":2.0, "B":41.0, "D":314.0, "M":164.0, "N":37.0 }, { "Cluster_Labels":3.0, "B":399.0, "D":305.0, "M":1992.0, "N":924.0} ], } }, methods: { dataSet: function () { this.emptyData = this.monthToolData; this.emptyTimeData = this.timeData; this.emptyNetData = this.netData; this.emptyLineData = this.lineData; this.emptyClusterData = this.clusterData; this.emptyClusterData2 = this.clusterData2; this.emptyClusterData3 = this.clusterData3; this.emptyClusterData4 = this.clusterData4; } }, watch: { }, computed: {}, components: { 'VerticalBarChart': VerticalBarChart, 'LineChart': LineChart, 'DataChart1': DataChart1, 'StackedColumnChart' : StackedColumnChart }, mounted() { this.dataSet(); } } </script>