🧐[问题] 饼图提供字段显示标题吗

zyk2891 commented 1 year ago

🧐 问题描述 [详细地描述问题，让大家都能理解]

柱状图axis有title属性，但饼图没有axis，那只能自建div显示标题吗？在图例(legend)左右分布的时候，就不能简单通过text-align: center控制居中，有什么好的解决办法吗

💻 示例代码 [如果有必要，展示代码，线上示例，或仓库]

🚑 其他信息 [如截图等其他信息可以贴在这里]

zyk2891 commented 1 year ago

自建div容易无法与饼图中心点对齐

zyk2891 commented 1 year ago

@lxfu1

lxfu1 commented 1 year ago

配置一下 legend 的最大值，同时设置 paddingRight

legend: {
  maxWidth: 120,
},

<p style={{ paddingRight: 120}}>我是标题</p>

lxfu1 commented 1 year ago

onReady: (plot) => plot.chart.getComponents().find(item => item.type === "legend").component.getBBox() 也可以获取legend 的属性，需要配合 React.memo 使用，避免二次渲染。

zyk2891 commented 1 year ago

const onReady = (plot) => { let legend = plot.chart.getComponents() console.log(plot.chart, legend) } const equityCltCountPieConfig = useMemo(() => { const sum = equityCltCountData.reduce((prev,cur) => { return prev + cur.value }, 0) return { height: 350, appendPadding: 10, data: equityCltCountData, angleField: 'value', colorField: 'type', color: ['#7294d4', '#5ec9db', '#7ae677', '#fdc765', '#f27d51'], radius: 0.75, label: { type: 'spider', content: (props) =>${(props.percent 100).toFixed(2)}%, style: { fontSize: 14, textAlign: 'center', }, layout: [] }, tooltip: { formatter: (datum) => { return { name: datum.type, value: thousands(datum.value, 0) +(${((datum.value / sum) 100 || 0).toFixed(2)}%)}; }, }, interactions: [ { type: 'element-active', }, ], } }, [equityCltCountData]) <Pie {...equityCltCountPieConfig} onReady={onReady}/> plot.chart.getComponents()为空数组

zyk2891 commented 1 year ago

应该是由于equityCltCountData是异步获取的问题导致onReady的时候图表中的data还是[]

lxfu1 commented 1 year ago

应该是由于equityCltCountData是异步获取的问题导致onReady的时候图表中的data还是[]

https://juejin.cn/post/7196652592372662331#heading-2

ant-design / ant-design-charts