Skip to content

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

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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