added SprayGraph.vue

src/components/Details.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="details-site">
+    <div class="multi-kills">
+      <h3 class="text-center">Multi-Kills</h3>
+      <MultiKillsChart/>
+    </div>
+    <hr>
+    <div class="spray">
+      <h3 class="text-center">Spray</h3>
+      <SprayGraph :spray="data.spray"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import MultiKillsChart from "@/components/MultiKillsChart";
+import SprayGraph from "@/components/SprayGraph";
+import {useStore} from "vuex";
+import {onMounted, reactive} from "vue";
+import {GetWeaponDmg} from "@/utils";
+
+export default {
+  name: "Details",
+  components: {SprayGraph, MultiKillsChart},
+  setup() {
+    const store = useStore()
+
+    const data = reactive({
+      spray: [],
+    })
+
+    const getWeaponDamage = async () => {
+      const resData = await GetWeaponDmg(store.state.matchDetails.match_id)
+      data.spray = resData.spray
+    }
+
+    onMounted(() => {
+      getWeaponDamage()
+    })
+
+    return {data}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.details-site {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  h3 {
+    margin-bottom: 1rem;
+  }
+
+  hr {
+    width: 100%;
+    border: 1px solid white;
+  }
+
+  .multi-kills {
+    margin-top: 1rem;
+  }
+}
+</style>

src/components/MultiKillsChart.vue

@@ -1,7 +1,5 @@
 <template>
-  <div class="multi-kills">
-    <h3>Multi-Kills</h3>
-    <div class="flexbreak"></div>
+  <div class="charts">
     <div id="multi-kills-chart-1"></div>
     <div id="multi-kills-chart-2"></div>
   </div>
@@ -17,7 +15,7 @@ import {checkStatEmpty, getPlayerArr} from "../utils";
 import {useStore} from "vuex";
 
 export default {
-  name: "FlashChart",
+  name: "MultiKillsChart",
   setup() {
     const store = useStore()
 
@@ -130,10 +128,16 @@ export default {
     const buildCharts = () => {
       disposeCharts()
 
-      myChart1 = echarts.init(document.getElementById('multi-kills-chart-1'), {}, {width: width.value, height: height.value});
+      myChart1 = echarts.init(document.getElementById('multi-kills-chart-1'), {}, {
+        width: width.value,
+        height: height.value
+      });
       myChart1.setOption(optionGen(1));
 
-      myChart2 = echarts.init(document.getElementById('multi-kills-chart-2'), {}, {width: width.value, height: height.value});
+      myChart2 = echarts.init(document.getElementById('multi-kills-chart-2'), {}, {
+        width: width.value,
+        height: height.value
+      });
       myChart2.setOption(optionGen(2));
     }
 
@@ -168,31 +172,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.multi-kills {
+.charts {
   display: flex;
-  flex-wrap: wrap;
-  margin-bottom: 1rem;
-
-  .flexbreak {
-    flex-basis: 100%;
-    margin-bottom: 2rem;
-    height: 0;
-  }
-
-  h3 {
-    margin: 1rem auto -1rem;
-  }
 
   #multi-kills-chart-1,
   #multi-kills-chart-2 {
     flex-basis: 50%;
   }
 }
-
-@media (max-width: 1200px) {
-  .multi-kills {
-    justify-content: center;
-    align-items: center;
-  }
-}
 </style>

src/components/SprayGraph.vue

@@ -0,0 +1,26 @@
+<template>
+  <h3>This Graph will be available soon</h3>
+</template>
+
+<script>
+import {watch} from "vue";
+
+export default {
+  name: "SprayGraph",
+  props: {
+    spray: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    watch(() => props.spray, () => {
+      console.log(props.spray)
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>