fixed bug with charts not showing + better mobile support

src/components/MultiKillsChart.vue

@@ -12,7 +12,7 @@ import * as echarts from 'echarts/core';
 import {GridComponent, TooltipComponent, VisualMapComponent} from 'echarts/components';
 import {HeatmapChart} from 'echarts/charts';
 import {CanvasRenderer} from 'echarts/renderers';
-import {onMounted} from "vue";
+import {onMounted, onUnmounted, ref} from "vue";
 import {checkStatEmpty, getPlayerArr} from "../utils";
 import {useStore} from "vuex";
 
@@ -20,7 +20,11 @@ export default {
   name: "FlashChart",
   setup() {
     const store = useStore()
+
     const multiKills = ['2k', '3k', '4k', '5k']
+    let myChart1, myChart2
+    const width = ref(window.innerWidth <= 500 ? window.innerWidth : 500)
+    const height = ref(width.value)
 
     const multiKillArr = (stats, team) => {
       let arr = []
@@ -114,7 +118,24 @@ export default {
       }
     }
 
-    let myChart1, myChart2
+    const disposeCharts = () => {
+      if (myChart1 != null && myChart1 !== '' && myChart1 !== undefined) {
+        myChart1.dispose()
+      }
+      if (myChart2 != null && myChart2 !== '' && myChart2 !== undefined) {
+        myChart2.dispose()
+      }
+    }
+
+    const buildCharts = () => {
+      disposeCharts()
+
+      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.setOption(optionGen(2));
+    }
 
     onMounted(() => {
       if (store.state.matchDetails.stats) {
@@ -126,13 +147,22 @@ export default {
           CanvasRenderer
         ]);
 
-        myChart1 = echarts.init(document.getElementById('multi-kills-chart-1'), {}, {width: 500, height: 500});
-        myChart2 = echarts.init(document.getElementById('multi-kills-chart-2'), {}, {width: 500, height: 500});
-
-        myChart1.setOption(optionGen(1));
-        myChart2.setOption(optionGen(2));
+        buildCharts()
       }
     })
+
+    onUnmounted(() => {
+      disposeCharts()
+    })
+
+    window.onresize = () => {
+      if (window.innerWidth <= 500) {
+        width.value = window.innerWidth - 20
+        height.value = width.value
+
+        buildCharts()
+      }
+    }
   }
 }
 </script>
@@ -161,17 +191,8 @@ export default {
 
 @media (max-width: 1200px) {
   .multi-kills {
-    justify-content: flex-start;
-    align-items: flex-start;
-    margin: 0 0 0 0;
-    overflow: hidden;
-
-    #multi-kills-chart-1,
-    #multi-kills-chart-2 {
-      flex-basis: 100%;
-      margin: 2rem 0 0 0;
-      overflow: scroll;
-    }
+    justify-content: center;
+    align-items: center;
   }
 }
 </style>