[Bug] macOS (仅 arm 架构芯片存在？) +Chrome浏览器特定版本 map3D 地图不停闪烁 ——macOS v14.3.1\Chrome 版本 131.0.6778.86（正式版本） （arm64）

[admvli2016]

Version

5.5.1

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/index.html#chart-type-map3D

Steps to Reproduce

1，

<template>
  <div :id="id" :class="className" :style="getChartStyle()"></div>
  <!-- :ref="chartRef" -->
</template>

2，

import echarts from '@/libs/echarts-pack';
import cityExport from '@/assets/mapJson/cityExport.js';
import { getDefaultView } from '@/pages/big-screen-part/screen-map/datasource/map';

echarts.registerMap('china', cityExport.china);

const getGeo3D = () => {
  return {
    map: 'china',
    roam: true,
    itemStyle: {
      color: ' #022796', // 地图配色
      opacity: 1, // 图形的不透明度
      borderWidth: 0.8,
      borderColor: 'rgb(62,215,213)'
    },
    viewControl: getDefaultView(),
    emphasis: {
      label: {
        show: true, // 是否显示标签
        color: '#fff', // 标签文字颜色
        fontSize: 20, // 标签文字大小
        distance: 0
      },
      itemStyle: {
        color: 'rgba(2, 39, 150, 0.3)' // 聚焦时的颜色
      }
    },
    light: {
      //光照阴影
      main: {
        color: ' #fff', //光照颜色
        intensity: 1.2, //光照强度
        shadowQuality: 'high', //阴影亮度
        shadow: true, //是否显示阴影
        alpha: 55, //光照角度
        beta: 10 //光源方向
      },
      ambient: {
        intensity: 0.5 //环境光的强度
      } //全局的环境光设置
    }
  };
};

export const option = {
  tooltip: {
    show: true
  },
  renderer: 'webgl',
  webGLMaxMergingVertices: 8000, // 增加 WebGL 缓冲区大小的示例值, 优化性能问题

  geo3D: getGeo3D(),
  series: []
};

3， 拖拽 或者 hover 时，会发现地图在不停的闪烁，重新渲染

Current Behavior

macOS v14.3.1 + Chrome 版本 131.0.6778.86（正式版本） （arm64）Echarts map 3D 地图不停地闪烁

Expected Behavior

Echarts map 3d 地图可正常工作，不闪烁

Environment

- OS: macOS v14.3.1
- Browser: Chrome 版本 131.0.6778.86（正式版本） （arm64）
- Framework: "vue": "3.3.4"

Any additional comments?

现象如附件macOS v14.3.1 + Chrome 版本 131.0.6778.86（正式版本）（arm64）.mp4所示：

https://github.com/user-attachments/assets/3ace448d-f992-4c83-af89-87b6bfc911bd

操作系统版本如下：

浏览器版本如下：

Safari 浏览器没有此问题 如附件 macOS v14.3.1 + Safari 版本 17.3.1（19617.2.4.11.12）.mp4 所示

https://github.com/user-attachments/assets/86a2eb1d-d01d-442b-a3e9-3471a356cf94

其他macOS低于 v14.3.1 版本，且Chrome 为 最新版本131.0.6778.86（正式版本）x86 架构的 均没有此问题

如 附件macOS v13.5.2 + Chrome 版本 131.0.6778.86（正式版本）（x86_64）.mp4所示 没有闪烁的问题

https://github.com/user-attachments/assets/265cbfc0-cb9e-4493-8e42-8605a5e5420b

操作系统版本如下：

浏览器版本如下：

macOS v12.7.6 + Chrome 版本 131.0.6778.86（正式版本）（x86_64）也没有闪烁的问题 操作系统版本如下：

浏览器版本如下： Chrome 已是最新版本 版本 131.0.6778.86（正式版本） (x86_64)

[echarts-bot[bot]]

@admvli2016 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

[Bug] macOS (only arm-based chips exist?) +Chrome-specific version map3D maps keep flashing - macOS v14.3.1\Chrome version 131.0.6778.86 (Official version) (arm64)

BODY

Version

5.5.1

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/index.html#chart-type-map3D

Steps to Reproduce

1,

<template>
  <div :id="id" :class="className" :style="getChartStyle()"></div>
  
</template>

import echarts from '@/libs/echarts-pack';
import cityExport from '@/assets/mapJson/cityExport.js';
import { getDefaultView } from '@/pages/big-screen-part/screen-map/datasource/map';

echarts.registerMap('china', cityExport.china);

const getGeo3D = () => {
  return {
    map: 'china',
    roam: true,
    itemStyle: {
      color: ' #022796', // Map color
      opacity: 1, // The opacity of the graphic
      borderWidth: 0.8,
      borderColor: 'rgb(62,215,213)'
    },
    viewControl: getDefaultView(),
    emphasis: {
      label: {
        show: true, // Whether to display the label
        color: '#fff', // Label text color
        fontSize: 20, // Label text size
        distance: 0
      },
      itemStyle: {
        color: 'rgba(2, 39, 150, 0.3)' // Color when focused
      }
    },
    light: {
      //light shadow
      main: {
        color: ' #fff', //Lighting color
        intensity: 1.2, //light intensity
        shadowQuality: 'high', //shadow brightness
        shadow: true, //Whether to display shadow
        alpha: 55, //light angle
        beta: 10 //Light source direction
      },
      ambient: {
        intensity: 0.5 //Intensity of ambient light
      } //Global ambient light settings
    }
  };
};

export const option = {
  tooltip: {
    show: true
  },
  renderer: 'webgl',
  webGLMaxMergingVertices: 8000, // Example value for increasing WebGL buffer size to optimize performance issues

  geo3D: getGeo3D(),
  series: []
};

When dragging or hovering, you will find that the map is constantly flashing and re-rendered.

Current Behavior

macOS v14.3.1 + Chrome version 131.0.6778.86 (official version) (arm64) Echarts map 3D map keeps flashing

Expected Behavior

Echarts map 3d map works fine and does not flicker

Environment

- OS: macOS v14.3.1
- Browser: Chrome version 131.0.6778.86 (official version) (arm64)
- Framework: "vue": "3.3.4"

Any additional comments?

The phenomenon is shown in the attached macOS v14.3.1 + Chrome version 131.0.6778.86 (official version) (arm64).mp4:

https://github.com/user-attachments/assets/3ace448d-f992-4c83-af89-87b6bfc911bd

The operating system versions are as follows:

The browser versions are as follows:

Safari does not have this issue As shown in the attachment macOS v14.3.1 + Safari version 17.3.1 (19617.2.4.11.12).mp4

https://github.com/user-attachments/assets/86a2eb1d-d01d-442b-a3e9-3471a356cf94

Other macOS versions lower than v14.3.1, and Chrome with the latest version 131.0.6778.86 (official version) x86 architecture, do not have this problem.

As shown in the attachment macOS v13.5.2 + Chrome version 131.0.6778.86 (official version) (x86_64).mp4 No flickering issues

https://github.com/user-attachments/assets/265cbfc0-cb9e-4493-8e42-8605a5e5420b

The operating system versions are as follows:

The browser versions are as follows:

macOS v12.7.6 + Chrome version 131.0.6778.86 (official version) (x86_64) also has no flickering problem The operating system versions are as follows:

The browser versions are as follows: Chrome is already the latest version Version 131.0.6778.86 (official version) (x86_64)

[Accour]

请问有解决方案了嘛～

[admvli2016]

目前还没有解决方案