!!!###!!!title=富文本和 Dom 扩展——VisActor/VChart 教程文档!!!###!!!

富文本和 Dom 扩展

富文本

VChart 从 v1.10.0 开始,在常用的组件文本上支持了富文本能力,包括:

  • 对文本的指定段落设置不同的文本样式,如字体、颜色、字号等;
  • 在文本中混合使用图片
  • 对文本整体设置样式,如文字对齐、文字方向、文字换行等;

目前支持配置富文本的组件有:

  • 标签组件
  • 轴组件:轴标签、轴标题
  • 离散图例组件:图例文本、图例标题
  • 标注组件:标注文本
  • 指标卡组件
  • 自定义图元:富文本图元
  • canvas 提示信息组件:标题和内容行

富文本支持的能力

VChart 对富文本整体提高如下配置项:

  • 文字基本样式:、fontSizefontFamilyfontStylefontWeight
  • 文字颜色:fillfillOpacity
  • 文字描边:strokelineWidthstrokeOpacity
  • 文本换行和裁切:ellipsiswordBreaksingleLineforceBreakLine
  • 富文本整体大小:widthheightmaxWidthmaxHeight
  • 富文本整体对齐方式:textAligntextBaselineverticalDirection
  • 富文本整体旋转和缩放:anglescaleXscaleY
  • 文本段落布局方向:layoutDirection
  • 文本段落配置:textConfig

例如:

文本段落配置

富文本由一个个文本段落构成,文本段落支持文字和图片两种类型。

文字段落

文字段落支持以下配置:

  • 文字内容:text
  • 文字基本样式:、fontSizefontFamilyfontStylefontWeight
  • 文字颜色:fillfillOpacity
  • 文字描边:strokelineWidthstrokeOpacity
  • 文字装饰:textDecorationscriptunderlinelineThrough
  • 文字对齐方式:textAligntextBaseline
  • 文字行高:lineHeight

例如:

label: {
  formatMethod: value => {
    return {
      type: 'rich',
      text: [{ text: 'value: ' }, { text: `${value}`, fontWeight: 'bold', fill: value > 200 ? 'red' : 'black' }]
    };
  };
}

图片段落

图片段落支持以下配置:

  • 图片来源:image
    • 支持配置 url、svg 字符串、HTMLImageElement、HTMLCanvasElement
  • 图片大小:、widthheight
  • 图片背景:backgroundShowModebackgroundFillbackgroundFillbackgroundFillOpacitybackgroundStrokebackgroundStrokeOpacitybackgroundRadiusbackgroundWidthbackgroundHeight
  • 图片边距:margin
  • hover 图片:hoverImage
    • 指在交互悬停时的图片,支持配置 url、svg 字符串、HTMLImageElement、HTMLCanvasElement 例如:
label: {
  formatMethod: value => {
    return {
      type: 'rich',
      text: [
        {
          image: `http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/logo/logo.png`,
          width: 20,
          height: 20
        }
      ]
    };
  };
}

如何使用富文本

如何在标签使用富文本

如何在轴组件使用富文本

如何在离散图例组件使用富文本

如何在指标卡组件使用富文本

如何使用自定义富文本图元

如何在 canvas 提示信息组件中使用富文本

dom 扩展

为了满足用户在图表中渲染自定义 dom 元素的需求,vrender 底层支持两种 dom 扩展方式:

  • html 扩展
  • react 扩展

html 扩展

如何开启 html 扩展插件

通过传入图表配置enableHtmlAttribute 开启 html 扩展插件

const vchart = new VChart(spec, { dom: 'chart', enableHtmlAttribute: true });

如何使用 html 扩展属性

react 扩展

如何开启 react 扩展插件

通过将ReactDOM的导出对象传入图表配置,开启 react 扩展插件

import ReactDOM from 'react-dom/client';

const vchart = new VChart(spec, { dom: 'chart', ReactDOM: ReactDOM });

如何使用 react 扩展属性