VChart icon indicating copy to clipboard operation
VChart copied to clipboard

[Bug] 拖动datazoom动画流程出问题,图元没销毁

Open neuqzxy opened this issue 3 months ago • 0 comments

Version

2.0.4

Link to Minimal Reproduction

2.0.4

Steps to Reproduce

点击“点击”文字后,快速拖拽datazoom

const root = document.getElementById(CONTAINER_ID);
const { VChart, FunnelChart, Pie, Legend, VChartCore } = ReactVChart;
const { useState, useRef, useEffect, useCallback } = React;
const MotorLightTheme = {
  name: "motor",
  type: "light",

  // 图元
  markByName: {},
  // 组件
  component: {
    // 缩略轴
    dataZoom: {
      startHandler: {
        style: {
          size: 10,
          symbolType:
            "M0-4.5c2.5,0,4.5,2,4.5,4.5S2.5,4.5,0,4.5s-4.5-2-4.5-4.5S-2.5-4.5,0-4.5z M-1.5-2v4 M1.5-2v4",
        },
      },
      endHandler: {
        style: {
          size: 10,
          symbolType:
            "M0-4.5c2.5,0,4.5,2,4.5,4.5S2.5,4.5,0,4.5s-4.5-2-4.5-4.5S-2.5-4.5,0-4.5z M-1.5-2v4 M1.5-2v4",
        },
      },
    },
  },
};


console.log(window, 'ReactVChart')
VChartCore.ThemeManager.registerTheme('userTheme', MotorLightTheme);
VChartCore.ThemeManager.setCurrentTheme('userTheme');

const Card = () => {
  const [test, setTest] = useState([]);


  const chartRef = useRef(null);
  useEffect(() => {
    window['vchart'] = chartRef;
  }, []);

  const spec123 = {
    xField: ["data_name"],
    yField: "value",
    seriesField: "type",
    data: [
      {
        id: "dataBar",
        values: test.length
          ? test
          : [
            {
              data_name: "华北区",
              type: "其他自然线索量",
              value: 333,
            },
          ],
      },
      {
        id: "dataLine",
        values: [],
      },
    ],
    axes: [],
    dataZoom: [
      {
        orient: "bottom",
        height: 18,
        start: 0,
        end: 1,
        brushSelect: false,
        showDetail: true,
      },
    ],
    type: "bar",
  };



  return (
    <>
      <div onClick={() =>
        setTest([
          {
            data_name: "华西区",
            type: "直播自然线索量",
            value: 4,
          },
          {
            data_name: "华东区",
            type: "直播自然线索量",
            value: 4,
          },
          {
            data_name: "华中区",
            type: "直播自然线索量",
            value: 4,
          },
          {
            data_name: "华北区",
            type: "直播自然线索量",
            value: 4,
          },
          {
            data_name: "华南区",
            type: "直播自然线索量",
            value: 4,
          },
          {
            data_name: "未知",
            type: "直播自然线索量",
            value: 3,
          },
          {
            data_name: "华西区",
            type: "短视频自然线索量",
            value: 2,
          },
          {
            data_name: "华东区",
            type: "短视频自然线索量",
            value: 1,
          },
          {
            data_name: "华中区",
            type: "短视频自然线索量",
            value: 1,
          },
          {
            data_name: "华北区",
            type: "短视频自然线索量",
            value: 1,
          },
          {
            data_name: "华南区",
            type: "短视频自然线索量",
            value: 1,
          },
          {
            data_name: "未知",
            type: "短视频自然线索量",
            value: 1,
          },
          {
            data_name: "华西区",
            type: "直播广告线索量",
            value: 1,
          },
          {
            data_name: "华东区",
            type: "直播广告线索量",
            value: 1,
          },
          {
            data_name: "华中区",
            type: "直播广告线索量",
            value: 1,
          },
          {
            data_name: "华北区",
            type: "直播广告线索量",
            value: 1,
          },
          {
            data_name: "华南区",
            type: "直播广告线索量",
            value: 1,
          },
          {
            data_name: "未知",
            type: "直播广告线索量",
            value: 1,
          },
          {
            data_name: "华西区",
            type: "短视频广告线索量",
            value: 1,
          },
          {
            data_name: "华东区",
            type: "短视频广告线索量",
            value: 1,
          },
          {
            data_name: "华中区",
            type: "短视频广告线索量",
            value: 4,
          },
          {
            data_name: "华北区",
            type: "短视频广告线索量",
            value: 2,
          },
          {
            data_name: "华南区",
            type: "短视频广告线索量",
            value: 3,
          },
          {
            data_name: "未知",
            type: "短视频广告线索量",
            value: 4,
          },
          {
            data_name: "华西区",
            type: "其他广告线索量",
            value: 55,
          },
          {
            data_name: "华东区",
            type: "其他广告线索量",
            value: 0,
          },
          {
            data_name: "华中区",
            type: "其他广告线索量",
            value: 0,
          },
          {
            data_name: "华北区",
            type: "其他广告线索量",
            value: 0,
          },
          {
            data_name: "华南区",
            type: "其他广告线索量",
            value: 0,
          },
          {
            data_name: "未知",
            type: "其他广告线索量",
            value: 0,
          },
          {
            data_name: "华西区",
            type: "其他自然线索量",
            value: 5,
          },
          {
            data_name: "华东区",
            type: "其他自然线索量",
            value: 4,
          },
          {
            data_name: "华中区",
            type: "其他自然线索量",
            value: 3,
          },
          {
            data_name: "华北区",
            type: "其他自然线索量",
            value: 3,
          },
          {
            data_name: "华南区",
            type: "其他自然线索量",
            value: 1,
          },
          {
            data_name: "未知",
            type: "其他自然线索量",
            value: 2,
          },
        ])
      }>点击</div>
      <VChart
        ref={chartRef}
        options={{
          // 注意,在实际使用场景中,需要自己引入:`import ReactDOM from 'react-dom/client';`
          ReactDOM: ReactDom
        }}
        spec={spec123}
      /></>
  );
};

ReactDom.createRoot(root).render(<Card />);

// release react instance, do not copy
window.customRelease = () => {
  ReactDom.unmountComponentAtNode(root);
};

Current Behavior

图元错乱

Expected Behavior

图元正常

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

neuqzxy avatar Sep 09 '25 07:09 neuqzxy