apache / apache/echarts

[Bug] graphic component abnormal in `lazyUpdate: true`

Open
#20,924 0 comments 1 reaction 0 assignees View on GitHub
bug en
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.6.0

### Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?code=PTAEFEA8AcFMGMAuoDmAnWsB2oNIFAigBCArsgIZKkUA2tAnqAEa1UDWuCyAlgGag2ALwYBVaABMKiWAC5QiNKVj588APZYAzsgAyAQQBaATQD6ogAoARfQBVwoALwKlsANyEwG7XqNnLNvZOoHx0Wu746tCIPJrBAN74oKCQ-pA8WvLxAL4ANEmgDGkZWXkF4Wg8sJmgANoFyYnJzQoMcPIA5LQ8WLAd-S3JUogU8vWDzbUAjAAMuaBTALoDE3UAzPMArIsNzTst2QU72R744Yi2PAC2sOrkABT3AJROAHygTaAAbhRooDqwaBTBK7KIxTRZXbJdAUaAACx48Ehq1AsFosBuWEQNXGKI-UNWiDaclAHTwiH6BImPAknXQNNMzDuWCkaAYph6EkR0nUaEpeOaWjhsJJ8RS8k2c0KEqlAHcaYg4fI1mspXDYDwUHDEMrZqAygLkjoGOisiEePROmgUMwKPc5lNJbk5jMAHSbJ4dfUrAVaC3YHUuZRU5qHFH7QYGwapdI1HI-5pFWOlBNG2CVapjEOfFFE9qk7q9fl44ajOohlrTKVLVOrWobUDbCugCMTMODVve3YIADKsEQAHlorEsEPA2KsOpEABZdMoEmKZTzYRiSTSEkGEzmax2Bztk6qZI_P4A6AAJhBLTBI-Rgxh8MRt4maIxAZxzZzeJpdMqEkZzNZdlOW5RBeWLX1hXzMVIBleYGFg0B5QkRVlVVeZ1U1bVdRmfVm3bCZO2SfCuxaXt-zHEcxzNFdxGGDc_G3QI9wKA8CiuBgAGFhTQRBXXOCjNHuU8plda9NHmYTXTIwdh00Mcng8ZJ2K435eP42SsCEmRz1EjSJO0s8pPgPsZPBUdogU_A8gWGZbIUoA

```js

// Expect green rect
// But actually black rect if lazyUpdate: true

const LAZY_UPDATE = true;
// const LAZY_UPDATE = false;
option = {
xAxis: {},
yAxis: {},
series: [
{
type: 'line',
data: [
[10, 1],
[3, 5]
]
}
]
};

setTimeout(() => {
var step1 = {
option: {
graphic: {
elements: [
{
type: 'rect',
id: 'grid_boundary_indicator',
shape: { x: 50, y: 50, width: 330, height: 310 },
style: { fill: 'rgba(0,150,0,0.5)' },
silent: true
}
]
},
xAxis: {},
yAxis: {},
series: [
{
type: 'line',
data: [
[10, 1],
[3, 5]
]
}
]
},
ecSetOptionOpt: { notMerge: true, lazyUpdate: LAZY_UPDATE }
};

var step2 = {
option: {
graphic: {
elements: [
{
id: 'grid_boundary_indicator',
shape: { x: 50, y: 50, width: 330, height: 310 }
}
]
}
},
ecSetOptionOpt: { lazyUpdate: LAZY_UPDATE }
};

myChart.setOption(step1.option, step1.ecSetOptionOpt);
myChart.setOption(step2.option, step2.ecSetOptionOpt);
}, 1000);

```

### Steps to Reproduce

See the demo URL above.

### Current Behavior

graphic loose some info if `lazyUpdate: true`
In the case above, loose `style: {...}`

### Expected Behavior

Consistent and correct behavior regardless of `lazyUpdate` setting.

### Environment

```markdown
- OS:
- Browser:
- Framework:
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.