src/modules/report/data/screen-chart.ts

New file
@@ -0,0 +1,55 @@
export type ChartRow<T> = { item: T; value: number; even: boolean };

/** 图表取值：0 不画；碳减排可为负，展示时取绝对值。 */
export function chartValue(raw: number, carbon = false) {
    const n = Number(raw);
    if (!Number.isFinite(n) || n === 0) return 0;
    return carbon ? Math.abs(n) : n;
}

/**
 * 分类图数据：
 * - 部分有值：只保留当前指标 > 0 的类
 * - 全部为 0：evenSplit 时均分扇区（value=1 仅用于几何，even 标记给 tooltip 显示 0）
 */
export function chartSeries<T>(
    items: T[] | undefined,
    pick: (item: T) => number,
    opts?: { carbon?: boolean; evenSplit?: boolean }
): ChartRow<T>[] {
    const list = items || [];
    const rows = list.map(item => ({
        item,
        raw: chartValue(pick(item), opts?.carbon)
    }));
    const positive = rows.filter(e => e.raw > 0);
    if (positive.length) {
        return positive.map(e => ({ item: e.item, value: e.raw, even: false }));
    }
    if (opts?.evenSplit === false) {
        return rows.map(e => ({ item: e.item, value: 0, even: false }));
    }
    return rows.map(e => ({ item: e.item, value: 1, even: true }));
}

export function pieTooltipFormatter(unit = '') {
    return (p: any) => {
        const val = p.data?.even ? 0 : p.value;
        const u = unit ? ` ${unit}` : '';
        const pct = p.percent != null ? ` (${p.percent}%)` : '';
        return `${p.name}<br/>${val}${u}${pct}`;
    };
}

export function toPieData<T>(
    rows: ChartRow<T>[],
    name: (item: T) => string,
    color: (item: T) => string | undefined
) {
    return rows.map(row => ({
        name: name(row.item),
        value: row.value,
        even: row.even,
        itemStyle: { color: color(row.item) }
    }));
}

 src/modules/report/views/screen/carbon.vue

@@ -46,6 +46,7 @@
import KpiCard from '../../components/kpi-card.vue';
import PanelCard from '../../components/panel-card.vue';
import { TIME_RANGE_OPTIONS } from '../../data/screen';
import { chartSeries, pieTooltipFormatter, toPieData } from '../../data/screen-chart';
import { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen';

const { data, timeRange } = useScreenData();
@@ -129,7 +130,7 @@
}));

const sourceOption = computed(() => ({
    tooltip: { trigger: 'item', formatter: '{b}<br/>{c} kgCO₂e ({d}%)', ...tooltip() },
    tooltip: { trigger: 'item', ...tooltip(), formatter: pieTooltipFormatter('kgCO₂e') },
    legend: { bottom: 0, textStyle: { color: mutedColor.value } },
    series: [
        {
@@ -139,11 +140,11 @@
            padAngle: 3,
            itemStyle: { borderRadius: 6 },
            label: { color: textColor.value, formatter: '{b}\n{d}%' },
            data: data.value.recycleItems.map(e => ({
                name: e.name + '回收',
                value: e.carbon,
                itemStyle: { color: e.color }
            }))
            data: toPieData(
                chartSeries(data.value.recycleItems, e => e.carbon, { carbon: true }),
                e => e.name + '回收',
                e => e.color
            )
        }
    ]
}));

 src/modules/report/views/screen/map.vue

