eacharts

226 阅读1分钟
  • 文本标签 Apache ECharts 中的文本标签从 v3.7 开始支持富文本模式,能够:

  • 定制文本块整体的样式(如背景、边框、阴影等)、位置、旋转等。

  • 对文本块中个别片段定义样式(如颜色、字体、高宽、背景、阴影等)、对齐方式等。

  • 在文本中使用图片做小图标或者背景。

  • 特定组合以上的规则,可以做出简单表格、分割线等效果。

开始下面的介绍之前,先说明一下下面会使用的两个名词的含义:

  • 文本块(Text Block):文本标签块整体。

  • 文本片段(Text fragment):文本标签块中的部分文本。

  • 文本样式相关的配置项

echarts 提供了丰富的文本标签配置项,包括:

  • 字体基本样式设置:fontStylefontWeightfontSizefontFamily
  • 文字颜色:color
  • 文字描边:textBorderColortextBorderWidth
  • 文字阴影:textShadowColortextShadowBlurtextShadowOffsetXtextShadowOffsetY
  • 文本块或文本片段大小:lineHeightwidthheightpadding
  • 文本块或文本片段的对齐:alignverticalAlign
  • 文本块或文本片段的边框、背景(颜色或图片):backgroundColorborderColorborderWidthborderRadius
  • 文本块或文本片段的阴影:shadowColorshadowBlurshadowOffsetXshadowOffsetY
  • 文本块的位置和旋转:positiondistancerotate