echarts學(xué)習(xí)之legend點(diǎn)擊事件解讀

更新時(shí)間：2023年03月29日 08:50:01 作者：King_960725

這篇文章主要介紹了echarts學(xué)習(xí)之legend點(diǎn)擊事件解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

echarts legend點(diǎn)擊事件

首先，明確本篇文章的重點(diǎn)，主要有三個(gè)：

1. 給legend添加點(diǎn)擊事件

2. 禁用legend點(diǎn)擊事件的默認(rèn)行為（類(lèi)型checkbox多選框）

3. 解決點(diǎn)擊事件重復(fù)觸發(fā)問(wèn)題

問(wèn)題一

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事件，就會(huì)疊加觸發(fā)
})
myCharts.setOption(option)

問(wèn)題二

myChart.on('legendselectchanged', function (params) {
? ? myChart.setOption({
? ? ? ? legend:{selected:{[params.name]: true}}
? ? })
? ? console.log('點(diǎn)擊了', params.name);
? ? // do something
});

問(wèn)題三

let myCharts = Echarts.init(document.getElementById('bar'))
myCharts.off('legendselectchanged') //解決重復(fù)觸發(fā)
...
...
myCharts.on('legendselectchanged', (e) => {
? alert('點(diǎn)擊了') // 如果不加off事件，就會(huì)疊加觸發(fā)
})
myCharts.setOption(option)

Echarts自己控制legend點(diǎn)擊事件

先看需求

現(xiàn)在想實(shí)現(xiàn)的情況是

一進(jìn)去頁(yè)面，所有的 Echarts 中 legend 的所有選項(xiàng)都是默認(rèn)選中的狀態(tài)（這是 Echarts 默認(rèn)的）
然后當(dāng)“9”號(hào)標(biāo)識(shí)，也就是“一#斗”點(diǎn)亮?xí)r，與之相對(duì)應(yīng)的“1、2、3”倉(cāng)位，即“石灰石、污泥球、生白”也必須點(diǎn)亮，
然后 “9”號(hào)點(diǎn)亮之后 “1、2、3”號(hào)倉(cāng)位也可以自己控制自己的點(diǎn)亮還是關(guān)閉，
然后當(dāng)“9”號(hào)再次從關(guān)閉變成點(diǎn)亮的狀態(tài)時(shí)，“1、2、3” 會(huì)再次點(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 中對(duì)應(yīng)名稱(chē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;
          }
      }
 });