样式（Style）

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

配置方式

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

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

{
  "style": {
    "stroke": "black",
    "strokeWidth": 2
  }
}

视图可以设置自己的样式：

({
  style: {
    viewFill: 'red',
    contentFill: 'yellow',
  },
});

{
  "style": {
    "viewFill": "red",
    "contentFill": "yellow"
  }
}

标记样式

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

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

{
  "axis": {
    "y": {
      "labelFormatter": ".0%"
    }
  },
  "style": {
    "fill": "steelblue"
  }
}

视图样式

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

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

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

{
  "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": {
        "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
    }
  ]
}

绘图属性

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 的样式，在下面的代码编辑器里修改属性试试效果：

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

{
  "scale": {
    "x": {
      "range": [
        0,
        1
      ]
    },
    "y": {
      "domainMin": 0,
      "nice": true
    }
  },
  "axis": {
    "y": {
      "grid": true,
      "gridStroke": "red",
      "gridStrokeOpacity": 0.5,
      "gridLineWidth": 2,
      "gridLineDash": [
        2,
        4
      ]
    }
  }
}

配置文字样式

属性名	介绍	类型	默认值
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`

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

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

{
  "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"
  }
}

配置线性渐变

说明：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: 该模式只显示一次（不重复）。

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

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

除此之外，Ant Design Charts 提供了 内置纹理、 G API 自定义纹理 等多种方式来设置纹理，详情见设置纹理。