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 getSpec = () => ({
"type": "area",
"background": "transparent",
"padding": {
"left": 16,
"right": 16,
"top": 48,
"bottom": 16
},
"axes": [
{
"type": "time",
"orient": "bottom",
"autoIndent": false,
"nice": false,
"grid": {
"visible": false
},
"title": {
"visible": true,
"text": "值",
"position": "start",
"style": {
"dy": -252,
"dx": -12,
"fill": "#737A87"
}
},
"label": {
"formatMethod": (v, v1) => new Date(v1 ? v1.rawValue : 0).toLocaleString(),
},
// "layers": [
// {
// "tickStep": 28800,
// "timeFormat": "%H:%M"
// },
// {
// "tickStep": 86400,
// "timeFormat": "%m/%d"
// }
// ]
},
{
"type": "linear",
"grid": {
"visible": true,
"style": {
"lineDash": [
4,
4
]
}
},
"orient": "left"
}
],
"data": {
"values": [
{
"time": "1743609600000",
"值1": "7",
"值2": "0"
},
{
"time": "1743613200000",
"值1": "1",
"值2": "0"
},
{
"time": "1743775200000",
"值1": "20",
"值2": "0"
},
{
"time": "1743778800000",
"值1": "28",
"值2": "0"
},
{
"time": "1743782400000",
"值1": "7",
"值2": "0"
},
{
"time": "1743786000000",
"值1": "2",
"值2": "0"
},
{
"time": "1743789600000",
"值1": "1",
"值2": "0"
},
{
"time": "1743793200000",
"值1": "1",
"值2": "0"
},
{
"time": "1743796800000",
"值1": "0",
"值2": "0"
},
{
"time": "1743800400000",
"值1": "2",
"值2": "0"
},
{
"time": "1743804000000",
"值1": "9",
"值2": "0"
},
{
"time": "1743807600000",
"值1": "14",
"值2": "0"
},
{
"time": "1748703600000",
"值1": "0",
"值2": "0"
},
{
"time": "1748707200000",
"值1": "0",
"值2": "0"
},
{
"time": "1748710800000",
"值1": "0",
"值2": "0"
},
{
"time": "1748714400000",
"值1": "0",
"值2": "0"
},
{
"time": "1748718000000",
"值1": "0",
"值2": "0"
},
{
"time": "1748721600000",
"值1": "0",
"值2": "0"
},
{
"time": "1748725200000",
"值1": "0",
"值2": "0"
},
{
"time": "1748728800000",
"值1": "0",
"值2": "0"
},
{
"time": "1748732400000",
"值1": "0",
"值2": "0"
},
{
"time": "1748736000000",
"值1": "0",
"值2": "0"
},
{
"time": "1748739600000",
"值1": "0",
"值2": "0"
},
{
"time": "1748743200000",
"值1": "0",
"值2": "0"
},
{
"time": "1748746800000",
"值1": "0",
"值2": "0"
},
{
"time": "1748750400000",
"值1": "0",
"值2": "0"
},
{
"time": "1748754000000",
"值1": "0",
"值2": "0"
},
{
"time": "1748757600000",
"值1": "0",
"值2": "0"
},
{
"time": "1748761200000",
"值1": "0",
"值2": "0"
},
{
"time": "1748764800000",
"值1": "0",
"值2": "0"
},
{
"time": "1748768400000",
"值1": "0",
"值2": "0"
},
{
"time": "1748772000000",
"值1": "0",
"值2": "0"
},
{
"time": "1748775600000",
"值1": "0",
"值2": "0"
},
{
"time": "1748779200000",
"值1": "0",
"值2": "0"
},
{
"time": "1748782800000",
"值1": "0",
"值2": "0"
},
{
"time": "1748786400000",
"值1": "0",
"值2": "0"
},
{
"time": "1748790000000",
"值1": "0",
"值2": "0"
},
{
"time": "1748793600000",
"值1": "0",
"值2": "0"
},
{
"time": "1748797200000",
"值1": "0",
"值2": "0"
},
{
"time": "1748800800000",
"值1": "0",
"值2": "0"
},
{
"time": "1748804400000",
"值1": "0",
"值2": "0"
},
{
"time": "1748808000000",
"值1": "0",
"值2": "0"
},
{
"time": "1748811600000",
"值1": "0",
"值2": "0"
},
{
"time": "1748815200000",
"值1": "0",
"值2": "0"
},
{
"time": "1748818800000",
"值1": "0",
"值2": "0"
},
{
"time": "1748822400000",
"值1": "0",
"值2": "0"
},
{
"time": "1748826000000",
"值1": "0",
"值2": "0"
},
{
"time": "1748829600000",
"值1": "0",
"值2": "0"
},
{
"time": "1748833200000",
"值1": "0",
"值2": "0"
},
{
"time": "1749027214000",
"值1": "0",
"值2": "0"
},
],
"transforms": [
{
"type": "fold",
"options": {
"key": "type",
"value": "value",
"fields": [
"值1",
"值2"
]
}
}
]
},
"dataZoom": [
{
"orient": "bottom",
"backgroundChart": {
"area": {
"style": {
"lineWidth": 1,
"fill": "#D1DBEE"
}
},
"line": {
"style": {
"stroke": "#D1DBEE",
"lineWidth": 1
}
}
},
"selectedBackgroundChart": {
"area": {
"style": {
"lineWidth": 1,
"fill": "#fbb934"
}
},
"line": {
"style": {
"stroke": "#fbb934",
"lineWidth": 1
}
}
}
}
],
"xField": "time",
"yField": "value",
"seriesField": "type",
"area": {
"style": {
"fill": {
"gradient": "linear",
"x0": 0.1,
"y0": 0,
"x1": 0.1,
"y1": 1,
"stops": [
{
"offset": 0,
"opacity": 1
},
{
"offset": 1,
"opacity": 0.1
}
]
}
}
},
"theme": {
"colorScheme": {
"default": [
"#1AC6FF",
"#FF8A00"
]
}
},
"stack": false,
"legends": [
{
"type": "discrete",
"visible": true,
"position": "start",
"orient": "bottom"
}
],
"markLine": [
{
"type": "type-step",
"connectDirection": "top",
"interactive": true,
"x": 1748260279000,
"endSymbol": {
"visible": false
},
"label": {
"visible": true,
"dx": -2,
"dy": 0,
"style": {
"fill": "#1C1C23",
"cursor": "pointer",
"text": "111"
}
},
"line": {
"style": {
"stroke": "#EAEDF1",
"lineWidth": 2,
"lineDash": [
4,
4
]
},
"state": {
"hover": {
"lineWidth": 3
}
}
}
},
{
"type": "type-step",
"connectDirection": "top",
"interactive": true,
"x": 1749027214000,
"endSymbol": {
"visible": false
},
"label": {
"visible": true,
"dx": -2,
"dy": 0,
"style": {
"fill": "#1C1C23",
"cursor": "pointer",
"text": "111"
}
},
"line": {
"style": {
"stroke": "#EAEDF1",
"lineWidth": 2,
"lineDash": [
4,
4
]
},
"state": {
"hover": {
"lineWidth": 3
}
}
}
}
],
"point": {
"visible": false
},
"line": {
"style": {
"curveType": "monotone"
}
}
});
const root = document.getElementById(CONTAINER_ID);
const { VChart } = ReactVChart;
const { useState, useRef, useEffect } = React;
const Card = () => {
const [spec, setSpec] = useState(getSpec());
const chartRef = useRef(null);
useEffect(() => {
window['vchart'] = chartRef;
}, []);
const handleSwitchData = () => {
setSpec(getSpec());
};
return (
<div>
<VChart ref={chartRef} spec={spec} />
<button
style={{ position: 'absolute', top: 0, left: '50%', transform: 'translate(-50%, 0)' }}
onClick={handleSwitchData}
>
Switch Data
</button>
</div>
);
};
ReactDom.createRoot(root).render(<Card />);
// release react instance, do not copy
window.customRelease = () => {
ReactDom.unmountComponentAtNode(root);
};
Version
1.13.10
Link to Minimal Reproduction
null
Steps to Reproduce
Current Behavior
Expected Behavior
datazoom缩放到最小范围时，markLine不该出现
Environment
Any additional comments?
No response