主题配置

范式组件库的主题是为了降低业务方接入成本而引入的一个机制，目的是将大量多个业务线可复用的配置项封装到组件内部，业务方在使用组件时只需要配置主题即可实现几乎 “零成本” 接入；另一方面，将可复用的配置项封装在组件内部，也是便于后续业务方迭代升级，多个业务方后期只需要升级组件版本即可。

使用示例：

import { init, PRESET_THEME } from 'path/to/bundle.esm.min.js';

const chart = init('#chart', 'mobile-app-light');
// 等同于 (v1.2.0+)
const chart = init('#chart', PRESET_THEME.MOBILE_APP_LIGHT);

设计 Token

在支持设计 Token 机制之后（v1.2.0+），组件库还允许在主题层面对部分 Token 进行覆盖：

import { init, PRESET_THEME } from 'path/to/bundle.esm.min.js';

const chart = init('#chart', {
  name: PRESET_THEME.MOBILE_APP_LIGHT,
  token: {
    fontSizeLabel: 26,
    colorTextSecondary: 'red',
    colorVisualizationPrimary: ['#f39800'],
    colorVisualizationDivider: '#3366FF'
  }
});

深入理解设计 Token

关于设计 Token 可参考该文章进一步了解：Design tokens, what?

设计规范拟定的token内容可见末尾

注意

设计 Token 的实现目前还没有覆盖所有组件和图表。

预置主题

目前，组件库中预先提供的主题配置分为两大类，即 “通用主题” 和 “业务主题”，它们均具备可复用性，但前者覆盖的范围更广泛，后者通常覆盖某几个特殊的业务场景。

通用主题

mobile-app-light

移动平台 App 客户端（日间版）。

已经适配组件与图表

• 柱状图（bar）
  • 动态柱状图
• 折线图（line）
• 散点图（scatter）
• 矩形树图（treemap）
• 双向树图（dvTwoWayTree）

mobile-app-dark

移动平台 App 客户端（夜间版）。

已经适配组件与图表

• 柱状图（bar）
• 折线图（line）
• 散点图（scatter）
• 双向树图（dvTwoWayTree）

pc-app-light

PC 平台客户端（日间版）。

已经适配组件与图表

• 柱状图（bar）
• 折线图（line）
• 散点图（scatter）

pc-app-dark

PC 平台客户端（夜间版）。

已经适配组件与图表

• 柱状图（bar）
  • 动态柱状图
• 折线图（line）

pc-wencai-light

PC 平台问财业务线（日间版）。

已经适配组件与图表

• 动态柱状图
• 散点图（scatter）
• 矩形树图（treemap）

ainvest-app-light

海外 AInvest 平台 App 客户端（日间版）。

已经适配组件与图表

• 柱状图（bar）
• 折线图（line）
• 饼图（pie）

ainvest-app-dark

海外 AInvest 平台 App 客户端（夜间版）。

已经适配组件与图表

• 柱状图（bar）
• 折线图（line）
• 饼图（pie）

业务主题

business-treemap-market-light

已经适配组件与图表

• 矩形树图（treemap）

设计规范token

const AIGCTokenLight: Token = {
  'font-weight-regular': 400,
  'font-weight-medium': 500,
  'font-weight-bold': 600,

  // 阴影大小
  'shadow-elevation-small': '',
  'shadow-elevation-medium': '',
  'shadow-elevation-large': '',

  // 字号
  'font-size-super-large': 24,
  'font-size-extra-large': 20,
  'font-size-large': 18,
  'font-size-base': 16,
  'font-size-medium': 14,
  'font-size-small': 13,
  'font-size-extra-small': 12,
  'font-size-super-small': 11,
  'font-size-xxs': 10,
  'font-size-xxxs': 9,

  // 行高
  'line-height-super-large': 30,
  'line-height-extra-large': 24,
  'line-height-large': 22,
  'line-height-base': 20,
  'line-height-medium': 18,
  'line-height-small': 16,
  'line-height-extra-small': 14,
  'line-height-super-small': 12,
  'line-height-xxs': 10,

  // 层级
  'z-index-axisLabel': 57,
  'z-index-series': 50,
  'z-index-splitLine': 0,
  'z-index-axisPointer': 25,
  'z-index-data-item': 50,
  'z-index-marker': 7,

  // 颜色 默认主色
  'color-visualization-primary': '#3366ff',
  'color-visualization-01': '#ff4019',
  'color-visualization-02': '#ff9500',
  'color-visualization-03': '#62b312',
  'color-visualization-04': '#14ccbd',
  'color-visualization-05': '#199fff',
  'color-visualization-06': '#4433ff',
  'color-visualization-07': '#ff33aa',
  'color-visualization-08': '#cc41d9',
  'color-visualization-09': '#858585',
  // 颜色 分割线颜色
  'color-visualization-divider': 'rgba(0, 0, 0, 0.06)',
  // 颜色 零轴颜色
  'color-visualization-divider-deep': '#858585',
  // 颜色 tooltip背景
  'color-visualization-tooltip': '#3b3b3b',
  // 颜色 axisPointer文本颜色和文本背景色和线的颜色
  'color-visualization-highlight-background-tick': '#3366ff',
  'color-visualization-highlight-line': 'rgba(0, 0, 0, 0.6)',
  'color-visualization-highlight-block': 'rgba(0, 0, 0, 0.1)',

  // 颜色 弱化背景色
  'color-background-weak': 'rgba(0, 0, 0, 0.04)',

  // 颜色 涨跌色
  'color-price-up': '#ff2436',
  'color-price-down': '#07abab',
  'color-price-even': 'rgba(0, 0, 0, 0.84)',

  // 交易业务-下跌
  'color-deal-price-down': '#4691ee',

  // 下跌-色弱模式
  'color-price-down-weakness': '#0ca3b0',

  // 文字/图标颜色
  'color-text-primary': 'rgba(0, 0, 0, 0.84)',
  'color-text-secondary': 'rgba(0, 0, 0, 0.6)',
  'color-text-tertiary': 'rgba(0, 0, 0, 0.4)',
  'color-text-quanternary': 'rgba(0, 0, 0, 0.24)',

  // 反色
  'color-text-inverse': '#ffffff',
  'color-text-inverse-primary': 'rgba(255, 255, 255, 0.84)',
  'color-text-inverse-secondary': 'rgba(255, 255, 255, 0.6)',
  'color-text-inverse-tertiary': 'rgba(255, 255, 255, 0.4)',
  'color-text-inverse-quanternary': 'rgba(255, 255, 255, 0.24)',

  // 文字链接色
  'color-text-link': '#4167d9'
};