apache
[Bug] The display and hiding of legends result in the failure of datazoom functionality
Version
5.5.0
Link to Minimal Reproduction
https://echarts.apache.org/examples/zh/editor.html?c=custom-profile
Steps to Reproduce
1.Create an icon of type="custom" as a Gantt chart 2.The option settings are as follows: var data1 = []; var data2 = []; var dataCount = 10; var startTime = +new Date(); var categories = ['categoryA', 'categoryB', 'categoryC']; var types = [ { name: 'JS Heap', color: '#7b9ce1' }, { name: 'Documents', color: '#bd6d6c' }, { name: 'Nodes', color: '#75d874' }, { name: 'Listeners', color: '#e0bc78' }, { name: 'GPU Memory', color: '#dc77dc' }, { name: 'GPU', color: '#72b362' } ]; // Generate mock data categories.forEach(function (category, index) { var baseTime = startTime; for (var i = 0; i < dataCount; i++) { var typeItem = types[Math.round(Math.random() * (types.length - 1))]; var duration = Math.round(Math.random() * 10000); data1.push({ name: typeItem.name, value: [index, baseTime, (baseTime += duration), duration], itemStyle: { normal: { color: typeItem.color } } }); baseTime += Math.round(Math.random() * 2000); } for (var i = 0; i < dataCount; i++) { var typeItem = types[Math.round(Math.random() * (types.length - 1))]; var duration = Math.round(Math.random() * 10000); data2.push({ name: typeItem.name, value: [index, baseTime, (baseTime += duration), duration], itemStyle: { normal: { color: typeItem.color } } }); baseTime += Math.round(Math.random() * 2000); } }); function renderItem(params, api) { var categoryIndex = api.value(0); var start = api.coord([api.value(1), categoryIndex]); var end = api.coord([api.value(2), categoryIndex]); var height = api.size([0, 1])[1] * 0.6; var rectShape = echarts.graphic.clipRectByRect( { x: start[0], y: start[1] - height / 2, width: end[0] - start[0], height: height }, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height } ); return ( rectShape && { type: 'rect', transition: ['shape'], shape: rectShape, style: api.style() } ); } option = { tooltip: { formatter: function (params) { return params.marker + params.name + ': ' + params.value[3] + ' ms'; } }, title: { text: 'Profile', left: 'center' }, dataZoom: [ { type: 'slider', filterMode: 'weakFilter', showDataShadow: false, top: 400, labelFormatter: '' }, { type: 'inside', filterMode: 'weakFilter' } ], grid: { height: 300 }, xAxis: { min: startTime, scale: true, axisLabel: { formatter: function (val) { return Math.max(0, val - startTime) + ' ms'; } } }, yAxis: { data: categories }, series: [ { name: '运行', type: 'custom', renderItem: renderItem, itemStyle: { opacity: 0.8 }, encode: { x: [1, 2], y: 0 }, data: data1 }, { name: '失效', type: 'custom', renderItem: renderItem, itemStyle: { opacity: 0.8 }, encode: { x: [1, 2], y: 0 }, data: data2 } ], legend: { show: true } }; 3.①Adjust the dataZoom to 0-10，②Hide the first legend，③Push dataZoom to 90-100，④Display the first legend，⑤Open browser console
Current Behavior
①The console will report an error。
②The error message is as follows：
echarts.min.js:45 Uncaught TypeError: Cannot read properties of null (reading 'remove')
at gR (echarts.min.js:45:672871)
at t._remove (echarts.min.js:45:676847)
at t._executeOneToOne (echarts.min.js:45:224424)
at t.execute (echarts.min.js:45:224006)
at e.render (echarts.min.js:45:676947)
at t.progress (echarts.min.js:45:167296)
at t._doProgress (echarts.min.js:45:135755)
at t.perform (echarts.min.js:45:135327)
at echarts.min.js:45:216296
at e.
③Causing the chart to not change with the dataZoom when dragging it again
Expected Behavior
①Console does not report any errors。 ②Dragging dataZoom can make the chart follow changes。
Environment
- OS:Windows10
- Browser:125.0.6422.77
- Framework:Vue@2
Any additional comments?
Bugs discovered during testing Gantt chart functionality
cannot replicate, no error in console...
- Copy the option from the step to the left to obtain the image step0
- Follow steps 1-4 of the images separately, and the browser console will output the result of the image error, which is 100% reproduced
ok, see it now, was doing step3 wrong - zoom 1-90 instead of 90-100. Error seems to come from this line https://github.com/apache/echarts/blob/369cb035030124e0c1fe2c74a882781c0e90a556/src/animation/customGraphicTransition.ts#L226