收藏
回答

echarts 点击事件没有触发,没反应?

现在有一个需求是当我点击ehcart的x轴或者y轴的时候,希望能够获取到这个s轴和y轴的数据

我在网上搜索了一个代码

 myChart =  this.$echarts.init(document.getElementById("myChart"))
    
    myChart.setOption(this.option)
    // 给整个画布添加点击事件
    myChart.getZr().on('click', function (param) {
      const pointInPixel = [param.offsetX, param.offsetY]
      console.log('pointInPixel', pointInPixel)
      // 使用 convertFromPixel方法 转换像素坐标值到逻辑坐标系上的点。获取点击位置对应的x轴数据的索引         值,借助于索引值的获取到其它的信息
      // 转换X轴坐标
      let pointInGrid = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
       // 转换Y轴坐标
       let pointInGrid2 = myChart.convertFromPixel({ seriesIndex: 1 }, pointInPixel);
      // x轴数据的索引值
      console.log('pointInGrid', pointInGrid2)
       // 所点击点的X轴坐标点所在X轴data的下标
      let xIndex = pointInGrid[0];
       // 所点击点的Y轴坐标点数值
      let yIndex = pointInGrid2[1];
      // 使用getOption() 获取图表的option
      let op = myChart.getOption();
      //获取到x轴的索引值和option之后,我们就可以获取我们需要的任意数据。
      // 点击点的X轴对应坐标的名称
      var time = op.xAxis[0].data[xIndex];
      // 点击点的series -- data对应的值
      var value = op.series[0].data[xIndex];
      console.log('val', time)
    });

我现在想加到我的小程序里面,但是这个点击事件没有触发

import * as echarts from '../../components/ec-canvas/echarts';


let option =  {
  xAxis: {
    type'category',
    data: ['Mon''Tue''Wed''Thu''Fri''Sat''Sun']
  },
  yAxis: {
    type'value'
  },
  series: [
    {
      data: [150230224218135147260],
      type'line'
    }
  ]
};


var chart;


function initChart(canvas, width, height, dpr{
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr,
  });
  canvas.setChart(chart);
  chart.setOption(option)
  chart.on('click',function(){
      console.log('oo');
  })
  return chart;
}

移出去也没有成功,反而报错

import * as echarts from '../../components/ec-canvas/echarts';


let option =  {
  xAxis: {
    type'category',
    data: ['Mon''Tue''Wed''Thu''Fri''Sat''Sun']
  },
  yAxis: {
    type'value'
  },
  series: [
    {
      data: [150230224218135147260],
      type'line'
    }
  ]
};


var chart;


function initChart(canvas, width, height, dpr{
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr,
  });
  canvas.setChart(chart);
  chart.setOption(option)


  return chart;
}
chart.on('click',function(){
    console.log('oo');
})




回答关注问题邀请回答
收藏

1 个回答

  • 大山
    大山
    04-17

    你搜的这个也不是小程序的写法。是要实现什么功能?

    $echarts.init(document.getElementById("myChart"))
    


    04-17
    有用
    回复 3
    • 戳戳熊屁股.
      戳戳熊屁股.
      04-17
      我的echarts已经渲染了,我就是想加那个点击功能,就是获取点击的X轴或者Y轴那个值
      04-17
      回复
    • 戳戳熊屁股.
      戳戳熊屁股.
      04-17
      解决了
      04-17
      回复
    • ``Bestow.
      ``Bestow.
      06-03回复戳戳熊屁股.
      咋解决的兄弟
      06-03
      回复
登录 后发表内容