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

echarts柱狀圖的點(diǎn)擊事件代碼示例

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

先來(lái)一段簡(jiǎn)潔的寫(xiě)echarts圖表的代碼:

// 這樣獲取echarts的dom節(jié)點(diǎn)是因?yàn)椋喝绻麑⒅鶢顖D封裝成了一個(gè)組件，在一個(gè)頁(yè)面中多次使用，若還是按常規(guī)獲取dom節(jié)點(diǎn)，會(huì)報(bào)一個(gè)警告
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)

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

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

如果柱條沒(méi)有數(shù)據(jù)，用上述方法點(diǎn)擊時(shí)將不會(huì)觸發(fā)，如果無(wú)數(shù)據(jù)點(diǎn)擊背景也依舊想觸發(fā)點(diǎn)擊事件，就用下面方法:

charts.getZr().off('click')		// 先取消點(diǎn)擊，再觸發(fā)，免得造成連續(xù)抖動(dòng)觸發(fā)
charts.getZr().on('click', function (params) {
	// 這個(gè)部分照抄，你想通過(guò)點(diǎn)擊拿到的當(dāng)前柱條的數(shù)據(jù)，都可以在下面這些屬性中拿到，如果我注釋沒(méi)有你想要的，需要console一下charts.getOption()查找對(duì)應(yīng)的屬性名
    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對(duì)象
      let op = charts.getOption();
      //獲得圖表中點(diǎn)擊的列
      let dataY = op.yAxis[0].data[handleIndex];  			//獲取點(diǎn)擊的列名
      let dataX = seriesObj.series[0].data[handleIndex]   	// 獲取當(dāng)前點(diǎn)擊的柱條的數(shù)值 
		... // 寫(xiě)獲取到當(dāng)前點(diǎn)擊需要的數(shù)值后的操作   
    }
})

另外，再補(bǔ)充一下劃過(guò)和劃出事件的寫(xiě)法，屬性是一樣的，就是事件名比較獨(dú)特: mousemove mouseout，這兩對(duì)應(yīng)，必須這樣寫(xiě)，寫(xiě)其他的可能無(wú)效

// 劃過(guò)
charts.getZr().off('mousemove');
charts.getZr().on('mousemove', function(params) {
})
// 劃出
charts.getZr().off('mouseout');
charts.getZr().on('mouseout', function(params) {
})

總結(jié) 

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

相關(guān)文章

最新評(píng)論