echarts學習之legend點擊事件怎么控制

這篇文章主要講解了“echarts學習之legend點擊事件怎么控制”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“echarts學習之legend點擊事件怎么控制”吧！

echarts legend點擊事件

首先，明確本篇文章的重點，主要有三個：

1. 給legend添加點擊事件

2. 禁用legend點擊事件的默認行為（類型checkbox多選框）

3. 解決點擊事件重復觸發(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)
}) // 這些都是自己做的一些數據處理，可以忽略
let option = {
  title: {
    text: name + '前十用戶',
    left: 'center'
  },
  ...其他代碼
}
myCharts.on('legendselectchanged', (e) => {
  alert('點擊了') // 如果不加off事件，就會疊加觸發(fā)
})
myCharts.setOption(option)

問題二

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

問題三

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

Echarts自己控制legend點擊事件

先看需求

現在想實現的 情況是

• 一進去頁面，所有的 Echarts 中 legend 的所有選項都是默認選中的狀態(tài)（這是 Echarts 默認的）

• 然后當“9”號標識，也就是“一#斗”點亮時，與之相對應的“1、2、3”倉位，即“石灰石、污泥球、生白”也必須點亮，

• 然后 “9”號點亮之后 “1、2、3”號倉位也可以自己控制自己的 點亮還是關閉，

• 然后當“9”號再次從關閉變成點亮的狀態(tài)時，“1、2、3” 會再次點亮。

var dou1_legend_flag = false;
myChart.on('legendselectchanged', function (params) {
      var option = this.getOption();
      //當前echarts圖例選項
      var select_key = Object.keys(params.selected);
      //當前圖例的選項是否選中 選中為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 中對應名稱的真假值就可以
                  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;
          }
      }
 });

感謝各位的閱讀，以上就是“echarts學習之legend點擊事件怎么控制”的內容了，經過本文的學習后，相信大家對echarts學習之legend點擊事件怎么控制這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！