fixed bug with charts not showing + better mobile support

src/components/DamageChart.vue

@@ -11,7 +11,7 @@ import * as echarts from 'echarts/core';
 import {GridComponent, LegendComponent, TooltipComponent} from 'echarts/components';
 import {BarChart} 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,6 +20,10 @@ export default {
   setup() {
     const store = useStore()
 
+    let myChart1, myChart2
+    const width = ref(window.innerWidth <= 1000 && window.innerWidth >= 751 ? window.innerWidth : 1000)
+    const height = ref(window.innerWidth >= 751 ? width.value * 3 / 10 : window.innerWidth >= 501 && window.innerWidth <= 751 ? width.value * 3 / 7.5 : width.value * 3 / 5)
+
     const dataArr = (stats, team, prop) => {
       if (['team', 'enemy', 'self'].indexOf(prop) > -1) {
         let arr = []
@@ -98,7 +102,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('dmg-chart-1'), {}, {width: width.value, height: height.value});
+      myChart1.setOption(optionGen(1));
+
+      myChart2 = echarts.init(document.getElementById('dmg-chart-2'), {}, {width: width.value, height: height.value});
+      myChart2.setOption(optionGen(2));
+    }
 
     onMounted(() => {
       if (store.state.matchDetails.stats) {
@@ -110,13 +131,30 @@ export default {
           CanvasRenderer
         ]);
 
-        myChart1 = echarts.init(document.getElementById('dmg-chart-1'), {}, {width: 1000, height: 300});
-        myChart2 = echarts.init(document.getElementById('dmg-chart-2'), {}, {width: 1000, height: 300});
-
-        myChart1.setOption(optionGen(1));
-        myChart2.setOption(optionGen(2));
+        buildCharts()
       }
     })
+
+    onUnmounted(() => {
+      disposeCharts()
+    })
+
+    window.onresize = () => {
+      if (window.innerWidth <= 1000) {
+        width.value = window.innerWidth - 20
+        if (window.innerWidth <= 500) {
+          height.value = width.value * 3 / 5
+        }
+        if (window.innerWidth <= 750 && window.innerWidth >= 501) {
+          height.value = width.value * 3 / 7.5
+        }
+        if (window.innerWidth <= 1000 && window.innerWidth >= 751) {
+          height.value = width.value * 3 / 10
+        }
+      }
+
+      buildCharts()
+    }
   }
 }
 </script>
@@ -137,11 +175,4 @@ export default {
     margin-top: -40px;
   }
 }
-
-@media (max-width: 1200px) {
-  #dmg-chart-1,
-  #dmg-chart-2 {
-    overflow: scroll;
-  }
-}
 </style>