echarts柱狀圖的點擊事件代碼示例
更新時間:2023年09月10日 11:19:39 作者:湛海不過深藍
這篇文章主要給大家介紹了關于echarts柱狀圖點擊事件的相關資料,在實際的項目開發(fā)中我們通常會用到Echarts來對數(shù)據(jù)進行展示,有時候需要用到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)
})如果柱條沒有數(shù)據(jù),用上述方法點擊時將不會觸發(fā),如果無數(shù)據(jù)點擊背景也依舊想觸發(fā)點擊事件,就用下面方法:
charts.getZr().off('click') // 先取消點擊,再觸發(fā),免得造成連續(xù)抖動觸發(fā)
charts.getZr().on('click', function (params) {
// 這個部分照抄,你想通過點擊拿到的當前柱條的數(shù)據(jù),都可以在下面這些屬性中拿到,如果我注釋沒有你想要的,需要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] // 獲取當前點擊的柱條的數(shù)值
... // 寫獲取到當前點擊需要的數(shù)值后的操作
}
})另外,再補充一下劃過和劃出事件的寫法,屬性是一樣的,就是事件名比較獨特: 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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
您可能感興趣的文章:
相關文章
詳談for循環(huán)里面的break和continue語句
下面小編就為大家?guī)硪黄斦刦or循環(huán)里面的break和continue語句。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
JavaScript實現(xiàn)PDF加載與顯示的技術指南
在Web開發(fā)中,利用JavaScript技術加載和顯示PDF文件是一種常見需求,尤其是在文檔預覽或在線閱讀器的開發(fā)中,本文詳細介紹了使用JavaScript庫,特別是PDF.js,來實現(xiàn)PDF文件在瀏覽器中的加載和顯示,需要的朋友可以參考下2025-08-08

