请问 ECharts legend组件点击后如何让上一个标记取消？

Question

举个例子

option = {
    legend: {
        data: ['测试标题1', '测试标题2'],
        left: 200,
        top: 10,
        itemWidth: 0,
        itemHeight: 0,
        textStyle: {
            color: '#FFF',
            fontSize: 16,
        },
        selected: {
            测试标题1: true,
            测试标题2: false,
        },
    },
    title: {
        text: 'Awesome Chart',
    },
    xAxis: {
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    },
    yAxis: {},
    series: [
        {
            type: 'bar',
            name: '测试标题1',
            data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
            type: 'bar',
            name: '测试标题2',
            data: [220, 182, 191, 234, 290, 330, 310],
        },
    ],
};

当前默认激活的标记是测试标题1，我想实现，点击测试标题2的时候自动取消测试标题1

Answer 1

legendselectchanged

setTimeout(function() {
  
  myChart.on('legendselectchanged', function(params){
    console.log(params)
    let name = params.name
    let selected = params.selected
    let checked = selected[name]
    if(checked){
      
      for(let k in selected){
        if(k != name){
          selected[k] = false
        }
      }
      
      myChart.setOption({
        legend: {
          selected: selected
        }
      })
    }
  })
}, 10);