样式（Style）

Ant Design Charts 中样式（Style） 主要用来控制标记和视图的视觉样式。

配置方式

标记可以设置自己的样式，也可以设置视图的样式：

({
  style: {
    // 自己的样式
    stroke: 'black',
    strokeWidth: 2,
  },
  viewStyle: {
    // 视图的样式
    viewFill: 'red',
    contentFill: 'yellow',
  },
});

标记样式

标记的视觉属性除了可以通过 mark.encode 去设置之外，还可以通过 mark.style 去设置。两者的区别主要有两点：

mark.encode 设置的通道会特殊一点，要么是该标记独有的，比如 image 的 src 通道；要么就是有一些特殊逻辑，比如 x 通道会影响 x 方向坐标轴的生成。
mark.encode 更倾向于去设置和数据有关的通道，但是 mark.style 更倾向于去设置和数据无关的通道。虽然 mark.style 也同样支持回调去设置数据驱动的通道。

import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {

  const config ={
    "axis": {
      "y": {
        "labelFormatter": ".0%"
      }
    },
    "style": {
      "stroke": (d) => (d.frequency > 0.1 ? 'red' : 'black'),
      "strokeWidth": (d) => (d.frequency > 0.1 ? 2 : 1),
      "fill": "steelblue"
    },
    "yField": "frequency",
    "xField": "letter",
    "data": {
      "type": "fetch",
      "value": "https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv"
    }
  };

  return <Column {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

视图样式

而各个区域的样式可以通过 ${name}${Style} 的形式去设置，其中 Style 是 G 的矩形支持的所有样式，比如 fill，stroke 等，注意首字母要大写，变成驼峰形式。

view${Style} - 设置视图区域的样式
plot${Style} - 设置绘制区域的样式
main${Style} - 设置主区域的样式
content${Style} - 设置内容区域的样式

比如下图中给各个区域染色：

import { Scatter } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {

  const config ={
      height: 280,
      inset: 10,
      marginTop: 30,
      marginLeft: 40,
      marginBottom: 10,
      marginRight: 20,
      style: {
        // 设置视图样式
        viewFill: '#4e79a7',
        plotFill: '#f28e2c',
        mainFill: '#e15759',
        contentFill: '#76b7b2',
      },
      children: [
        {
          type: 'point',
          data: {
            type: 'fetch',
            value: 'https://assets.antv.antgroup.com/g2/commits.json',
          },
          encode: {
            x: (d) => new Date(d.time).getUTCHours(),
            y: (d) => new Date(d.time).getUTCDay(),
            size: 'count',
            shape: 'point',
          },
          transform: [{ type: 'group', size: 'sum' }, { type: 'sortY' }],
          scale: { y: { type: 'point' } },
          style: { shape: 'point', fill: '#59a14f' },
          axis: {
            x: { title: 'time (hours)', tickCount: 24 },
            y: { title: 'time (day)', grid: true },
          },
          legend: false,
        },
      ]
  };

  return <Scatter {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

绘图属性

Ant Design Charts 使用 G 作为绘图引擎，一些图形的样式配置，如折线图的line.style，柱状图的interval.style等，还有部分组件的样式配置，如label.style， axis.line${style}等，都是直接透传 G 的绘图属性。

为了方便用户使用，在这里对 Ant Design Charts 常用的绘图属性进行简单的介绍：

配置图形样式

属性	描述	类型	默认值
fill	图形的填充色	string
fillOpacity	图形的填充透明度	number
stroke	图形的描边	string
strokeOpacity	描边透明度	number
lineWidth	图形描边的宽度	number
lineDash	描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。	[number,number]
opacity	图形的整体透明度	number
shadowColor	图形阴影颜色	string
shadowBlur	图形阴影的高斯模糊系数	number
shadowOffsetX	设置阴影距图形的水平距离	number
shadowOffsetY	设置阴影距图形的垂直距离	number
cursor	鼠标样式。同 css 的鼠标样式	string	`default`

接下来，试试使用全量图形样式配置基础柱状图的 interval 的图形样式，在下面的代码编辑器里修改属性试试效果：

配置线的样式

属性名	介绍	类型	默认值
stroke	线的颜色	string
strokeOpacity	线的透明度	number
lineWidth	线宽	number
lineDash	虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。	[number,number]
opacity	整体透明度	number
shadowColor	阴影颜色	string
shadowBlur	高斯模糊系数	number
shadowOffsetX	设置阴影距图形的水平距离	number
shadowOffsetY	设置阴影距图形的垂直距离	number
cursor	鼠标样式。同 css 的鼠标样式	string	`default`

接下来，试试使用全量线的样式配置基础折线图的 line 的样式，在下面的代码编辑器里修改属性试试效果：

类似的，我们也可以以相同的方式来配置坐标轴的网格线。

import { Line } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {

  const config ={
      data: [
        { year: '1991', value: 3 },
        { year: '1992', value: 4 },
        { year: '1993', value: 3.5 },
        { year: '1994', value: 5 },
        { year: '1995', value: 4.9 },
        { year: '1996', value: 6 },
        { year: '1997', value: 7 },
        { year: '1998', value: 9 },
        { year: '1999', value: 13 },
      ],
      xField: 'year',
      yField: 'value',
      scale: { x: { range: [0, 1] }, y: { domainMin: 0, nice: true } },
      axis: {
        y: {
          grid: true,
          gridStroke: 'red',
          gridStrokeOpacity: 0.5,
          gridLineWidth: 2,
          gridLineDash: [2, 4],
        },
      }
  };

  return <Line {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

配置文字样式

属性名	介绍	类型	默认值
fontSize	文字大小	number
fontFamily	文字字体	string
fontWeight	字体粗细	number
lineHeight	文字的行高	number
textAlign	设置文本内容的当前对齐方式	`center` \| `end` \| `left` \| `right` \| `start`	`start`
textBaseline	设置在绘制文本时使用的当前文本基线	`top` \| `middle` \| `bottom` \| `alphabetic` \| `hanging`	`bottom`
fill	文字的填充色	string
fillOpacity	文字的填充透明度	number
stroke	文字的描边	string
lineWidth	文字描边的宽度	number
lineDash	描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。	[number,number]
strokeOpacity	描边透明度	number
opacity	文字的整体透明度	number
shadowColor	文字阴影颜色	string
shadowBlur	文字阴影的高斯模糊系数	number
shadowOffsetX	设置阴影距文字的水平距离	number
shadowOffsetY	设置阴影距文字的垂直距离	number
cursor	鼠标样式。同 css 的鼠标样式	string	`default`

接下来，试试使用全量文字的样式配置水波图的中心文字的样式，在下面的代码编辑器里修改属性试试效果：

类似的，我们也可以以相同的方式来配置标题的文字样式。

import { Line } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {

  const config ={
      data: [
        { year: '1991', value: 3 },
        { year: '1992', value: 4 },
        { year: '1993', value: 3.5 },
        { year: '1994', value: 5 },
        { year: '1995', value: 4.9 },
        { year: '1996', value: 6 },
        { year: '1997', value: 7 },
        { year: '1998', value: 9 },
        { year: '1999', value: 13 },
      ],
      xField: 'year',
      yField: 'value',
      scale: { x: { range: [0, 1] }, y: { domainMin: 0, nice: true } },
      title: {
        size: 30,
        title: "我是一个标题 I'am a title",
        align: 'center',
        spacing: 4,
        // 绘图属性
        titleFontSize: 30,
        titleFontFamily: 'sans-serif',
        titleFontWeight: 500,
        titleLineHeight: 30,
        titleTextAlign: 'center',
        titleTextBaseline: 'middle',
        titleFill: '#fff',
        titleFillOpacity: 0.9,
        titleStroke: 'yellow',
        titleStrokeOpacity: 0.9,
        titleLineWidth: 1,
        titleLineDash: [1, 2],
        titleOpacity: 1,
        titleShadowColor: '#d3d3d3',
        titleShadowBlur: 10,
        titleShadowOffsetX: 10,
        titleShadowOffsetY: 10,
        titleCursor: 'pointer',
      }
  };

  return <Line {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

配置线性渐变

说明：l 表示使用线性渐变，绿色的字体为可变量，由用户自己填写。

'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff';
'linear-gradient(270deg, #ffffff 0%, #7ec2f3 50%, #1890ff 100%)';

接下来，试试配置面积图的填充颜色为线性渐变色，在下面的代码编辑器里修改属性试试效果：

也可以通过配置 color 通道的比例尺来实现一个渐变色仪表盘，在下面的代码编辑器里修改属性试试效果：

配置环形渐变

说明：r 表示使用放射状渐变，绿色的字体为可变量，由用户自己填写，开始圆的 x y r 值均为相对值，0 至 1 范围。

'r(0.5, 0.5, 0.1) 0:#ffffff 1:#1890ff';

接下来，试试配置条形图的填充颜色为环形渐变色，在下面的代码编辑器里修改属性试试效果：

配置纹理

用特定的纹理填充图形。纹理内容可以直接是图片或者 Data URLs。

说明：p 表示使用纹理，绿色的字体为可变量，由用户自己填写。

a: 该模式在水平和垂直方向重复；
x: 该模式只在水平方向重复；
y: 该模式只在垂直方向重复；
n: 该模式只显示一次（不重复）。

```ts
style: {
  fill: 'p(a)https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*58XjQY1tO7gAAAAAAAAAAABkARQnAQ',
}

接下来，试试配置条形图的填充颜色为纹理，在下面的代码编辑器里修改属性试试效果：


除此之外，Ant Design Charts 提供了 `内置纹理`、 `G API 自定义纹理` 等多种方式来设置纹理，详情见 [设置纹理](/manual/extra-topics/pattern)。