smart-fin-chart/js/charts/ppmt_stores_robot.js

import { col } from '../csv.js';
import {
  CHANNEL_COLORS, PALETTE, FONT, axisCommon, standalonePeriodAxis, titleStyle,
  standardLegend, financialViewLabel, lineSeries, footnote, watermarks, LAYOUT,
} from '../theme.js';

/**
 * 泡泡玛特分地区机器人商店数量与同比增速。
 * 堆叠柱为各期末机器人数，折线为全球合计数量的同比。
 * 口径：2023年及以前"海外合计"含港澳台；2024年起港澳台单列并计入中国。
 * 机器人商店仅披露内地/港澳台/海外三层，无亚太/美洲/欧洲分列。
 */

// 门店数是计数而非金额，保留整数。中国内地沿用渠道语义色（机器人商店=绿）。
const SEGMENT_COLORS = {
  mainland: CHANNEL_COLORS.robotStore,
  hkmtw: '#AECBE8',
  overseas: '#C2726B',
};

const regions = [
  { key: 'mainland', name: '中国内地' },
  { key: 'hkmtw', name: '港澳台' },
  { key: 'overseas', name: '海外合计(含港澳台)' },
];

// 段内标签文字色：浅色底（港澳台）用深字，深色底（内地绿、海外玫红）用白字
const INSIDE_LABEL_COLORS = {
  mainland: '#fff',
  hkmtw: PALETTE.ink,
  overseas: '#fff',
};

const num = (value) => (Number.isFinite(value) ? value : null);

// 绘图区高约 435px（grid top 145 / bottom 100，画布 680），轴上限 3000。
// 低于约 13px 的段放不下段内 10px 标签：柱顶段标到柱顶上方，
// 上方还有其它段的标到柱体右侧，避免与上段段内标签互相挤压。
const PX_PER_UNIT = 435 / 3000;
const MIN_INSIDE_PX = 13;

function segmentData(row, key) {
  const value = num(row[key]);
  if (value === null) return null;
  if (value * PX_PER_UNIT >= MIN_INSIDE_PX) {
    return { value, label: { position: 'inside', color: INSIDE_LABEL_COLORS[key] } };
  }
  const keyIndex = regions.findIndex((item) => item.key === key);
  const hasSegmentAbove = regions
    .slice(keyIndex + 1)
    .some((item) => num(row[item.key]) !== null);
  return {
    value,
    label: hasSegmentAbove
      ? { position: 'right', color: PALETTE.ink, distance: 4 }
      : { position: 'top', color: PALETTE.ink },
  };
}

export function storesRobotChart(rows, { width, height, view = 'all' }) {
  return {
    backgroundColor: '#fff',
    title: {
      ...titleStyle,
      text: `泡泡玛特分地区机器人商店数量与同比增速（${financialViewLabel(view)}）`,
      subtext: '柱状为各期末机器人商店数（堆叠）；折线为全球合计数量同比',
    },
    legend: standardLegend([...regions.map((item) => item.name), '全球合计同比']),
    grid: { left: 78, right: 82, top: LAYOUT.gridTop, bottom: 100 },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      textStyle: { fontFamily: FONT },
    },
    xAxis: { ...standalonePeriodAxis, data: col(rows, 'period') },
    yAxis: [
      {
        ...axisCommon,
        type: 'value',
        name: '机器人商店数量（台）',
        nameLocation: 'middle',
        nameGap: 52,
        nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
        min: 0,
        max: 3000,
        interval: 500,
      },
      {
        ...axisCommon,
        type: 'value',
        name: '全球合计同比（%）',
        nameLocation: 'middle',
        nameGap: 60,
        nameRotate: -90,
        nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
        min: 0,
        max: 600,
        interval: 100,
        axisLabel: { ...axisCommon.axisLabel, formatter: '{value}%' },
        splitLine: { show: false },
      },
    ],
    series: [
      ...regions.map((item) => ({
        name: item.name,
        type: 'bar',
        stack: 'stores-robot',
        data: rows.map((row) => segmentData(row, item.key)),
        itemStyle: { color: SEGMENT_COLORS[item.key] },
        label: {
          show: true,
          fontSize: 10,
          fontWeight: 500,
          fontFamily: FONT,
          overflow: 'none',
        },
        // 相邻矮段标签贴近时沿 y 向微移避让
        labelLayout: { moveOverlap: 'shiftY' },
        emphasis: { focus: 'series' },
      })),
      {
        ...lineSeries({
          name: '全球合计同比',
          data: col(rows, 'global_yoy'),
          color: '#8256B2',
          formatter: (p) => `${p.value.toFixed(1)}%`,
        }),
        yAxisIndex: 1,
        z: 10,
      },
    ],
    graphic: [
      ...watermarks(width, height),
      footnote(
        [
          '数据来源：泡泡玛特历年公告；门店数为各期末时点数',
          view === 'annual'
            ? '海外合计2023年及以前含港澳台、其后不含 | @思考的Joey'
            : '海外合计2023年及以前含港澳台、其后不含；2024H1海外数量未披露 | @思考的Joey',
        ].join('\n'),
      ),
    ],
  };
}