fixed bug with charts not showing + better mobile support

src/components/EqValueGraph.vue

@@ -8,9 +8,9 @@
 
 <script>
 
-import {getPlayerValue} from "../utils";
+import {getPlayerValue} from "@/utils";
 import {useStore} from "vuex";
-import {onBeforeMount, onMounted, reactive, watch} from "vue";
+import {onBeforeMount, onMounted, onUnmounted, reactive, ref, watch} from "vue";
 
 import * as echarts from 'echarts/core';
 import {
@@ -29,6 +29,12 @@ export default {
   setup() {
     const store = useStore()
 
+    let myChart1, max_rounds
+    let valueList = []
+    let dataList = []
+    const width = ref(window.innerWidth >= 800 && window.innerWidth <= 1200 ? window.innerWidth : window.innerWidth < 800 ? 800 : 1200)
+    const height = ref(width.value * 1 / 3)
+
     const data = reactive({
       rounds: {},
       team: [],
@@ -164,7 +170,21 @@ export default {
       }
     }
 
-    let myChart1, max_rounds
+    const disposeCharts = () => {
+      if (myChart1 != null && myChart1 !== '' && myChart1 !== undefined) {
+        myChart1.dispose()
+      }
+    }
+
+    const buildCharts = () => {
+      disposeCharts()
+
+      myChart1 = echarts.init(document.getElementById('economy-graph'), {}, {
+        width: width.value,
+        height: height.value
+      })
+      myChart1.setOption(optionGen(dataList, valueList))
+    }
 
     onBeforeMount(() => {
       max_rounds = store.state.matchDetails.max_rounds ? store.state.matchDetails.max_rounds : 30
@@ -182,7 +202,6 @@ export default {
           UniversalTransition,
           MarkAreaComponent
         ]);
-        myChart1 = echarts.init(document.getElementById('economy-graph'), {}, {width: 1200, height: 400})
 
         data.team.push(getTeamPlayer(store.state.matchDetails.stats, 1))
         data.team.push(getTeamPlayer(store.state.matchDetails.stats, 2))
@@ -191,18 +210,36 @@ export default {
       }
     })
 
+    onUnmounted(() => {
+      disposeCharts()
+    })
+
     watch(() => data.rounds, () => {
       data.eq_team_1 = sumArr(data.eq_team_player_1)
       data.eq_team_2 = sumArr(data.eq_team_player_2)
 
-      const valueList = BuildGraphData(data.eq_team_1, data.eq_team_2, max_rounds)
+      valueList = BuildGraphData(data.eq_team_1, data.eq_team_2, max_rounds)
 
-      const dataList = Array.from(Array(valueList.length + 1).keys())
+      dataList = Array.from(Array(valueList.length + 1).keys())
       dataList.shift()
 
-      myChart1.setOption(optionGen(dataList, valueList))
+      buildCharts()
     })
 
+    window.onresize = () => {
+      if (window.innerWidth > 1200) {
+        width.value = 1200
+      }
+      if (window.innerWidth <= 1200 && window.innerWidth >= 800) {
+        width.value = window.innerWidth - 20
+      }
+      if (window.innerWidth < 800) {
+        width.value = 800
+      }
+
+      height.value = width.value * 1 / 3
+      buildCharts()
+    }
   }
 }
 </script>
@@ -215,7 +252,7 @@ export default {
   justify-content: center;
   align-items: center;
 
-  margin: 1rem auto 1rem;
+  margin: 1rem auto 3rem;
 
   h3 {
     margin-bottom: -1rem;
@@ -230,11 +267,12 @@ export default {
     h3 {
       margin-left: 2rem;
     }
+  }
+}
 
-    #economy-graph {
-      overflow: scroll;
-      margin: 0 0 0 -3rem;
-    }
+@media (max-width: 800px) and (min-width: 1199px) {
+  #economy-graph {
+    overflow: scroll;
   }
 }
 </style>