@@ -85,6 +85,7 @@
import ScreenMapPanel from '../../components/screen-map-panel.vue';
import CameraMonitor from '../../../monitor/views/cameras.vue';
import { TIME_RANGE_OPTIONS } from '../../data/screen';
import { chartSeries, pieTooltipFormatter, toPieData } from '../../data/screen-chart';
import { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen';

const { data, timeRange } = useScreenData();
@@ -142,7 +143,7 @@

/** 垃圾分类结构（饼） */
const mixOption = computed(() => ({
    tooltip: { trigger: 'item', formatter: '{b}<br/>{c} ({d}%)', ...tooltip() },
    tooltip: { trigger: 'item', ...tooltip(), formatter: pieTooltipFormatter() },
    series: [
        {
            type: 'pie',
@@ -151,18 +152,18 @@
            padAngle: 3,
            itemStyle: { borderRadius: 6 },
            label: { color: textColor.value, formatter: '{b}\n{d}%' },
            data: data.value.wasteMix.map(e => ({
                name: e.name,
                value: e[mixMetric.value],
                itemStyle: { color: e.color }
            }))
            data: toPieData(
                chartSeries(data.value.wasteMix, e => e[mixMetric.value]),
                e => e.name,
                e => e.color
            )
        }
    ]
}));

/** 碳减排来源（饼） */
/** 碳减排来源（饼）：碳值可为负，按绝对值展示减排量 */
const carbonOption = computed(() => ({
    tooltip: { trigger: 'item', formatter: '{b}<br/>{c} kgCO₂e ({d}%)', ...tooltip() },
    tooltip: { trigger: 'item', ...tooltip(), formatter: pieTooltipFormatter('kgCO₂e') },
    series: [
        {
            type: 'pie',
@@ -171,11 +172,11 @@
            padAngle: 3,
            itemStyle: { borderRadius: 6 },
            label: { color: textColor.value, formatter: '{b}\n{d}%' },
            data: data.value.recycleItems.map(e => ({
                name: e.name + '回收',
                value: e.carbon,
                itemStyle: { color: e.color }
            }))
            data: toPieData(
                chartSeries(data.value.recycleItems, e => e.carbon, { carbon: true }),
                e => e.name + '回收',
                e => e.color
            )
        }
    ]
}));
@@ -208,8 +209,12 @@

/** 各类回收量（横向条形） */
const itemOption = computed(() => {
    // 反转让数值最大的排在顶部
    const rows = [...data.value.recycleItems].reverse();
    const carbon = itemMetric.value === 'carbon';
    const rows = chartSeries(
        data.value.recycleItems,
        e => Number(e[itemMetric.value] || 0),
        { carbon, evenSplit: false }
    ).reverse();
    return {
        grid: { containLabel: true, left: 8, right: 24, top: 12, bottom: 8 },
        tooltip: {
@@ -229,7 +234,7 @@
        },
        yAxis: {
            type: 'category',
            data: rows.map(e => e.name),
            data: rows.map(e => e.item.name),
            axisLabel: { color: textColor.value },
            axisLine: { show: false },
            axisTick: { show: false }
@@ -238,11 +243,10 @@
            {
                type: 'bar',
                barWidth: 14,
                data: rows.map(e => Number(e[itemMetric.value] || 0)),
                data: rows.map(e => e.value),
                itemStyle: {
                    borderRadius: [0, 8, 8, 0],
                    // 沿用各类自身配色，与左侧碳减排饼图视觉一致
                    color: (params: any) => rows[params.dataIndex]?.color || primary.value
                    color: (params: any) => rows[params.dataIndex]?.item.color || primary.value
                }
            }
        ]

 src/modules/report/views/screen/overview.vue

@@ -52,6 +52,7 @@
import PanelCard from '../../components/panel-card.vue';
import ScreenCameraPreview from '../../components/screen-camera-preview.vue';
import { TIME_RANGE_OPTIONS } from '../../data/screen';
import { chartSeries, pieTooltipFormatter, toPieData } from '../../data/screen-chart';
import { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen';

const { data, timeRange } = useScreenData();
@@ -88,7 +89,7 @@
]);

const mixOption = computed(() => ({
    tooltip: { trigger: 'item', formatter: '{b}<br/>{c} ({d}%)', ...tooltip() },
    tooltip: { trigger: 'item', ...tooltip(), formatter: pieTooltipFormatter() },
    legend: { bottom: 0, textStyle: { color: mutedColor.value } },
    series: [
        {
@@ -98,11 +99,11 @@
            padAngle: 3,
            itemStyle: { borderRadius: 6 },
            label: { color: textColor.value, formatter: '{b}\n{d}%' },
            data: data.value.wasteMix.map(e => ({
                name: e.name,
                value: e[mixMetric.value],
                itemStyle: { color: e.color }
            }))
            data: toPieData(
                chartSeries(data.value.wasteMix, e => e[mixMetric.value]),
                e => e.name,
                e => e.color
            )
        }
    ]
}));

 src/modules/report/views/screen/resource.vue

@@ -35,6 +35,7 @@
import { computed } from 'vue';
import KpiCard from '../../components/kpi-card.vue';
import PanelCard from '../../components/panel-card.vue';
import { chartSeries, pieTooltipFormatter, toPieData } from '../../data/screen-chart';
import { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen';

const { data } = useScreenData();
@@ -50,7 +51,7 @@
]);

const pieOption = computed(() => ({
    tooltip: { trigger: 'item', formatter: '{b}<br/>{c} kg ({d}%)', ...tooltip() },
    tooltip: { trigger: 'item', ...tooltip(), formatter: pieTooltipFormatter('kg') },
    legend: { bottom: 0, textStyle: { color: mutedColor.value } },
    series: [
        {
@@ -60,14 +61,18 @@
            padAngle: 3,
            itemStyle: { borderRadius: 6 },
            label: { color: textColor.value, formatter: '{b} {d}%' },
            data: data.value.recycleItems.map(e => ({
                name: e.name,
                value: e.weight,
                itemStyle: { color: e.color }
            }))
            data: toPieData(
                chartSeries(data.value.recycleItems, e => e.weight),
                e => e.name,
                e => e.color
            )
        }
    ]
}));

const weightRows = computed(() =>
    chartSeries(data.value.recycleItems, e => e.weight, { evenSplit: false }).reverse()
);

const weightOption = computed(() => ({
    grid: { containLabel: true, left: 8, right: 28, top: 12, bottom: 8 },
@@ -82,7 +87,7 @@
    },
    yAxis: {
        type: 'category',
        data: data.value.recycleItems.map(e => e.name).reverse(),
        data: weightRows.value.map(e => e.item.name),
        axisLabel: { color: textColor.value },
        axisLine: { show: false },
        axisTick: { show: false }
@@ -91,19 +96,24 @@
        {
            type: 'bar',
            barWidth: 16,
            data: data.value.recycleItems
                .map(e => ({ value: e.weight, itemStyle: { color: e.color, borderRadius: [0, 8, 8, 0] } }))
                .reverse()
            data: weightRows.value.map(e => ({
                value: e.value,
                itemStyle: { color: e.item.color, borderRadius: [0, 8, 8, 0] }
            }))
        }
    ]
}));

const valueRows = computed(() =>
    chartSeries(data.value.recycleItems, e => e.value, { evenSplit: false })
);

const valueOption = computed(() => ({
    grid: { containLabel: true, left: 16, right: 16, top: 28, bottom: 8 },
    tooltip: { trigger: 'axis', ...tooltip() },
    xAxis: {
        type: 'category',
        data: data.value.recycleItems.map(e => e.name),
        data: valueRows.value.map(e => e.item.name),
        axisLabel: { color: mutedColor.value },
        axisLine: { show: false },
        axisTick: { show: false }
@@ -121,7 +131,7 @@
        {
            type: 'bar',
            barWidth: 28,
            data: data.value.recycleItems.map(e => e.value),
            data: valueRows.value.map(e => e.value),
            itemStyle: { color: primary.value, borderRadius: [6, 6, 0, 0] }
        }
    ]