87 lines
2.8 KiB
Vue
87 lines
2.8 KiB
Vue
<template>
|
|
<div class="ks-model-chart-item-child" style="width:50%;display: block;float:left;position: relative">
|
|
<div class="ks-model-chart-item-wrapper" ref="chartContainer" style="height:350px;"></div>
|
|
<div class="ks-model-chart-item-description">
|
|
<span class="pre">{{ lastItem?.blueWinRounds ?? 0}}胜 {{ lastItem?.redWinRounds ?? 0}}败</span>
|
|
<span class="total">共{{ deductionPod.totalRound??0 }}场</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, nextTick, type PropType, ref, watch } from 'vue';
|
|
import * as echarts from 'echarts';
|
|
import type { ModelDeductionData, DeductionPod } from '../types';
|
|
import { createPieChartOption } from './pie-options';
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
datas: {
|
|
type: Array as PropType<ModelDeductionData[]>,
|
|
default: [],
|
|
},
|
|
deductionPod: {
|
|
type: [Object] as PropType<DeductionPod|null | undefined>,
|
|
},
|
|
redName: {
|
|
type: String as PropType<String>,
|
|
default: '红方',
|
|
},
|
|
blueName: {
|
|
type: String as PropType<String>,
|
|
default: '蓝方',
|
|
},
|
|
},
|
|
setup(props) {
|
|
const chartContainer = ref<HTMLElement | null>(null);
|
|
let chartInstance: echarts.ECharts | null = null;
|
|
const deductionPod = ref<Partial<DeductionPod>>({})
|
|
const lastItem = ref<ModelDeductionData|null | undefined>(null)
|
|
|
|
const initChart = (option: any) => {
|
|
if (!chartContainer.value) return;
|
|
|
|
if (chartInstance) {
|
|
chartInstance.dispose();
|
|
}
|
|
chartInstance = echarts.init(chartContainer.value);
|
|
|
|
chartInstance.setOption(option);
|
|
|
|
// 自适应窗口大小（可选，提升体验）
|
|
window.addEventListener('resize', () => {
|
|
chartInstance?.resize();
|
|
});
|
|
};
|
|
|
|
const load = (d: ModelDeductionData[]) => {
|
|
const blueName = props.blueName ?? '蓝方';
|
|
const redName = props.redName ?? '红方';
|
|
|
|
let pre = 0;
|
|
|
|
lastItem.value = null;
|
|
if (d && d.length >= 1) {
|
|
lastItem.value = d[d.length - 1] as ModelDeductionData;
|
|
const mineRounds = lastItem.value?.blueWinRounds ?? 0;
|
|
const totalRound = props.deductionPod?.totalRound ?? 0;
|
|
if (totalRound > 0) {
|
|
pre = Number((mineRounds / totalRound * 100).toFixed(2));
|
|
}
|
|
console.error('blue',mineRounds,totalRound)
|
|
}
|
|
const options = createPieChartOption(`${blueName}胜率`, 'blue', pre, `${blueName}胜率`, blueName as string, redName as string);
|
|
nextTick(() => initChart(options));
|
|
};
|
|
|
|
watch(() => props.datas, (n: ModelDeductionData[]) => load(n), { deep: true, immediate: true });
|
|
watch(() => props.deductionPod, (n: DeductionPod | null| undefined ) => deductionPod.value = n ?? {}, { deep: true, immediate: true });
|
|
|
|
return {
|
|
lastItem,
|
|
deductionPod,
|
|
chartContainer
|
|
};
|
|
}
|
|
});
|
|
</script> |