added pie-charts for flashes

src/components/FlashChart.vue

@@ -0,0 +1,222 @@
+<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>
+    </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 {CanvasRenderer} from 'echarts/renderers';
+import {onMounted} from "vue";
+
+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: {
+      type: Object,
+      required: true
+    },
+  },
+  setup(props) {
+    onMounted(() => {
+      echarts.use([
+        TooltipComponent,
+        LegendComponent,
+        PieChart,
+        CanvasRenderer,
+        LabelLayout
+      ]);
+
+      let myChart = echarts.init(document.getElementById(`flash-chart-${props.id}`));
+      let option
+
+      option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        legend: {
+          data: [
+            {
+              name: 'Self',
+              textStyle: {
+                color: 'white',
+              }
+            },
+            {
+              name: 'Team',
+              textStyle: {
+                color: 'white'
+              }
+            },
+            {
+              name: 'Enemy',
+              textStyle: {
+                color: 'white'
+              }
+            },
+          ]
+        },
+        series: [
+          {
+            name: 'Flash-Count',
+            type: 'pie',
+            radius: [0, '30%'],
+            avoidLabelOverlap: true,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#000',
+              borderWidth: 3
+            },
+            label: {
+              show: false
+            },
+            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: 'Flash-Duration (in s)',
+            type: 'pie',
+            radius: ['35%', '55%'],
+            avoidLabelOverlap: true,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#000',
+              borderWidth: 3
+            },
+            labelLine: {
+              length: 10
+            },
+            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',
+                selected: true
+              },
+              {
+                value: props.duration.team ? props.duration.team.toFixed(2) : null,
+                name: 'Team'
+              },
+              {
+                value: props.duration.enemy ? props.duration.enemy.toFixed(2) : null,
+                name: 'Enemy'
+              }
+            ]
+          }
+        ]
+      };
+
+      myChart.setOption(option);
+    })
+
+    return {props}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.player-flash {
+  flex-direction: column;
+  align-items: center;
+
+  .heading {
+    display: flex;
+    margin-top: 10px;
+    margin-bottom: -30px;
+
+    .avatar {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      margin-right: 20px;
+    }
+
+    h4 {
+      margin-top: 7px;
+    }
+  }
+}
+
+@for $i from 0 through 9 {
+  #flash-chart-#{$i} {
+    width: 600px;
+    height: 400px;
+    margin: 40px 40px -40px 40px;
+  }
+}
+</style>