Standardize financial chart colors and improve label placement

js/theme.js

@@ -28,24 +28,34 @@ export const PALETTE = {
 };
 
 /**
- * 试行语义色：柱线组合图中，柱采用低饱和辅助色，折线保留单一强调色。
- * 待页面视觉确认后再固化为新增图表的正式规范。
+ * 正式色板：轻快消费。
+ * 柱线组合中，柱用不同色相承载分类，折线保留高辨识度的单一强调色。
  */
 export const FINANCIAL_COLORS = {
-  operatingCashFlow: '#6E9A83',
-  investingCashFlow: '#7897B2',
-  financingCashFlow: '#B18A66',
-  netCashIncrease: '#A8465C',
-  netProfit: '#C9885C',
-  cashConversion: '#6B4A6C',
+  operatingCashFlow: '#36A28F',
+  investingCashFlow: '#4D83D1',
+  financingCashFlow: '#EEA64F',
+  netCashIncrease: '#D95567',
+  netProfit: '#F08B5A',
+  cashConversion: '#8256B2',
+};
+
+/**
+ * 瀑布图语义色：基准值、正向贡献、负向贡献。
+ * 复用轻快消费财务色板，避免利润率拆解图另起一套颜色。
+ */
+export const BRIDGE_COLORS = {
+  total: FINANCIAL_COLORS.investingCashFlow,
+  pos: FINANCIAL_COLORS.operatingCashFlow,
+  neg: FINANCIAL_COLORS.netCashIncrease,
 };
 
 export const CHANNEL_COLORS = {
-  retail: '#597A9B',
-  online: '#C87368',
-  robotStore: '#98A77A',
-  wholesale: '#BB9A5C',
-  revenueGrowth: '#775D8B',
+  retail: '#3F7FBE',
+  online: '#E36D63',
+  robotStore: '#71AD81',
+  wholesale: '#E4A349',
+  revenueGrowth: '#8256B2',
 };
 
 /** 坐标轴通用样式：只留浅色横向网格，去掉轴线的存在感 */
@@ -201,9 +211,12 @@ export function lineSeries({ name, data, color, labelPosition = 'top', formatter
 
 /**
  * 柱线组合图的折线标签：正值放在点上方、负值放在点下方；
- * 若与同期间柱值接近，则加大距离，避免文字压在柱体端点附近。
+ * 若与同期间柱值接近，则加大距离；也可指定将标签放到柱体另一侧，
+ * 避免文字压在柱体端点附近。
  */
-export function lineDataWithSafeLabels(rows, { lineKey, barKeys, distance = 8, closeDistance = 14 }) {
+export function lineDataWithSafeLabels(rows, {
+  lineKey, barKeys, distance = 8, closeDistance = 14, closePosition,
+}) {
   const values = rows.map((row) => row[lineKey]).filter(Number.isFinite);
   const range = Math.max(...values) - Math.min(...values) || 1;
   const threshold = range * 0.06;
@@ -217,7 +230,9 @@ export function lineDataWithSafeLabels(rows, { lineKey, barKeys, distance = 8, c
     return {
       value,
       label: {
-        position: value < 0 ? 'bottom' : 'top',
+        position: nearestBarGap <= threshold && closePosition
+          ? closePosition
+          : (value < 0 ? 'bottom' : 'top'),
         distance: nearestBarGap <= threshold ? closeDistance : distance,
       },
     };