echarts柱狀圖的點(diǎn)擊事件代碼示例
更新時(shí)間：2023年09月10日 11:19:39 作者：湛海不過深藍(lán)
這篇文章主要給大家介紹了關(guān)于echarts柱狀圖點(diǎn)擊事件的相關(guān)資料,在實(shí)際的項(xiàng)目開發(fā)中我們通常會(huì)用到Echarts來對(duì)數(shù)據(jù)進(jìn)行展示,有時(shí)候需要用到Echarts的點(diǎn)擊事件,增加系統(tǒng)的交互,需要的朋友可以參考下
先來一段簡(jiǎn)潔的寫echarts圖表的代碼:
// 這樣獲取echarts的dom節(jié)點(diǎn)是因?yàn)椋喝绻麑⒅鶢顖D封裝成了一個(gè)組件，在一個(gè)頁面中多次使用，若還是按常規(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)擊事件的寫法
myChart.on('click', function (params) {
console.log(params)
})如果柱條沒有數(shù)據(jù)，用上述方法點(diǎn)擊時(shí)將不會(huì)觸發(fā)，如果無數(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è)部分照抄，你想通過點(diǎn)擊拿到的當(dāng)前柱條的數(shù)據(jù)，都可以在下面這些屬性中拿到，如果我注釋沒有你想要的，需要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ù)值
... // 寫獲取到當(dāng)前點(diǎn)擊需要的數(shù)值后的操作
}
})另外，再補(bǔ)充一下劃過和劃出事件的寫法，屬性是一樣的，就是事件名比較獨(dú)特: mousemove mouseout，這兩對(duì)應(yīng)，必須這樣寫，寫其他的可能無效
// 劃過
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)文章
js判斷一個(gè)字符串是以某個(gè)字符串開頭的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s判斷一個(gè)字符串是以某個(gè)字符串開頭的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
js輸入中文效果...2006-09-09
這篇文章主要為大家詳細(xì)介紹了純js實(shí)現(xiàn)打字機(jī)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。本文給大家介紹BootStrap 柵格系統(tǒng)的相關(guān)資料,需要的朋友可以參考下2016-04-04
詳談for循環(huán)里面的break和continue語句
下面小編就為大家?guī)硪黄斦刦or循環(huán)里面的break和continue語句。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
JavaScript實(shí)現(xiàn)PDF加載與顯示的技術(shù)指南
在Web開發(fā)中,利用JavaScript技術(shù)加載和顯示PDF文件是一種常見需求,尤其是在文檔預(yù)覽或在線閱讀器的開發(fā)中,本文詳細(xì)介紹了使用JavaScript庫,特別是PDF.js,來實(shí)現(xiàn)PDF文件在瀏覽器中的加載和顯示,需要的朋友可以參考下2025-08-08
前端實(shí)現(xiàn)Word在線預(yù)覽功能詳解
這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)Word在線預(yù)覽功能的相關(guān)資料,工作中經(jīng)常有時(shí)會(huì)遇到需要給用戶創(chuàng)建word文檔并實(shí)現(xiàn)word文檔在線預(yù)覽的需求,需要的朋友可以參考下2023-09-09
原生JS實(shí)現(xiàn)的跳一跳小游戲完整實(shí)例
這篇文章主要介紹了原生JS實(shí)現(xiàn)的跳一跳小游戲,結(jié)合完整實(shí)例形式分析了javascript實(shí)現(xiàn)跳一跳游戲的原理、實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
基于JS實(shí)現(xiàn)checkbox全選功能實(shí)例代碼
最近做了個(gè)項(xiàng)目其中有這樣的需求要求實(shí)現(xiàn)點(diǎn)擊全選選中所有菜單，再次點(diǎn)擊全選取消選中。下面小編給大家分享實(shí)現(xiàn)代碼，對(duì)js實(shí)現(xiàn)checkbox全選功能感興趣的朋友參考下吧2016-10-10
TypeScript實(shí)現(xiàn)箭頭函數(shù)
本文主要介紹了TypeScript實(shí)現(xiàn)箭頭函數(shù),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧的相關(guān)資料2025-06-06