当前位置:优学网  >  在线题库

关于echarts的getZr这个Api,这个Api怎么在官方文档看不到?

发表时间:2022-06-16 21:34:56 阅读:92

我想监听用户的点击区域,包括空白位置(单纯的click监听无法监听空白区域),网上给出了解决方案,其中需要用到getZr这个api,但是我查看echarts的官方文档却找不到这个api的相关介绍,有人知道为什么吗?

网上给出的解决方案文章:https://blog.csdn.net/smk108/...

我打开官网,使用这个案列,测试了一下,代码如下:

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: { show: true, trigger: 'item' },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 0, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};
myChart.getZr().on('mousedown', (params) => {
  console.log(params);
  const pointInPixel = [params.offsetX, params.offsetY];
  if (myChart.containPixel('grid', pointInPixel)) {
    let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [
      params.offsetX,
      params.offsetY
    ])[0];
    alert('你点击区域的数据为:'+option.series[0].data[xIndex])
  }
});

option && myChart.setOption(option);
🎖️ 优质答案
  • 因为这是私有 API,官方没开放过,自然就没有文档。

    目前你可以用,但不保证某个版本后就失效了(比如移除了、改名了、或者改变传参啊返回值啊什么的,而且这玩意儿因为是私有 API,所以可能甚至不会有 Breaking Changes Release Notes)。而用法也都是开发者们看源码自己总结出来的,毕竟是开源项目。

    P.S. Zr 是 zrender 的缩写,zrender 是 echarts 的底层依赖。


    image.png

    上图的回复者是 zrender/echarts 的核心维护者之一。

  • 相关问题