[Bug] the name and axisLabel of zAxis3D is misaligned when the data is dynamically updated

[JackFen]

Version

5.2.1

Link to Minimal Reproduction

I do not how to edit it

Steps to Reproduce

let data = [[1, 1, 24, 31, 1], [1, 6, 68, 3, 2], [1, 11, 0, -5, 3], [1, 16, 89, 40, 4], [1, 21, 14, 18, 5], [1, 26, 47, 15, 6], [1, 31, 99, 27, 7], [1, 36, 77, 38, 8], [6, 1, 39, 35, 9], [6, 6, 34, 1, 10], [6, 11, 56, -6, 11], [6, 16, 61, 48, 12], [6, 21, 34, 21, 13], [6, 26, 36, 1, 14], [6, 31, 85, -7, 15], [6, 36, 97, 45, 16], [11, 1, 4, -1, 17], [11, 6, 80, 0, 18], [11, 11, 65, 1, 19], [11, 16, 83, 17, 20], [11, 21, 99, -2, 21], [11, 26, 4, 1, 22], [11, 31, 91, -9, 23], [11, 36, 8, 2, 24], [16, 1, 54, 45, 25], [16, 6, 72, 10, 26], [16, 11, 94, 1, 27], [16, 16, 14, 45, 28], [16, 21, 25, 3, 29], [16, 26, 35, 40, 30], [16, 31, 69, 9, 31], [16, 36, 38, 26, 32], [21, 1, 47, -8, 33], [21, 6, 45, 19, 34], [21, 11, 77, 25, 35], [21, 16, 99, 12, 36], [21, 21, 24, 30, 37], [21, 26, 20, -10, 38], [21, 31, 14, -2, 39], [21, 36, 31, 43, 40], [26, 1, 39, 14, 41], [26, 6, 74, 50, 42], [26, 11, 92, 41, 43], [26, 16, 46, 33, 44], [26, 21, 29, 42, 45], [26, 26, 40, 50, 46], [26, 31, 83, 11, 47], [26, 36, 74, 4, 48], [31, 1, 59, 6, 49], [31, 6, 48, 36, 50], [31, 11, 59, 17, 51], [31, 16, 24, 45, 52], [31, 21, 52, 38, 53], [31, 26, 35, 41, 54], [31, 31, 54, 29, 55], [31, 36, 92, 32, 56], [36, 1, 27, 17, 57], [36, 6, 24, 22, 58], [36, 11, 8, -2, 59], [36, 16, 4, 14, 60], [36, 21, 53, 23, 61], [36, 26, 10, 31, 62], [36, 31, 81, -10, 63], [36, 36, 24, 46, 64], [41, 1, 79, 39, 65], [41, 6, 75, 18, 66], [41, 11, 34, 19, 67], [41, 16, 60, 22, 68], [41, 21, 73, 34, 69], [41, 26, 77, 50, 70], [41, 31, 83, -6, 71], [41, 36, 75, 29, 72], [46, 1, 73, -6, 73], [46, 6, 22, -1, 74], [46, 11, 11, -9, 75], [46, 16, 17, 29, 76], [46, 21, 69, 39, 77], [46, 26, 14, -8, 78], [46, 31, 33, -1, 79], [46, 36, 61, 14, 80], [51, 1, 84, 26, 81], [51, 6, 11, 9, 82], [51, 11, 75, 16, 83], [51, 16, 3, 49, 84], [51, 21, 38, 24, 85], [51, 26, 41, -6, 86], [51, 31, 49, 23, 87], [51, 36, 52, 14, 88]]; let xMax = data[data.length - 1][0]; let yMax = data[data.length - 1][1];

