[echarts]ヒストグラムのクリックイベント

echarts チャートを作成するための簡潔なコードから始めましょう。

// 这样获取echarts的dom节点是因为：如果将柱状图封装成了一个组件，在一个页面中多次使用，若还是按常规获取dom节点，会报一个警告
let charts = echarts.getInstanceByDom(
  document.getElementById(props.id)
)
if (charts == null) {
    
    
  charts = echarts.init(document.getElementById(props.id))
}
charts.clear()
let option = {
    
    
	...
}
charts.resize()
charts.setOption(option)

図に示すように、ヒストグラムにクリック イベントが必要な場合: ただし、青い列部分がクリックされた場合にのみ、クリック イベントがトリガーされます。

myChart.on('click', function (params) {
    
    
	console.log(params)
})

バーにデータがない場合、上記の方法ではクリックしてもトリガーされません。背景をクリックするデータがなく、それでもクリック イベントをトリガーしたい場合は、次のメソッドを使用します。

charts.getZr().off('click')		// 先取消点击，再触发，免得造成连续抖动触发
charts.getZr().on('click', function (params) {
    
    
	// 这个部分照抄，你想通过点击拿到的当前柱条的数据，都可以在下面这些属性中拿到，如果我注释没有你想要的，需要console一下charts.getOption()查找对应的属性名
    let pointInPixel = [params.offsetX, params.offsetY];
    
    if (charts.containPixel('grid', pointInPixel)) {
    
    
      let pointInGrid = charts.convertFromPixel({
    
    
        seriesIndex: 0
      }, pointInPixel);
      
      let xIndex = pointInGrid[1]; 			// 索引
      
      let handleIndex = Number(xIndex);
      
      let seriesObj = charts.getOption(); 	// 图表object对象
      
      let op = charts.getOption();
      
      //获得图表中点击的列
      let dataY = op.yAxis[0].data[handleIndex];  			//获取点击的列名
      
      let dataX = seriesObj.series[0].data[handleIndex]   	// 获取当前点击的柱条的数值 

		... // 写获取到当前点击需要的数值后的操作   
    }
})

また、ストロークとストロークイベントの書き方も追加したいのですが、属性が同じ、つまりイベント名が比較的ユニークであり、mousemove mouseoutこの二つは対応しているので、このように書く必要があります。そうしないと無効になる可能性があります

// 划过
charts.getZr().off('mousemove');
charts.getZr().on('mousemove', function(params) {
    
    

})

// 划出
charts.getZr().off('mouseout');
charts.getZr().on('mouseout', function(params) {
    
    

})