欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

echarts柱狀圖的點擊事件代碼示例

 更新時間：2023年09月10日 11:19:39   作者：湛海不過深藍  
這篇文章主要給大家介紹了關于echarts柱狀圖點擊事件的相關資料,在實際的項目開發(fā)中我們通常會用到Echarts來對數據進行展示,有時候需要用到Echarts的點擊事件,增加系統(tǒng)的交互,需要的朋友可以參考下

先來一段簡潔的寫echarts圖表的代碼:

// 這樣獲取echarts的dom節(jié)點是因為：如果將柱狀圖封裝成了一個組件，在一個頁面中多次使用，若還是按常規(guī)獲取dom節(jié)點，會報一個警告
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)

如圖所示，如果柱狀圖需要有點擊事件: 但這只是點擊藍色柱條部分才會觸發(fā)點擊事件的寫法

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

如果柱條沒有數據，用上述方法點擊時將不會觸發(fā)，如果無數據點擊背景也依舊想觸發(fā)點擊事件，就用下面方法:

charts.getZr().off('click')		// 先取消點擊，再觸發(fā)，免得造成連續(xù)抖動觸發(fā)
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) {
})

總結 

到此這篇關于echarts柱狀圖的點擊事件的文章就介紹到這了,更多相關echarts柱狀圖點擊事件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論