背景說明
我們在做echarts圖表的時候經(jīng)常會出現(xiàn)需要點擊圖表打開彈窗或者打開新的頁面氓英，而如果圖表是柱狀圖的話鲁冯，可能會出現(xiàn)最大值和最小值差距過大的情況垃帅，比如普通的值大小都在1000上下，然后有幾個值的大小只有個位數(shù)椭符，這種情況下我們首先就需要將坐標(biāo)軸指示器的type改為'shadow'荔燎，這樣首先鼠標(biāo)移入當(dāng)前數(shù)據(jù)那一列就能選中并顯示tooltip了，然后更進(jìn)一步销钝，我們想要點擊坐標(biāo)軸指示器的陰影區(qū)域從而獲取當(dāng)前列的內(nèi)容該怎么做呢有咨，這個時候我們就需要echarts內(nèi)部的getZr()方法了。
在vue中應(yīng)用
由于我項目中使用的是vue-echarts蒸健，可以通過@zr:click="xxx"直接綁定zr事件
<v-chart
ref="chart"
:options="chartOptions"
autoresize
@click="handleChartClick"
@zr:click="handleZrClick"
/>
......
handleZrClick(params) {
const chart = this.$refs.chart.chart; // echarts實例
const pointInPixel = [params.offsetX, params.offsetY];
let xIndex; // x軸索引
if (chart.containPixel('grid', pointInPixel)) {
xIndex = chart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0];
}
// 點擊到圖表其他區(qū)域不操作
if (typeof xIndex !== 'number') {
return;
}
const dataArr = chart.getOption().series[0].data;
// 當(dāng)前選中項
const currentSelectedData = dataArr[xIndex];
console.log(currentSelectedData);
}
如果是常規(guī)流程的話就是使用echarts實例調(diào)用getZr()座享，最好是先解綁click事件
const chart = this.$refs.chart.chart;
chart.off('click');
chart.getZr().on('click', params => {
......
// 同上面的處理邏輯
})
理論上來說直角坐標(biāo)系里面的圖都可以應(yīng)用這個方法婉商，只是說柱狀圖最有應(yīng)用價值。
這個點是幾個月前的項目里用到過的征讲，現(xiàn)在寫這篇文章找資料的時候發(fā)現(xiàn)了一篇不錯的文章，里面介紹的挺詳細(xì)橡娄，留作以后備用诗箍。在Echarts區(qū)域的任何位置精準(zhǔn)觸發(fā)事件
