echarts學(xué)習(xí)之legend點(diǎn)擊事件解讀
echarts legend點(diǎn)擊事件
首先,明確本篇文章的重點(diǎn),主要有三個:
1. 給legend添加點(diǎn)擊事件
2. 禁用legend點(diǎn)擊事件的默認(rèn)行為(類型checkbox多選框)
3. 解決點(diǎn)擊事件重復(fù)觸發(fā)問題
問題一
let myCharts = Echarts.init(document.getElementById('bar')) let x = [] let y1 = [] let y2 = [] let idList = [] val.forEach(e => { ? x.push(e.name) ? y1.push(e.invitationNum) ? y2.push(e.totalMoney / 100) ? idList.push(e.id) }) // 這些都是自己做的一些數(shù)據(jù)處理,可以忽略 let option = { ? title: { ? ? text: name + '前十用戶', ? ? left: 'center' ? }, ? ...其他代碼 } myCharts.on('legendselectchanged', (e) => { ? alert('點(diǎn)擊了') // 如果不加off事件,就會疊加觸發(fā) }) myCharts.setOption(option)
問題二
myChart.on('legendselectchanged', function (params) { ? ? myChart.setOption({ ? ? ? ? legend:{selected:{[params.name]: true}} ? ? }) ? ? console.log('點(diǎn)擊了', params.name); ? ? // do something });
問題三
let myCharts = Echarts.init(document.getElementById('bar')) myCharts.off('legendselectchanged') //解決重復(fù)觸發(fā) ... ... myCharts.on('legendselectchanged', (e) => { ? alert('點(diǎn)擊了') // 如果不加off事件,就會疊加觸發(fā) }) myCharts.setOption(option)
Echarts自己控制legend點(diǎn)擊事件
先看需求
現(xiàn)在想實(shí)現(xiàn)的 情況是
- 一進(jìn)去頁面,所有的 Echarts 中 legend 的所有選項(xiàng)都是默認(rèn)選中的狀態(tài)(這是 Echarts 默認(rèn)的)
- 然后當(dāng)“9”號標(biāo)識,也就是“一#斗”點(diǎn)亮?xí)r,與之相對應(yīng)的“1、2、3”倉位,即“石灰石、污泥球、生白”也必須點(diǎn)亮,
- 然后 “9”號點(diǎn)亮之后 “1、2、3”號倉位也可以自己控制自己的 點(diǎn)亮還是關(guān)閉,
- 然后當(dāng)“9”號再次從關(guān)閉變成點(diǎn)亮的狀態(tài)時,“1、2、3” 會再次點(diǎn)亮。
var dou1_legend_flag = false; myChart.on('legendselectchanged', function (params) { var option = this.getOption(); //當(dāng)前echarts圖例選項(xiàng) var select_key = Object.keys(params.selected); //當(dāng)前圖例的選項(xiàng)是否選中 選中為true 未選中為false var select_value = Object.values(params.selected); if (option.legend[0].selected.hasOwnProperty("1#斗")) { if (option.legend[0].selected["1#斗"] == true) { if (!dou1_legend_flag) { // 控制legend 的顯示和隱藏 直接控制 selected 中對應(yīng)名稱的真假值就可以 option.legend[0].selected[option.legend[0].data[0]] = true; option.legend[0].selected[option.legend[0].data[1]] = true; option.legend[0].selected[option.legend[0].data[2]] = true; myChart.setOption(option); dou1_legend_flag = true; } } else { dou1_legend_flag = false; } } });
總結(jié)
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
javascript:history.go()和History.back()的區(qū)別及應(yīng)用
為提高用戶體驗(yàn)度,可能會使用到刷新 前進(jìn) 后退等相關(guān)更能,本文將以此問題詳細(xì)介紹javascript:history.go()和History.back()的區(qū)別及應(yīng)用,需要的朋友可以參考下2012-11-11js中for...in循環(huán)對象時輸出key值順序混亂問題解決
很久之前就有前輩告訴我用for...in循環(huán)對象屬性的順序不是固定的,xiam?這篇文章主要給大家介紹了關(guān)于js中for...in循環(huán)對象時輸出key值順序混亂問題解決方法,需要的朋友可以參考下2023-11-11Javascript異步編程模型Promise模式詳細(xì)介紹
異步模式在 Web 編程中變得越來越重要,如何處理異步請求后的操作是一件麻煩事。Promise 是一種異步編程模型,術(shù)語稱作 Deferred 模式,它通過一組API來規(guī)范化異步操作,讓異步操作的流程控制更加容易。2014-05-05JS使用百度地圖API自動獲取地址和經(jīng)緯度操作示例
這篇文章主要介紹了JS使用百度地圖API自動獲取地址和經(jīng)緯度操作,結(jié)合實(shí)例形式分析了javascript與百度地圖API接口交互實(shí)現(xiàn)獲取地址與經(jīng)緯度相關(guān)操作技巧,需要的朋友可以參考下2019-04-04