Closed
Description
Version
1.13.10
Link to Minimal Reproduction
1.13.10
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 getSpec = () => ({
type: 'line',
data: {
values: getData()
},
xField: 'time',
yField: 'value'
});
const root = document.getElementById(CONTAINER_ID);
const { VChart } = ReactVChart;
const { useState, useRef, useEffect } = React;
const Card = () => {
const [spec, setSpec] = useState({
"type": "area",
"padding": {
"left": 16,
"right": 16,
"top": 48,
"bottom": 16
},
"axes": [
{
"type": "band",
"orient": "bottom"
},
{
"type": "linear",
"label": {},
"orient": "left"
}
],
"data": {
"values": [
{
"voiceDate": "2023-01-01 00:00",
"voiceTotal": "200000",
"byteVoiceRate": "10",
"全网声量": "200000",
"涉我司负向声量": "10"
},
{
"voiceDate": "2023-01-02 00:00",
"voiceTotal": "300000",
"byteVoiceRate": "10",
"全网声量": "300000",
"涉我司负向声量": "10"
},
{
"voiceDate": "2023-01-03 00:00",
"voiceTotal": "200005",
"byteVoiceRate": "15",
"全网声量": "200005",
"涉我司负向声量": "15"
},
{
"voiceDate": "2023-01-04 00:00",
"voiceTotal": "300005",
"byteVoiceRate": "12",
"全网声量": "300005",
"涉我司负向声量": "12"
},
{
"voiceDate": "2023-01-05 00:00",
"voiceTotal": "400000",
"byteVoiceRate": "18",
"全网声量": "400000",
"涉我司负向声量": "18"
},
{
"voiceDate": "2023-01-06 00:00",
"voiceTotal": "450000",
"byteVoiceRate": "20",
"全网声量": "450000",
"涉我司负向声量": "20"
},
{
"voiceDate": "2023-01-07 00:00",
"voiceTotal": "500000",
"byteVoiceRate": "22",
"全网声量": "500000",
"涉我司负向声量": "22"
},
{
"voiceDate": "2023-01-08 00:00",
"voiceTotal": "550000",
"byteVoiceRate": "24",
"全网声量": "550000",
"涉我司负向声量": "24"
},
{
"voiceDate": "2023-01-09 00:00",
"voiceTotal": "600000",
"byteVoiceRate": "26",
"全网声量": "600000",
"涉我司负向声量": "26"
},
{
"voiceDate": "2023-01-10 00:00",
"voiceTotal": "650000",
"byteVoiceRate": "28",
"全网声量": "650000",
"涉我司负向声量": "28"
}
],
"transforms": [
{
"type": "fold",
"options": {
"key": "type",
"value": "value",
"fields": [
"全网声量",
"涉我司负向声量"
]
}
}
]
},
"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": "voiceDate",
"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"
}
],
"point": {
"visible": false
},
"line": {
"style": {
"curveType": "monotone"
}
}
});
const chartRef = useRef(null);
useEffect(() => {
window['vchart'] = chartRef;
}, []);
const handleSwitchData = () => {
setSpec(getSpec());
};
return (
<div>
<VChart ref={chartRef} spec={spec} width={250} height={336} />
<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);
};Current Behavior
dataZoom 拖动后图表宽度变小了
Expected Behavior
dataZoom 拖动后图表宽度不变
Environment
- OS:
- Browser:
- Framework:Any additional comments?
No response