前端工作小知识-02_echarts getzr 保持不变

在React生命周期中监听屏幕尺寸变化

需求：有两个盒子，左右排列，左边盒子高度由内容撑起，屏幕尺寸变化后会使左边盒子高度变化，需要右盒子高度与其保持一致。
实现：监听屏幕大小变化，获取左边各自高度并设置右边盒子高度与其保持一致。

  // 1.在componentDidMount()中添加监听器
  componentDidMount () {
    this.screenChange();
  }

  // 定义屏幕尺寸变化函数
  screenChange() {
    window.addEventListener('resize', () => {
      // 此函数中书写屏幕尺寸变化后需要执行的代码
    })
  }

  // 2. 在componentWillUnmount()中移除监听器
  componentWillUnmount() {
    window.removeEventListener('resize', () => {})
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

echarts中getZr().on的妙用

场景: echarts中提供的默认点击事件只有在点击图形中才能触发，但某些图形很小带来的体验感并不好，因此需要将点击事件的区域扩大（如下图区域），点击整个柱子对应的区域都会触发点击事件。

实现：使用echart中提供了一个内置函数，echartsInstance.getZr()

echartsInstance.getZr().off('click') // 防止触发两次点击事件
echartsInstance.getZr().on('click', function(params){})
1
2

getZr().on的点击范围包含on的点击范围，但是能获取到的信息比较少。
技巧点：可以配合tooltip，当鼠标移入到阴影区域时就会触发tooltip，在tooltip中的formatter可以获取到图表的信息，当鼠标移入记录想要的信息，点击时在触发getZr().on函数实现对某些数据的操作。

getZr()的其他用法