辅助线

general/guideLine/demo/guideline-style.js统计值辅助线自定义辅助线

功能描述: 配置图表辅助线,支持同时配置多条。

默认配置: 无

细分配置 类型 功能描述
type string 含有统计意义的辅助线类型,可选类型为 max
start array 指定辅助线起始位置,如不配置type,则该辅助线为自定义辅助线,start是必选项。
支持两种配置形式,两者不能混用:
- 原始数据值,如 ['2010-01-01', 100]
- 绘图区域百分比位置,如 ['50%', '50%']
end array 指定辅助线终止位置,如不配置type,则该辅助线为自定义辅助线,end  是必选项。
支持两种数据形式,两者不能混用:
- 原始数据值,如 ['2010-01-01', 100]
- 绘图区域百分比位置,如 ['50%', '50%']
lineStyle object 配置辅助线样式。
text object 设置辅助线文本。
- position: string 辅助线文本位置,可选项:start、center、end
- content: string 辅助线文本内容
- offsetX: number 位置在 x 方向上的偏移量
- offsetY: number 位置在 y 方向上的偏移量
- style: object 文本样式

配置统计辅助线示例代码:

{
  guideLine: [
    {
      type: 'mean',
      lineStyle: {},
      text: {},
    },
  ],
}

配置自定义辅助线示例代码:

{
  guideLine: [
    {
      start: ['2010-01-01', 100] || ['0%', '50%'],
      end: ['2010-01-10', 50] || ['100%', '80%'],
      lineStyle: {},
      text: {},
    },
  ],
}

定义

标题是对图表的主题进行阐述的一段话。

注释是表明数据来源,让图表看起来来源清晰、可靠。

何时使用

让阅读者直观地阅读当前图表的主题,了解当前内容的来源。

内容和位置

标题内容:言简意赅,尽量避免被截断;

标题位置:正、副标题一般放置于卡片左上角,标题宽度不超过卡片宽度。

注释内容:引用内容、数据来源等,保证正确性;

注释位置:一般放置于卡片左下角

常见问题

标题过长怎么办?

尽量精简标题内容,当标题过长且超过了卡片宽度时,请省略标题中间的文字,保住首尾,如“我是...标题”。

若副标题过长时,最多折 2 行,高度不超过卡片的 30%。