[Bug] setDimensionIndex(null) did not reset symbol style

[xuefei1313]

Version

2.0.02

Link to Minimal Reproduction

null

Steps to Reproduce

const getData = () => ['2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00'].map(time => ({ time, value: Math.random() * 10 }));

const getLineSpec = () => ({ type: 'line', data: { values: getData() }, xField: 'time', yField: 'value', crosshair: { xField: { label: { visible: true } } }, point: { style: { size: 0, fill: 'white', stroke: null, lineWidth: 2, }, state: { dimension_hover: { size: 8, }, }, }, });

const getBarSpec = () => ({ type: 'bar', data: { values: getData() }, xField: 'time', yField: 'value', crosshair: { xField: { label: { visible: true } } } });

const root = document.getElementById(CONTAINER_ID); const { VChart } = ReactVChart; const { useState, useRef, useEffect, useCallback } = React;

const Card = () => { const [lineSpec, setLineSpec] = useState(getLineSpec()); const [barSpec, setBarSpec] = useState(getBarSpec()); const lineChartRef = useRef(null); const barChartRef = useRef(null);

useEffect(() => { window['vchart'] = lineChartRef.current; }, []);

const handleSwitchData = () => { setLineSpec(getLineSpec()); setBarSpec(getBarSpec()); };

const handleLineChartDimensionHover = useCallback(params => { if (!barChartRef.current) { return; }

const dimensionValue = params.dimensionInfo && params.dimensionInfo[0] && params.dimensionInfo[0].value;

if (dimensionValue != null && params.action !== 'leave') {
  barChartRef.current.setDimensionIndex(dimensionValue, { tooltip: false });
} else {
  barChartRef.current.setDimensionIndex(null, { tooltip: false });
}

}, []); const handleBarChartDimensionHover = useCallback(params => { if (!lineChartRef.current) { return; } const dimensionValue = params.dimensionInfo && params.dimensionInfo[0] && params.dimensionInfo[0].value;

if (dimensionValue != null && params.action !== 'leave') {
  lineChartRef.current.setDimensionIndex(dimensionValue, { tooltip: false });
} else {
  lineChartRef.current.setDimensionIndex(null, { tooltip: false });
}

}, []);

return ( <div className="chart-containers"> <div className="inner-container" style={{ display: 'flex' }}> <div style={{ flex: 1 }}> <VChart ref={lineChartRef} spec={lineSpec} onDimensionHover={handleLineChartDimensionHover} /> <div style={{ flex: 1 }}> <VChart ref={barChartRef} spec={barSpec} onDimensionHover={handleBarChartDimensionHover} /> <button style={{ position: 'absolute', top: 0, left: '50%', transform: 'translate(-50%, 0)' }} onClick={handleSwitchData} > Switch Data ); };

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

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

Current Behavior

Expected Behavior

symbol style reset to normal

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response