開發過程當中，咱們常常會碰到這樣的需求：在柱狀圖上，點擊某條柱形，調用相應的方法或跳轉相應的界面數組
接下來就詳細介紹如何實現柱狀圖的點擊事件，其中maChart是繪圖對象spa
1、簡單的點擊事件code
myChart.on('click', function (params) { console.log(params) })
這樣就能夠得到每條柱形所對應的數據對象
若須要在每條柱形上添加額外的屬性，好比id等等，能夠在series中，經過對象去定義，其中value是柱形的值blog
seriesData: [{value: 1, id:'...'}, {value: 2, id:'...'}, ......]
這個id一樣能夠在上面的點擊事件的params中獲取到事件
注意：此方法雖實現了點擊，可是隻限於點擊柱形中有數據的部分，而對於沒有數據的區域，點擊無效，以下圖開發
若要實現點擊整條柱形區域都有效，以下圖，請看第二個方法get
2、整條柱形的點擊事件io
myChart.getZr().on('click', params => { let pointInPixel = [params.offsetX, params.offsetY] if (myChart.containPixel('grid', pointInPixel)) { let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0] console.log(xIndex) } })
其中，getZr()方法能夠監聽到整個畫布的點擊事件，zIndex是被點擊的柱形的indexconsole
若要實現獲取id的效果，則須要拿到series的數組，再經過index拿到對應的數據對象