zr_100000

一、遇到问题

当一个 Echarts 图加载大数据量时，加载成功后，直接右键单击->复制图片/图片另存为可以正常复制图片；但是当鼠标悬浮展示tooltip之后，重复以上操作，无法复制正确的图片内容。

二、解决方法

2.1 关键属性

hoverLayerThreshold

2.2 设置方式

option = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  hoverLayerThreshold:Infinity,
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
  ]
};

三、解决过程

3.0 检查dom

发现自动添加了一层 Canvas ，zr_100000，在最上边，右键复制图片操作全部作用于这个画布，所以无法复制正确内容。

<div style="position: relative; width: 1481px; height: 1122px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
    <canvas data-zr-dom-id="zr_0" width="2221" height="1683"
        style="position: absolute; left: 0px; top: 0px; width: 1481px; height: 1122px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
    <canvas
        data-zr-dom-id="zr_100000" width="2221" height="1683"
        style="position: absolute; left: 0px; top: 0px; width: 1481px; height: 1122px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
</div>

3.1 关键字

• data-zr-dom-id
• zr_100000

3.2 尝试搜索

1. Bing 和 Google 都搜索不到有效内容
2. 5.4.5 版本源码搜索不到有效内容
3. Github 仓库搜索，在Issues 中才有一个相关的介绍 [Perf] High CPU overload and user interaction freezed in SVG map (canvas & svg) · Issue #14875 · apache/echarts (github.com)

[@plainheart](https://github.com/plainheart)

`zr_100000` is a special `zlevel` that provided to the hover layer.
SVG rendering mode is not good at animation performance because each frame it needs to find out 
which DOM needs to be updated and manipulate the attributes of DOM(just like what virtual dom does). 
Even if we did lots of optimizations, it's still not as fast as Canvas. Especially in a case like this map which has lots of elements. 
The advance of SVG rendering mode is reducing the memory usage on mobile devices.

4. 然后在官方文档中搜索 hover 关键字，找到相关属性