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. (echarts.min.js:45:116806)

③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