Description
🐛 bug 描述 [详细地描述 bug，让大家都能理解]
Column柱状图在将xAxis设置为label: { autoRotate: true }时，在改变浏览器宽度的时候，当浏览器宽度拉到某个点时会出现label显示不全的情况。
📷 复现步骤 [清晰描述复现步骤，让别人也能看到问题]
1、将label的文本设置的长点
2、柱状图的宽度自适应
3、放大或缩小浏览器，或者拉动浏览器的大小改变其宽度
4、会在某个点出现x轴的label倾斜并未完成显示
5、当再改变浏览器宽度后，它会提高柱状图的显示区然后显示全label文本
🏞 期望结果 [描述你原本期望看到的结果]
在xAxis设置为label: { autoRotate: true }时，无论浏览器的宽度是多少，都要让其显示全label
💻 复现代码 [提供可复现的代码，仓库，或线上示例]
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Column } from '@ant-design/plots';
const DemoColumn = () => {
const data = [
{
type: '家具家电',
sales: 38,
},
{
type: '粮油副食',
sales: 52,
},
{
type: '生鲜水果',
sales: 61,
},
{
type: '美容洗护',
sales: 145,
},
{
type: '母婴用品',
sales: 48,
},
{
type: '进口食品',
sales: 38,
},
{
type: '食品饮料',
sales: 38,
},
{
type: '家庭清洁',
sales: 38,
},
];
const config = {
data,
xField: 'type',
yField: 'sales',
label: {
// 可手动配置 label 数据标签位置
position: 'middle',
// 'top', 'bottom', 'middle',
// 配置样式
style: {
fill: '#FFFFFF',
opacity: 0.6,
},
},
xAxis: {
label: {
autoHide: false,
autoRotate: true,
},
},
meta: {
type: {
alias: '类别',
},
sales: {
alias: '销售额',
},
},
};
return <Column {...config} />;
};
ReactDOM.render(, document.getElementById('container'));
© 版本信息
- ant-design-charts 版本: 1.2.5
- 浏览器环境 chrome
- 开发环境 mac OS
🚑 其他信息 [如截图等其他信息可以贴在这里]
异常图片：
正常图片：
