73 lines
1.9 KiB
Vue
73 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<div class="ks-model-chart-item" ref="chartContainer"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent, nextTick, type PropType, ref, watch } from 'vue';
|
||
|
|
import * as echarts from 'echarts';
|
||
|
|
import type { ModelDeductionData } from '../types';
|
||
|
|
import { createAreaChartOption } from './area-options';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
props: {
|
||
|
|
datas: {
|
||
|
|
type: Array as PropType<ModelDeductionData[]>,
|
||
|
|
default: [],
|
||
|
|
},
|
||
|
|
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 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 xAxisData: string[] = [];
|
||
|
|
const blueData: any[] = [];
|
||
|
|
const redData: any[] = [];
|
||
|
|
if (d) {
|
||
|
|
d.forEach(item => {
|
||
|
|
xAxisData.push(`轮数${item.currentEpisode}`);
|
||
|
|
blueData.push(item.attackTimeBlue);
|
||
|
|
redData.push(item.attackTimeRed);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
const options = createAreaChartOption({
|
||
|
|
title: '总攻击持续时间', xAxisData, blueData, redData,
|
||
|
|
blueName: props.blueName as string,
|
||
|
|
redName: props.redName as string,
|
||
|
|
});
|
||
|
|
nextTick(() => initChart(options));
|
||
|
|
};
|
||
|
|
|
||
|
|
watch(() => props.datas, (n: ModelDeductionData[]) => load(n), { deep: true, immediate: true });
|
||
|
|
|
||
|
|
return {
|
||
|
|
chartContainer
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|