echarts 图标点击和页面其他地方联动

53 阅读1分钟

以下用柱状图举例说明 1点击柱状图方法

const charts = echarts.init(document.getElementById('id'), "dark");
charts.on('click',function(params){
  //具体功能代码
})

如果如下图,柱状图特别少,或者为0,第一种方法就选选择不到,除非柱状图给一个最小高度barMinHeight: 2,一般不会这样做,下面第二种方法就可以解决

image.png

2点击的坐标

const charts = echarts.init(document.getElementById('id'), "dark");
charts.charts.getZr().on('click', (params)=>{
  const pointInPixel = [params.offsetX, params.offsetY];
  if (charts.containPixel('grid', pointInPixel)&&params.topTarget) {
    // 这是竖着的柱状图
    let xIndex =charts.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
    var xData=option.xAxis[0].data[xIndex];//当前点击柱子的横坐标对应的值  
    var value=option.series[0].data[xIndex];//当前点击柱子的数据值 
    //若横着的柱状图
    // var yIndex=myChart.convertFromPixel({seriesIndex:0},[param.offsetX, param.offsetY])[1];
    // var yData=option.yAxis.data[yIndex];//当前点击柱子的纵坐标对应的值  
  }
  });