more refactoring ✨
This commit is contained in:
cnachtigall1991
@@ -1,188 +1,120 @@
|
||||
<template>
|
||||
<div :style="props.total.self || props.total.team || props.total.enemy ? 'display: flex' : 'display: none'"
|
||||
class="player-flash">
|
||||
<div class="heading">
|
||||
<img :src="props.avatar" alt="Player avatar" class="avatar">
|
||||
<h4>{{ props.name }}</h4>
|
||||
<h4 class="text-center mt-3">Flash-Duration <small class="text-muted">(in s)</small></h4>
|
||||
<div v-if="props.stats" class="player-dmg d-xxl-flex">
|
||||
<div class="team-1 mx-5">
|
||||
<h4 class="text-center mt-3 mb-3">Team 1</h4>
|
||||
<div id="flash-chart-1"></div>
|
||||
</div>
|
||||
<div class="team-2 mx-5">
|
||||
<h4 class="text-center mt-3 mb-3">Team 2</h4>
|
||||
<div id="flash-chart-2"></div>
|
||||
</div>
|
||||
<div :id="'flash-chart-' + props.id"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts/core';
|
||||
import {LegendComponent, TooltipComponent} from 'echarts/components';
|
||||
import {PieChart} from 'echarts/charts';
|
||||
import {LabelLayout} from 'echarts/features';
|
||||
import {GridComponent, LegendComponent, TooltipComponent} from 'echarts/components';
|
||||
import {BarChart} from 'echarts/charts';
|
||||
import {CanvasRenderer} from 'echarts/renderers';
|
||||
import {onMounted} from "vue";
|
||||
import {checkStatEmpty, getPlayerArr} from "../utils";
|
||||
|
||||
export default {
|
||||
name: "FlashChart",
|
||||
props: {
|
||||
id: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
required: true
|
||||
},
|
||||
avatar: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true
|
||||
},
|
||||
total: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
duration: {
|
||||
stats: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
onMounted(() => {
|
||||
echarts.use([
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
PieChart,
|
||||
CanvasRenderer,
|
||||
LabelLayout
|
||||
]);
|
||||
const durationArr = (stats, team, prop) => {
|
||||
if (['team', 'enemy', 'self'].indexOf(prop) > -1) {
|
||||
let arr = []
|
||||
for (let i = (team - 1) * 5; i < team * 5; i++) {
|
||||
arr.push(checkStatEmpty(Function('return(function(stats, i){ return stats[i].flash.duration.' + prop + '})')()(stats, i)).toFixed(2))
|
||||
}
|
||||
arr.reverse()
|
||||
|
||||
let myChart = echarts.init(document.getElementById(`flash-chart-${props.id}`), {},{width: 600, height: 400});
|
||||
let option
|
||||
return arr
|
||||
}
|
||||
}
|
||||
|
||||
option = {
|
||||
const setOptions = (id, color) => {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
shadowStyle: {
|
||||
shadowBlur: 2,
|
||||
shadowColor: 'rgba(255, 255, 255, .3)'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [
|
||||
{
|
||||
name: 'Self',
|
||||
textStyle: {
|
||||
color: 'white',
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Team',
|
||||
textStyle: {
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Enemy',
|
||||
textStyle: {
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
]
|
||||
textStyle: {
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0.01]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: getPlayerArr(props.stats, id)
|
||||
},
|
||||
color: color,
|
||||
series: [
|
||||
{
|
||||
name: 'Flash-Count',
|
||||
type: 'pie',
|
||||
radius: [0, '40%'],
|
||||
avoidLabelOverlap: true,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#000',
|
||||
borderWidth: 3
|
||||
},
|
||||
label: {
|
||||
position: 'inside',
|
||||
fontsize: 36,
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: props.total.self ? props.total.self : null,
|
||||
name: 'Self',
|
||||
selected: true
|
||||
},
|
||||
{
|
||||
value: props.total.team ? props.total.team : null,
|
||||
name: 'Team'
|
||||
},
|
||||
{
|
||||
value: props.total.enemy ? props.total.enemy : null,
|
||||
name: 'Enemy'
|
||||
}
|
||||
]
|
||||
name: 'Enemy',
|
||||
type: 'bar',
|
||||
data: durationArr(props.stats, id, 'enemy'),
|
||||
},
|
||||
{
|
||||
name: 'Flash-Duration (in s)',
|
||||
type: 'pie',
|
||||
radius: ['45%', '65%'],
|
||||
avoidLabelOverlap: true,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#000',
|
||||
borderWidth: 3
|
||||
},
|
||||
labelLine: {
|
||||
length: 20
|
||||
},
|
||||
label: {
|
||||
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
|
||||
backgroundColor: '#F6F8FC',
|
||||
borderColor: '#8C8D8E',
|
||||
borderWidth: 1,
|
||||
borderRadius: 4,
|
||||
rich: {
|
||||
a: {
|
||||
color: '#6E7079',
|
||||
lineHeight: 22,
|
||||
align: 'center'
|
||||
},
|
||||
hr: {
|
||||
borderColor: '#8C8D8E',
|
||||
width: '100%',
|
||||
borderWidth: 1,
|
||||
height: 0
|
||||
},
|
||||
b: {
|
||||
color: '#4C5058',
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
lineHeight: 33
|
||||
},
|
||||
per: {
|
||||
color: '#fff',
|
||||
backgroundColor: '#4C5058',
|
||||
padding: [3, 4],
|
||||
borderRadius: 4
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: props.duration.self ? props.duration.self.toFixed(2) : null,
|
||||
name: 'Self'
|
||||
},
|
||||
{
|
||||
value: props.duration.team ? props.duration.team.toFixed(2) : null,
|
||||
name: 'Team'
|
||||
},
|
||||
{
|
||||
value: props.duration.enemy ? props.duration.enemy.toFixed(2) : null,
|
||||
name: 'Enemy'
|
||||
}
|
||||
]
|
||||
name: 'Team',
|
||||
type: 'bar',
|
||||
data: durationArr(props.stats, id, 'team'),
|
||||
},
|
||||
{
|
||||
name: 'Self',
|
||||
type: 'bar',
|
||||
data: durationArr(props.stats, id, 'self'),
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
myChart.setOption(option);
|
||||
let myChart1, myChart2, option1, option2
|
||||
|
||||
onMounted(() => {
|
||||
if (props.stats) {
|
||||
const color = ['indianred', '#69b13b', 'cornflowerblue']
|
||||
|
||||
echarts.use([
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
LegendComponent,
|
||||
BarChart,
|
||||
CanvasRenderer
|
||||
]);
|
||||
|
||||
myChart1 = echarts.init(document.getElementById('flash-chart-1'), {}, {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);
|
||||
myChart2.setOption(option2);
|
||||
}
|
||||
})
|
||||
|
||||
return {props}
|
||||
@@ -195,27 +127,9 @@ export default {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.heading {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
margin-bottom: -20px;
|
||||
|
||||
.avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 through 9 {
|
||||
#flash-chart-#{$i} {
|
||||
margin: 40px 40px -40px 40px;
|
||||
h4 {
|
||||
margin-top: 7px;
|
||||
color: cornflowerblue;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user