VChart
VChart copied to clipboard
[Bug] react-vchart circularProgress cannot draw without radius config
Version
1.11.0
Link to Minimal Reproduction
--
Steps to Reproduce
const getData = () =>
['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'].map(time => ({
time,
value: Math.random() * 40
}));
const root = document.getElementById(CONTAINER_ID);
const { VChart, CircularProgressChart, CircularProgress } = ReactVChart;
const { useState, useRef, useEffect } = React;
const Card = () => {
const chartRef = useRef(null);
useEffect(() => {
window['vchart'] = chartRef;
}, []);
return (
<div>
<CircularProgressChart
type="circularProgress"
valueField="value"
categoryField="type"
// 问题1. 注释了这个配置图表无法绘制
// 问题2. 将这个配置挪到系列组件上,依然无法绘制
// radius = {0.8}
data={[
{
id: "id0",
values: [
{
type: "Tradition Industries",
value: 0.795,
text: "79.5%",
},
],
},
]}
>
<CircularProgress
valueField="value"
categoryField="type"
track={{ style: { fill: "red" } }}
/>
</CircularProgressChart>
</div>
);
};
ReactDom.createRoot(root).render(<Card />);
// release react instance, do not copy
window.customRelease = () => {
ReactDom.unmountComponentAtNode(root);
};
Current Behavior
图表无法绘制
Expected Behavior
图表在以下情况能正常绘制:
- 不配置 radius时,应该有默认 radius
- 可以在 series 组件上配置 radius
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response