antd chars柱状图y轴属性
时间: 2023-11-22 07:09:04 浏览: 113
0302-极智开发-解读antd pro页面基础属性修改
Ant Design Charts 的柱状图组件中,y 轴属性可以通过 `yAxis` 进行设置。`yAxis` 是一个对象,包含以下属性:
- `title`: y 轴标题,类型为字符串。
- `label`: y 轴标签配置,包含以下属性:
- `formatter`: 标签格式化函数,类型为 `(text: string, item: any, index: number) => string`。
- `style`: 标签样式配置,类型为对象。
- `grid`: y 轴网格线配置,包含以下属性:
- `line`: 网格线样式配置,类型为对象。
- `line`: y 轴轴线配置,包含以下属性:
- `style`: 轴线样式配置,类型为对象。
示例代码:
```jsx
import { ColumnChart } from '@opd/g2plot-react';
const 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 },
];
const config = {
data,
xField: 'year',
yField: 'value',
yAxis: {
title: '销售额',
label: {
formatter: (text, item, index) => {
return `${text} 万元`;
},
style: {
fill: 'red',
},
},
grid: {
line: {
style: {
stroke: 'grey',
lineWidth: 1,
lineDash: [2, 2],
},
},
},
line: {
style: {
stroke: 'black',
lineWidth: 2,
},
},
},
};
<ColumnChart {...config} />;
```
这段代码将生成一个带有 y 轴标题、标签格式化、网格线和轴线的柱状图。你可以根据自己的需求调整这些属性的值。
阅读全文