fix-attempt for damage chart not loading initially

This commit is contained in:
cnachtigall1991
2021-10-17 01:56:49 +02:00
parent 0fb2371c60
commit 6ffd7685ab
3 changed files with 28 additions and 26 deletions

View File

@@ -38,7 +38,7 @@ export default {
} }
} }
const optionGen = (stats, team) => { const optionGen = (team) => {
return { return {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
@@ -66,7 +66,7 @@ export default {
axisTick: { axisTick: {
show: false show: false
}, },
data: getPlayerArr(stats, team) data: getPlayerArr(store.state.matchDetails.stats, team)
} }
], ],
series: [ series: [
@@ -80,7 +80,7 @@ export default {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: dataArr(stats, team, 'team') data: dataArr(store.state.matchDetails.stats, team, 'team')
}, },
{ {
name: 'Enemy', name: 'Enemy',
@@ -93,12 +93,14 @@ export default {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: dataArr(stats, team, 'enemy') data: dataArr(store.state.matchDetails.stats, team, 'enemy')
} }
] ]
} }
} }
let myChart1, myChart2
onMounted(() => { onMounted(() => {
if (store.state.matchDetails.stats) { if (store.state.matchDetails.stats) {
echarts.use([ echarts.use([
@@ -109,13 +111,11 @@ export default {
CanvasRenderer CanvasRenderer
]); ]);
let myChart1 = echarts.init(document.getElementById('dmg-chart-1'), {}, {width: 1000, height: 300}); myChart1 = echarts.init(document.getElementById('dmg-chart-1'), {}, {width: 1000, height: 300});
let myChart2 = echarts.init(document.getElementById('dmg-chart-2'), {}, {width: 1000, height: 300}); myChart2 = echarts.init(document.getElementById('dmg-chart-2'), {}, {width: 1000, height: 300});
let option1 = optionGen(store.state.matchDetails.stats, 1)
let option2 = optionGen(store.state.matchDetails.stats, 2)
myChart1.setOption(option1); myChart1.setOption(optionGen(1));
myChart2.setOption(option2); myChart2.setOption(optionGen(2));
} }
}) })
} }

View File

@@ -85,7 +85,7 @@ export default {
} }
} }
let myChart1, myChart2, option1, option2 let myChart1, myChart2
onMounted(() => { onMounted(() => {
if (store.state.matchDetails.stats) { if (store.state.matchDetails.stats) {
@@ -101,11 +101,9 @@ export default {
myChart1 = echarts.init(document.getElementById('flash-chart-1'), {}, {width: 600, height: 400}); myChart1 = echarts.init(document.getElementById('flash-chart-1'), {}, {width: 600, height: 400});
myChart2 = echarts.init(document.getElementById('flash-chart-2'), {}, {width: 600, height: 400}); myChart2 = echarts.init(document.getElementById('flash-chart-2'), {}, {width: 600, height: 400});
option1 = setOptions(1, color)
option2 = setOptions(2, color)
myChart1.setOption(option1); myChart1.setOption(setOptions(1, color));
myChart2.setOption(option2); myChart2.setOption(setOptions(2, color));
} }
}) })
} }

View File

@@ -18,7 +18,7 @@ import {GridComponent, TooltipComponent, VisualMapComponent} from 'echarts/compo
import {HeatmapChart} from 'echarts/charts'; import {HeatmapChart} from 'echarts/charts';
import {CanvasRenderer} from 'echarts/renderers'; import {CanvasRenderer} from 'echarts/renderers';
import {onMounted} from "vue"; import {onMounted} from "vue";
import {getPlayerArr, checkStatEmpty} from "../utils"; import {checkStatEmpty, getPlayerArr} from "../utils";
import {useStore} from "vuex"; import {useStore} from "vuex";
export default { export default {
@@ -119,20 +119,24 @@ export default {
} }
} }
onMounted(() => { let myChart1, myChart2
echarts.use([
TooltipComponent,
GridComponent,
VisualMapComponent,
HeatmapChart,
CanvasRenderer
]);
let myChart1 = echarts.init(document.getElementById('multi-kills-chart-1'), {}, {width: 500, height: 500}); onMounted(() => {
let myChart2 = echarts.init(document.getElementById('multi-kills-chart-2'), {}, {width: 500, height: 500}); if (store.state.matchDetails.stats) {
echarts.use([
TooltipComponent,
GridComponent,
VisualMapComponent,
HeatmapChart,
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)); myChart1.setOption(optionGen(1));
myChart2.setOption(optionGen(2)); myChart2.setOption(optionGen(2));
}
}) })
} }
} }