AlisaXiang opened a new issue, #20199: URL: https://github.com/apache/echarts/issues/20199
### Version 5.5.0 ### Link to Minimal Reproduction https://echarts.apache.org/examples/zh/editor.html?c=line-gradient ### Steps to Reproduce // prettier-ignore const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]]; const dateList = data.map(function (item) { return item[0]; }); const valueList = data.map(function (item) { return item[1]; }); const weatherIcons = { Showers: ROOT_PATH + '/data/asset/img/weather/showers_128.png', Sunny: ROOT_PATH + '/data/asset/img/weather/sunny_128.png', Cloudy: ROOT_PATH + '/data/asset/img/weather/cloudy_128.png' }; option = { // Make gradient line here visualMap: [ { show: false, type: 'continuous', seriesIndex: 0, min: 0, max: 400 }, { show: false, type: 'continuous', seriesIndex: 1, dimension: 0, min: 0, max: dateList.length - 1 } ], title: [ { left: 'center', text: 'Gradient along the y axis' }, { top: '55%', left: 'center', text: 'Gradient along the x axis' } ], tooltip: { trigger: 'axis' }, xAxis: [ { data: dateList }, { data: dateList, gridIndex: 1 } ], yAxis: [ {}, { gridIndex: 1 } ], grid: [ { bottom: '60%' }, { top: '60%' } ], graphic:{ id: '345', elements: [ { type: 'group', top: 5, z: 3, id: 'remove', children: [{ type: 'rect', shape: { width:300, height: 24 }, id: 'remove-2', cursor: 'none', style: { fill: '#f5f6f5' } },{ type: 'text', shape: { width:300, height: 24 }, id: 'remove-1', cursor: 'pointer', style: { fill: '#333', text: 'hello world', x: 90, width: 120 }, onclick: () => { const newOpt = myChart.getOption(); const {graphic} = newOpt; const {elements} = graphic[0]; elements.forEach(el => { if (el.type === 'image') { el.style.x = el.style.x === 10 ? 40 : 10 } }); myChart.setOption(newOpt, true); } },{ type: 'image', cursor: 'pointer', z:20, top: 2, id: 'remove-3', ignore: false, style: { image: weatherIcons.Sunny, width: 20, x: 10, info: 'rgba(228, 86, 34, 1)', lineWidth: 2, opacity: 1 }, onclick: () => { const newOpt = myChart.getOption(); const {graphic} = newOpt; const {elements} = graphic[0]; elements.forEach(el => { if (el.type === 'image') { el.style.x = el.style.x === 10 ? 40 : 10 } }); myChart.setOption(newOpt) } }, { type: 'image', cursor: 'pointer', id: 'remove-5', z:20, top: 2, ignore: false, style: { image: weatherIcons.Cloudy, width: 20, x: 40, info: 'rgba(228, 86, 34, 1)', lineWidth: 2, opacity: 1 }, onclick: () => { const newOpt = myChart.getOption(); const {graphic} = newOpt; const {elements} = graphic[0]; elements.forEach(el => { if (el.type === 'image') { el.style.x = el.style.x === 10 ? 40 : 10 } }); myChart.setOption(newOpt, true); } }] }, { type: 'group', top: 60, z: 3, id: 'del', children: [{ type: 'rect', shape: { width:520, height: 24 }, cursor: 'none', style: { fill: 'pink' } },{ type: 'text', id: 'del-1', shape: { width:300, height: 24 }, top: 6, cursor: 'pointer', style: { fill: '#333', text: 'Delete the child node whose id contains remove', x: 90, width: 120 }, onclick: () => { const newOpt = myChart.getOption(); const {graphic} = newOpt; let {elements} = graphic[0]; const newEle = elements; elements = newEle.filter(ne => ne.id.indexOf('remove') < 0); console.log('ele. ', elements); myChart.setOption(newOpt, true); setTimeout(function() { console.log('output options = ', myChart.getOption()) }, 10); } }] }] }, series: [ { type: 'line', showSymbol: false, data: valueList }, { type: 'line', showSymbol: false, data: valueList, xAxisIndex: 1, yAxisIndex: 1 } ] }; ### Current Behavior Delete the child node whose id contains 'remove'  ### Expected Behavior graphic can delete child nodes normally and update the chart ### Environment ```markdown - OS:macOS Monterey - Browser:127.0.6533.72 - Framework:React ``` ### Any additional comments? _No response_ -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
