added SprayGraph.vue

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>