csgowtf/src/components/DamageChart.vue

<template>
  <div class="player-dmg">
    <div id="dmg-chart-1"></div>
    <hr>
    <div id="dmg-chart-2"></div>
  </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";
import {checkStatEmpty, getPlayerArr} from "../utils";
import {useStore} from "vuex";

export default {
  name: "FlashChart",
  setup() {
    const store = useStore()

    const dataArr = (stats, team, prop) => {
      if (['team', 'enemy', 'self'].indexOf(prop) > -1) {
        let arr = []
        for (let i = (team - 1) * 5; i < team * 5; i++) {
          arr.push({
            value: checkStatEmpty(Function('return(function(stats, i){ return stats[i].dmg.' + prop + '})')()(stats, i)) * (prop === 'enemy' ? 1 : -1),
            itemStyle: {
              color: prop === 'enemy' ? getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].color}`) : 'firebrick'
            }
          })
        }
        arr.reverse()
        return arr
      }
    }

    const optionGen = (team) => {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          show: false
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            min: -300
          }
        ],
        yAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            data: getPlayerArr(store.state.matchDetails.stats, team)
          }
        ],
        series: [
          {
            name: 'Team',
            type: 'bar',
            stack: 'Total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series'
            },
            data: dataArr(store.state.matchDetails.stats, team, 'team')
          },
          {
            name: 'Enemy',
            type: 'bar',
            stack: 'Total',
            label: {
              show: true,
              position: 'inside'
            },
            emphasis: {
              focus: 'series'
            },
            data: dataArr(store.state.matchDetails.stats, team, 'enemy')
          }
        ]
      }
    }

    let myChart1, myChart2

    onMounted(() => {
      if (store.state.matchDetails.stats) {
        echarts.use([
          TooltipComponent,
          GridComponent,
          LegendComponent,
          BarChart,
          CanvasRenderer
        ]);

        myChart1 = echarts.init(document.getElementById('dmg-chart-1'), {}, {width: 1000, height: 300});
        myChart2 = echarts.init(document.getElementById('dmg-chart-2'), {}, {width: 1000, height: 300});

        myChart1.setOption(optionGen(1));
        myChart2.setOption(optionGen(2));
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.player-dmg {
  display: grid;
  grid-template-columns: 1rem 1fr 1rem;
  margin-bottom: 1rem;
  margin-top: 40px;

  & > * {
    grid-column: 1 / -1;
  }

  #dmg-chart-1,
  #dmg-chart-2 {
    margin-top: -40px;
  }
}

@media (max-width: 1200px) {
  #dmg-chart-1,
  #dmg-chart-2 {
    overflow: scroll;
  }
}
</style>