added half-point mark for economy graph

src/components/EqValueGraph.vue

@@ -11,14 +11,15 @@ import {onBeforeMount, onMounted, reactive, watch} from "vue";
 
 import * as echarts from 'echarts/core';
 import {
+  GridComponent,
+  MarkAreaComponent,
   TitleComponent,
   TooltipComponent,
-  GridComponent,
   VisualMapComponent
 } from 'echarts/components';
-import { LineChart } from 'echarts/charts';
+import {LineChart} from 'echarts/charts';
-import { UniversalTransition } from 'echarts/features';
+import {UniversalTransition} from 'echarts/features';
-import { CanvasRenderer } from 'echarts/renderers';
+import {CanvasRenderer} from 'echarts/renderers';
 
 export default {
   name: "EqValueGraph",
@@ -81,7 +82,7 @@ export default {
       let newArr = []
       const half_point = max_rounds / 2 - 1
       for (let round in team_1) {
-        if (round < half_point) {
+        if (round <= half_point) {
           newArr.push(team_1[round] - team_2[round])
         } else
           newArr.push(team_2[round] - team_1[round])
@@ -106,6 +107,7 @@ export default {
         },
         xAxis: [
           {
+            type: 'category',
             data: dataList,
           }
         ],
@@ -114,7 +116,7 @@ export default {
         ],
         grid: [
           {
-            bottom: '60%'
+            bottom: '50%'
           },
           {
             top: '60%'
@@ -129,12 +131,31 @@ export default {
             },
             showSymbol: false,
             data: valueList,
+            markArea: {
+              data: [
+                [
+                  {
+                    name: 'Half-Point',
+                    xAxis: max_rounds / 2 - 1,
+                    label: {
+                      color: 'white'
                     },
+                  },
+                  {
+                    xAxis: max_rounds / 2
+                  }
                 ]
+              ],
+              itemStyle: {
+                color: 'rgba(200,200,200, 0.3)'
+              }
+            }
+          },
+        ],
       }
     }
 
-    let myChart1
+    let myChart1, max_rounds
 
     onBeforeMount(() => {
       data.team.push(getTeamPlayer(store.state.matchDetails.stats, 1))
@@ -152,10 +173,12 @@ export default {
           VisualMapComponent,
           LineChart,
           CanvasRenderer,
-          UniversalTransition
+          UniversalTransition,
+          MarkAreaComponent
         ]);
 
         myChart1 = echarts.init(document.getElementById('economy-graph'), {}, {width: 1000, height: 800});
+        max_rounds = store.state.matchDetails.max_rounds ? store.state.matchDetails.max_rounds : 30
       }
     })
 
@@ -163,7 +186,7 @@ export default {
       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, store.state.matchDetails.max_rounds ? store.state.matchDetails.max_rounds : 30)
+      const valueList = BuildGraphData(data.eq_team_1, data.eq_team_2, max_rounds)
 
       const dataList = Array.from(Array(valueList.length + 1).keys())
       dataList.shift()