let option = { visualMap: { seriesIndex: [0], max: 40, dimension: 3, // 使用第4个维度（温度） type: 'piecewise', pieces: [ { gte: 35, color: '#FF0000', label: '高于35℃' }, { gte: 25, lt: 35, color: '#FFFF66', label: '25 - 35℃' }, { gte: 10, lt: 25, color: '#7FFF00', label: '10 - 25℃' }, { gte: 0, lt: 10, color: '#00BFFF', label: '0 - 10℃' }, { lt: 0, color: '#307BF2', label: '低于0℃' }, ] }, xAxis3D: { type: 'value', name: '', min: data[0][0] == 0 ? -xMax - 1 : 0, max: xMax + 1 }, yAxis3D: { type: 'value', name: '', // axisLabel: { // show: false, // }, // axisTick: { // show: false, // }, // data: yCategories min: data[0][0] == 0 ? -yMax - 1 : 0, max: yMax + 1 }, zAxis3D: { type: 'value', name: '结露几率(%)' }, grid3D: { boxWidth: 200, boxDepth: 200, viewControl: { distance: 290, center: [0, -30, 0] } }, series: [ { type: 'bar3D', data: data, shading: 'color', barSize: 10, // 调整柱体宽度，以更好地对齐 // barGap: '-100%', // 调整柱体间距 // barCategoryGap: '0%', label: { show: false, fontSize: 16, borderWidth: 1 }, itemStyle: { opacity: 0.7 }, emphasis: { label: { color: '#000000' }, itemStyle: { color: '#000000', opacity: 0.9 } }, }, ], };

let list = [ [[1, 1, 35, 1, 1], [1, 6, 20, 28, 2], [1, 11, 75, 11, 3], [1, 16, 75, 36, 4], [1, 21, 26, 41, 5], [1, 26, 28, 33, 6], [1, 31, 15, 2, 7], [1, 36, 83, -9, 8], [6, 1, 62, -4, 9], [6, 6, 59, -1, 10], [6, 11, 28, 41, 11], [6, 16, 10, 42, 12], [6, 21, 74, 46, 13], [6, 26, 1, 43, 14], [6, 31, 8, 20, 15], [6, 36, 22, -2, 16], [11, 1, 27, 15, 17], [11, 6, 54, 41, 18], [11, 11, 24, 12, 19], [11, 16, 96, 37, 20], [11, 21, 24, 29, 21], [11, 26, 43, 9, 22], [11, 31, 99, 25, 23], [11, 36, 33, 46, 24], [16, 1, 53, -10, 25], [16, 6, 94, 24, 26], [16, 11, 13, 32, 27], [16, 16, 67, 35, 28], [16, 21, 68, -1, 29], [16, 26, 1, 9, 30], [16, 31, 18, 9, 31], [16, 36, 24, 7, 32], [21, 1, 0, 12, 33], [21, 6, 32, 10, 34], [21, 11, 5, 9, 35], [21, 16, 52, 23, 36], [21, 21, 30, -4, 37], [21, 26, 7, 19, 38], [21, 31, 16, -6, 39], [21, 36, 64, 40, 40], [26, 1, 13, 6, 41], [26, 6, 78, 14, 42], [26, 11, 38, 12, 43], [26, 16, 96, 29, 44], [26, 21, 70, 46, 45], [26, 26, 59, 3, 46], [26, 31, 77, 14, 47], [26, 36, 59, 10, 48], [31, 1, 60, 29, 49], [31, 6, 36, 39, 50], [31, 11, 16, 16, 51], [31, 16, 38, 34, 52], [31, 21, 96, 23, 53], [31, 26, 79, 50, 54], [31, 31, 87, 42, 55], [31, 36, 87, -5, 56], [36, 1, 67, 21, 57], [36, 6, 96, -5, 58], [36, 11, 13, 17, 59], [36, 16, 82, 49, 60], [36, 21, 4, -3, 61], [36, 26, 28, 23, 62], [36, 31, 98, 4, 63], [36, 36, 18, 45, 64], [41, 1, 98, 23, 65], [41, 6, 7, 47, 66], [41, 11, 6, 6, 67], [41, 16, 70, -9, 68], [41, 21, 85, 33, 69], [41, 26, 76, -1, 70], [41, 31, 65, 13, 71], [41, 36, 47, 46, 72], [46, 1, 92, 22, 73], [46, 6, 26, -5, 74], [46, 11, 19, -1, 75], [46, 16, 16, 7, 76], [46, 21, 88, 48, 77], [46, 26, 72, 16, 78], [46, 31, 84, -8, 79], [46, 36, 38, 46, 80], [51, 1, 81, 17, 81], [51, 6, 42, 43, 82], [51, 11, 2, 2, 83], [51, 16, 81, 30, 84], [51, 21, 85, 33, 85], [51, 26, 25, 3, 86], [51, 31, 60, 5, 87], [51, 36, 92, 44, 88]], [[1, 1, 90, 50, 1], [1, 6, 89, 8, 2], [1, 11, 50, 25, 3], [1, 16, 99, 37, 4], [1, 21, 24, 44, 5], [1, 26, 5, 43, 6], [1, 31, 19, 47, 7], [1, 36, 22, 26, 8], [6, 1, 13, -8, 9], [6, 6, 91, 34, 10], [6, 11, 4, -5, 11], [6, 16, 92, 41, 12], [6, 21, 25, -3, 13], [6, 26, 28, 31, 14], [6, 31, 32, 40, 15], [6, 36, 48, 22, 16], [11, 1, 97, 43, 17], [11, 6, 24, 21, 18], [11, 11, 21, -5, 19], [11, 16, 24, 14, 20], [11, 21, 14, 17, 21], [11, 26, 54, 24, 22], [11, 31, 27, 1, 23], [11, 36, 28, 48, 24], [16, 1, 86, 4, 25], [16, 6, 47, 46, 26], [16, 11, 10, -4, 27], [16, 16, 65, 32, 28], [16, 21, 75, 12, 29], [16, 26, 63, 47, 30], [16, 31, 41, 18, 31], [16, 36, 23, 47, 32], [21, 1, 96, 26, 33], [21, 6, 77, 24, 34], [21, 11, 86, 25, 35], [21, 16, 96, 8, 36], [21, 21, 21, 25, 37], [21, 26, 91, 38, 38], [21, 31, 34, 33, 39], [21, 36, 99, 10, 40], [26, 1, 46, 26, 41], [26, 6, 12, -6, 42], [26, 11, 34, 44, 43], [26, 16, 44, 41, 44], [26, 21, 8, 27, 45], [26, 26, 83, 10, 46], [26, 31, 49, 48, 47], [26, 36, 90, 48, 48], [31, 1, 24, 7, 49], [31, 6, 36, 24, 50], [31, 11, 64, 11, 51], [31, 16, 57, 28, 52], [31, 21, 13, 0, 53], [31, 26, 73, 45, 54], [31, 31, 82, 33, 55], [31, 36, 88, 50, 56], [36, 1, 1, -9, 57], [36, 6, 96, 46, 58], [36, 11, 65, 37, 59], [36, 16, 96, 0, 60], [36, 21, 57, 33, 61], [36, 26, 87, 12, 62], [36, 31, 98, 6, 63], [36, 36, 29, 43, 64], [41, 1, 4, 34, 65], [41, 6, 54, 42, 66], [41, 11, 82, -6, 67], [41, 16, 73, 40, 68], [41, 21, 15, 28, 69], [41, 26, 7, 33, 70], [41, 31, 69, 16, 71], [41, 36, 82, 23, 72], [46, 1, 34, 41, 73], [46, 6, 66, 8, 74], [46, 11, 45, 34, 75], [46, 16, 79, 21, 76], [46, 21, 67, -1, 77], [46, 26, 75, 35, 78], [46, 31, 56, 23, 79], [46, 36, 76, 0, 80], [51, 1, 50, 18, 81], [51, 6, 35, 27, 82], [51, 11, 68, 1, 83], [51, 16, 33, 0, 84], [51, 21, 94, 5, 85], [51, 26, 69, 20, 86], [51, 31, 24, 26, 87], [51, 36, 78, -1, 88]] ] let data = list[Math.floor(Math.random() * 2)]

myChart && myChart.setOption({ series: [{ name: "dynamicData", data: data }] }, { lazyUpdate: true });

Current Behavior

the name and axisLabel of zAxis3D is misaligned when the data is dynamically updated.The graph with the red circle is displayed after updating the data

Expected Behavior

After dynamically updating the data, the name and axisLabel of zAxis3D are displayed as shown in the figure without circles

Environment

- OS:macOS Monterey
- Browser:Chrome 96.0.4664.55
- Framework:Vue@2

Any additional comments?

No response

[helgasoft]

cannot reproduce, Z-axis name/labels remain unchanged - Demo

[JackFen]

cannot reproduce, Z-axis name/labels remain unchanged - Demo

I'm sorry that the issue I submitted cannot be reproduced. This is the problem I encountered based on the demo you provided-reworkedDemo

[helgasoft]

not-a-bug, you are just using an older version 5.2.1 of ECharts. There is no problem with latest v.5.5.1. 📌 please close issue if problem solved.

[JackFen]

not-a-bug, you are just using an older version 5.2.1 of ECharts. There is no problem with latest v.5.5.1. 📌 please close issue if problem solved.

You are right, the misalignment issue was fixed in versions later than 5.2.x, but when dynamically updating data in versions later than 5.2.x, the dragging and dropping of the model can be very cumbersome. However, this issue is not present in version 5.2.x. You can see the effect in this Demo by dragging and rotating the model.