資訊專(zhuān)欄INFORMATION COLUMN
摘要：這種方法僅響應(yīng)圖表區(qū)域的響應(yīng)事件，通過(guò)獲取到可能需要的一些信息，可以很好的實(shí)現(xiàn)需求，并且不會(huì)有其它的性能影響，完美實(shí)現(xiàn)了如題的需求。
ECharts官網(wǎng)教程
詳情請(qǐng)看官網(wǎng)教程
前言：相信很多人有這種需求，在點(diǎn)擊折線圖非節(jié)點(diǎn)的時(shí)候不能觸發(fā)點(diǎn)擊事件，而官網(wǎng)又沒(méi)有這方面的教程，只能自己默默的研究了
解決方案如下:
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var mychart = echarts.init(document.getElementById("main"));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
title: {
text: "ECharts 入門(mén)示例"
},
tooltip: {},
legend: {
data:["銷(xiāo)量"]
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: "銷(xiāo)量",
type: "bar",
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
mychart.setOption(option);
//綁定點(diǎn)擊事件
mychart.getZr().on("click", function(params) {
const pointInPixel = [params.offsetX, params.offsetY];
if (mychart.containPixel("grid", pointInPixel)) {
let xIndex = mychart.convertFromPixel({ seriesIndex: 0 }, [
params.offsetX,
params.offsetY
])[0];
/*事件處理代碼書(shū)寫(xiě)位置*/
}
});
實(shí)現(xiàn)的代碼解釋如下：
使用getZr添加圖表的整個(gè)canvas區(qū)域的點(diǎn)擊事件，并獲取params攜帶的信息：
mychart.getZr().on("click",params=>{})
獲取到鼠標(biāo)點(diǎn)擊位置：
const pointInPixel= [params.offsetX, params.offsetY];
使用containPixel API判斷點(diǎn)擊位置是否在顯示圖形區(qū)域，下面的例子過(guò)濾了繪制圖形的網(wǎng)格外的點(diǎn)擊事件，比如X、Y軸lable、空白位置等的點(diǎn)擊事件。
if (this.echart.containPixel("grid",pointInPixel)){}
使用API convertFromPixel獲取點(diǎn)擊位置對(duì)應(yīng)的x軸數(shù)據(jù)的索引值，我的實(shí)現(xiàn)是借助于索引值的，當(dāng)然可以獲取到其它的信息，詳細(xì)請(qǐng)查看文檔。
let xIndex=this.echart.convertFromPixel({seriesIndex:0},[params.offsetX,
params.offsetY])[0];
其實(shí)在上一步驟中可以獲取到豐富的諸如軸線、索引、ID等信息，可以在自己的事件處理代碼中方便的使用。
這種方法僅響應(yīng)圖表區(qū)域的響應(yīng)事件，通過(guò)convertFromPixel獲取到可能需要的一些信息，可以很好的實(shí)現(xiàn)需求，并且不會(huì)有其它的性能影響，完美實(shí)現(xiàn)了如題的需求。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54088.html
摘要：這種方法僅響應(yīng)圖表區(qū)域的響應(yīng)事件，通過(guò)獲取到可能需要的一些信息，可以很好的實(shí)現(xiàn)需求，并且不會(huì)有其它的性能影響，完美實(shí)現(xiàn)了如題的需求。 ECharts官網(wǎng)教程 詳情請(qǐng)看官網(wǎng)教程 前言：相信很多人有這種需求，在點(diǎn)擊折線圖非節(jié)點(diǎn)的時(shí)候不能觸發(fā)點(diǎn)擊事件，而官網(wǎng)又沒(méi)有這方面的教程，只能自己默默的研究了 解決方案如下: // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例 var ...
摘要：這種方法僅響應(yīng)圖表區(qū)域的響應(yīng)事件，通過(guò)獲取到可能需要的一些信息，可以很好的實(shí)現(xiàn)需求，并且不會(huì)有其它的性能影響，完美實(shí)現(xiàn)了如題的需求。 ECharts官網(wǎng)教程 詳情請(qǐng)看官網(wǎng)教程 前言：相信很多人有這種需求，在點(diǎn)擊折線圖非節(jié)點(diǎn)的時(shí)候不能觸發(fā)點(diǎn)擊事件，而官網(wǎng)又沒(méi)有這方面的教程，只能自己默默的研究了 解決方案如下: // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例 var ...
摘要：原來(lái)的格式修改為現(xiàn)在的格式篇幅所限，我這里沒(méi)有詳細(xì)列出來(lái)詳細(xì)請(qǐng)?jiān)L問(wèn)我的的折線圖怎么分段顯示不同的顏色再次刷新，是不是兩條斷線連上了呢。 一.場(chǎng)景 在使用echarts3做圖表的時(shí)候，可能會(huì)遇到一些特殊的需求： 星期一到星期四這幾個(gè)點(diǎn)的折線顯示一個(gè)顏色，周五到周日這幾個(gè)點(diǎn)的折線顯示另外一個(gè)顏色，來(lái)起到強(qiáng)調(diào)區(qū)別的作用。 二.效果圖 先看一下效果圖，你會(huì)有一個(gè)更清晰的認(rèn)識(shí): showImg(...
摘要：原來(lái)的格式修改為現(xiàn)在的格式篇幅所限，我這里沒(méi)有詳細(xì)列出來(lái)詳細(xì)請(qǐng)?jiān)L問(wèn)我的的折線圖怎么分段顯示不同的顏色再次刷新，是不是兩條斷線連上了呢。 一.場(chǎng)景 在使用echarts3做圖表的時(shí)候，可能會(huì)遇到一些特殊的需求： 星期一到星期四這幾個(gè)點(diǎn)的折線顯示一個(gè)顏色，周五到周日這幾個(gè)點(diǎn)的折線顯示另外一個(gè)顏色，來(lái)起到強(qiáng)調(diào)區(qū)別的作用。 二.效果圖 先看一下效果圖，你會(huì)有一個(gè)更清晰的認(rèn)識(shí): showImg(...
閱讀 2005·2021-08-11 11:13
閱讀 1028·2021-07-25 21:37
閱讀 2583·2019-08-29 18:42
閱讀 2519·2019-08-26 12:18
閱讀 924·2019-08-26 11:29
閱讀 1697·2019-08-23 17:17
閱讀 2672·2019-08-23 15:55
閱讀 2615·2019-08-23 14:34
