Skip to content

[Bug] graphic component abnormal in lazyUpdate: true #20924

@100pah

Description

@100pah

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

// 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

- OS:
- Browser:
- Framework:

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugenThis issue is in English

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions