VChart icon indicating copy to clipboard operation
VChart copied to clipboard

[Bug] react-vchart circularProgress cannot draw without radius config

Open xiaoluoHe opened this issue 1 year ago • 0 comments

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

图表在以下情况能正常绘制:

  1. 不配置 radius时,应该有默认 radius
  2. 可以在 series 组件上配置 radius

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

xiaoluoHe avatar May 15 '24 03:05 xiaoluoHe