95 lines
2.4 KiB
Vue
95 lines
2.4 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 { createScatterChartOption } from './scatter-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 defaultValues = {
|
|
hide_missile: 0,
|
|
angle: 0,
|
|
height: 0,
|
|
speed: 0,
|
|
}
|
|
const parseJson = (v: any)=> {
|
|
let values = {...defaultValues}
|
|
try{
|
|
values = JSON.parse(v as string);
|
|
} catch (e: any) {
|
|
console.error('error',e);
|
|
}
|
|
return {
|
|
...defaultValues,
|
|
...values
|
|
}
|
|
}
|
|
|
|
const load = (d: ModelDeductionData[]) => {
|
|
const xAxisData: string[] = [];
|
|
const blueData: any[] = [];
|
|
const redData: any[] = [];
|
|
if (d) {
|
|
d.forEach(item => {
|
|
let blueValues = parseJson(item.returnComponentsBlue);
|
|
let redValues = parseJson(item.returnComponentsRed);
|
|
|
|
xAxisData.push(`轮数${item.currentEpisode}`);
|
|
blueData.push(blueValues.speed);
|
|
redData.push(redValues.speed);
|
|
});
|
|
}
|
|
const options = createScatterChartOption({
|
|
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>
|