logo

Ant Design Charts

  • Manual
  • Components
  • Examples
  • Options
  • Productsantv logo arrow
  • 2.0.0
  • Component Overview
  • Statistical Charts
    • Chart overview
    • Line
    • Column
    • Bar
    • Area
    • Pie
    • DualAxes
    • Scatter
    • WordCloud
    • Funnel
    • Heatmap
    • Histogram
    • Liquid
    • BidirectionalBar
    • Box
    • Bullet
    • CirclePacking
    • Gauge
    • Radar
    • Rose
    • Sankey
    • Stock
    • Sunburst
    • Treemap
    • Venn
    • Tiny
    • Violin
    • Waterfall
    • RadialBar
  • Relation Graph Components
    • Overview
    • MindMap
    • Fishbone
    • IndentedTree
    • Dendrogram
    • OrganizationChart
    • FlowGraph
    • FlowDirectionGraph
    • NetworkGraph
    • FAQ

RadialBar

Previous
Waterfall
Next
Overview

Resources

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-互动图形解决方案
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

特有

markBackground

optional BarOptions

data 参数

const data = [
{ name: 'X6', star: 297, color: 'pink' },
{ name: 'G', star: 506, color: 'pink' },
{ name: 'AVA', star: 805, color: 'pink' },
{ name: 'G2Plot', star: 1478, color: 'orange' },
{ name: 'L7', star: 2029, color: 'orange' },
{ name: 'G6', star: 7100, color: 'orange' },
{ name: 'F2', star: 7346, color: 'orange' },
{ name: 'G2', star: 10178, color: 'blue' },
];

mark 背景配置

{
scale: {
y: {
domain: [0, 200]
}
},
/** 不配置任何参数,默认开启背景颜色 '#e0e4ee' */
// markBackground:{}
markBackground: {
color: 'color'; // 指定color的参数,即根据color字段进行颜色映射
},
}

示例: