diff --git a/src/components/EqValueGraph.vue b/src/components/EqValueGraph.vue index a81c03d..6d66f62 100644 --- a/src/components/EqValueGraph.vue +++ b/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 { UniversalTransition } from 'echarts/features'; -import { CanvasRenderer } from 'echarts/renderers'; +import {LineChart} from 'echarts/charts'; +import {UniversalTransition} from 'echarts/features'; +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()