<script setup lang="ts">
|
import { use } from 'echarts/core'
|
import { LineChart } from 'echarts/charts'
|
import { CanvasRenderer } from 'echarts/renderers'
|
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
|
import VChart from 'vue-echarts'
|
import { projectCycleChartOption, projectMetrics, type ProjectSeries } from '@/utils/projectCycleChart'
|
defineProps<{ series: ProjectSeries[]; positions: number[]; colors: string[]; hidden?: string[]; spliced?: boolean; factorWarning?: boolean }>()
|
const emit = defineEmits<{ hiddenChange: [keys: string[]] }>()
|
use([CanvasRenderer, LineChart, GridComponent, LegendComponent, TooltipComponent])
|
</script>
|
<template>
|
<section class="project-chart-panel">
|
<p v-if="factorWarning" class="factor-warning" role="status">电池组 F 不可用，未计算对应来源的每循环放电末容量 / F。</p>
|
<article v-for="metric in projectMetrics" :key="metric.key" class="project-chart-card"><header><strong>{{ metric.title }}</strong></header><VChart class="project-chart" :option="projectCycleChartOption(metric, series, positions, colors, hidden, spliced)" :update-options="{ notMerge: true }" autoresize @legendselectchanged="emit('hiddenChange', series.filter(item => !$event.selected[item.name]).map(item => item.key))" /></article>
|
</section>
|
</template>
|
<style scoped>
|
.project-chart-panel{display:grid;gap:16px;min-width:0}.project-chart-card{min-width:0;border:1px solid #d8e1e9;background:#fff}.project-chart-card>header{height:44px;display:flex;align-items:center;padding:0 18px;border-bottom:1px solid #edf1f5}.project-chart-card>header strong{color:#26333f;font-size:13px}.project-chart{width:100%;height:270px}.factor-warning{margin:0;padding:10px 14px;border:1px solid #efd59e;color:#8b5a14;background:#fff8e9;font-size:12px}@media(max-width:680px){.project-chart{height:250px}.project-chart-card>header{padding:0 12px}}
|
</style>
|
