142 lines
3.1 KiB
Vue
142 lines
3.1 KiB
Vue
<template>
|
|
<div class="utility-chart-total" v-if="props.stats">
|
|
<div class="heading">
|
|
<h4>Total Utility Damage</h4>
|
|
</div>
|
|
<div id="utility-chart-total"></div>
|
|
<hr>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
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";
|
|
|
|
export default {
|
|
name: "FlashChart",
|
|
props: {
|
|
stats: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
},
|
|
setup(props) {
|
|
const checkStatEmpty = (stat) => {
|
|
if (stat)
|
|
return stat
|
|
else
|
|
return 0
|
|
}
|
|
|
|
const seriesArr = (stats) => {
|
|
let arr = []
|
|
for (let i = 0; i < stats.length; i++) {
|
|
const sum = checkStatEmpty(stats[i].dmg.ud.flames) + checkStatEmpty(stats[i].dmg.ud.flash) + checkStatEmpty(stats[i].dmg.ud.he) + checkStatEmpty(stats[i].dmg.ud.smoke)
|
|
|
|
if (sum !== 0) {
|
|
arr.push({
|
|
name: stats[i].player.name,
|
|
type: 'bar',
|
|
stack: 'total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [sum]
|
|
})
|
|
}
|
|
}
|
|
|
|
arr.sort((a, b) => parseFloat(b.data[0]) - parseFloat(a.data[0]))
|
|
|
|
return arr
|
|
}
|
|
|
|
onMounted(() => {
|
|
echarts.use([
|
|
TooltipComponent,
|
|
GridComponent,
|
|
LegendComponent,
|
|
BarChart,
|
|
CanvasRenderer
|
|
]);
|
|
|
|
let myChart = echarts.init(document.getElementById('utility-chart-total'), {}, {width: 800, height: 200});
|
|
let option
|
|
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
// Use axis to trigger tooltip
|
|
type: 'shadow' // 'shadow' as default; can also be 'line'
|
|
}
|
|
},
|
|
// color: ['#143147', '#39546c', '#617a94', '#89a2bd', '#b3cce8', '#eac65c', '#bd9d2c', '#917501', '#685000', '#412c00'],
|
|
// color: ['#003470', '#005a9b', '#0982c7', '#4bace5', '#90d3fe', '#febf4a', '#d7931c', '#ac6a01', '#804400', '#572000'],
|
|
// color: ['#888F98', '#10121A', '#1B2732', '#5F7892', '#C3A235'],
|
|
legend: {
|
|
textStyle: {
|
|
color: 'white'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value'
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: ['Total']
|
|
},
|
|
aria: {
|
|
enabled: true,
|
|
show: true,
|
|
decal: {
|
|
show: true
|
|
}
|
|
},
|
|
|
|
series: seriesArr(props.stats)
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
})
|
|
|
|
return {props}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.utility-chart-total {
|
|
.heading {
|
|
display: flex;
|
|
margin-top: 10px;
|
|
margin-bottom: -30px;
|
|
|
|
h4 {
|
|
margin: 7px auto 0;
|
|
}
|
|
}
|
|
|
|
p {
|
|
padding-top: 40px;
|
|
margin-bottom: -20px;
|
|
}
|
|
}
|
|
|
|
#utility-chart-total {
|
|
margin: 40px 0;
|
|
}
|
|
</style>
|