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
    No fields configured for issues without a type.

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions