VChart
VChart copied to clipboard
[Bug] 拖动datazoom动画流程出问题,图元没销毁
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