富文本和 Dom 扩展

富文本

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

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

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

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

富文本支持的能力

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

文字基本样式：、fontSize、fontFamily、fontStyle、fontWeight
文字颜色：fill、fillOpacity
文字描边：stroke、lineWidth、strokeOpacity
文本换行和裁切：ellipsis、wordBreak、singleLine、forceBreakLine
富文本整体大小：width、height、maxWidth、maxHeight
富文本整体对齐方式：textAlign、textBaseline、verticalDirection
富文本整体旋转和缩放：angle、scaleX、scaleY
文本段落布局方向：layoutDirection
文本段落配置：textConfig

例如：

文本段落配置

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

文字段落

文字段落支持以下配置：

文字内容：text
文字基本样式：、fontSize、fontFamily、fontStyle、fontWeight
文字颜色：fill、fillOpacity
文字描边：stroke、lineWidth、strokeOpacity
文字装饰：textDecoration、script 、underline、lineThrough
文字对齐方式：textAlign、textBaseline
文字行高：lineHeight

例如：

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

图片段落

图片段落支持以下配置：

图片来源：image
- 支持配置 url、svg 字符串、HTMLImageElement、HTMLCanvasElement
图片大小：、width、height
图片背景：backgroundShowMode、backgroundFill、backgroundFill、backgroundFillOpacity、backgroundStroke、backgroundStrokeOpacity、backgroundRadius、backgroundWidth、backgroundHeight
图片边距：margin
hover 图片：hoverImage
- 指在交互悬停时的图片，支持配置 url、svg 字符串、HTMLImageElement、HTMLCanvasElement 例如：

label: {
  formatMethod: value => {
    return {
      type: 'rich',
      text: [
        {
          image: `https://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 });