vue3 使用Echarts 实现点击选中图例时候最多只能选三个,选择第四个的时候关闭第一条的显示,始终保持一条

初始化charts

this.init()

注册emits

emits: ['upSelectedData']

init 函数

const chart = echarts.init(this.$el, this.theme, this.initOptions)

if (this.tagsSwitch.length) {
          let tagsSwitch = [...this.tagsSwitch] //默认显示的指标三个指标
          const than = this 
          
          //这个on监听只有切换指标显隐才会触发
          chart.on('legendselectchanged', function (params) {
            console.log('监听加载类型', 22222, than.tagsSwitch)
            console.log('params', params)
            const optionLegend = chart.getOption()
            const select_value = Object.values(params.selected)
            console.log(
              'optionLegend',
              optionLegend,
              'select_value:',
              select_value
            )
            const index = tagsSwitch.indexOf(params.name)
            console.log(
              '匹配下标',
              index,
              optionLegend.legend[0].selected[params.name]
            )
            if (index >= 0 && !optionLegend.legend[0].selected[params.name]) {
              //已选择的取消选中
              tagsSwitch.splice(index, 1)
            } else if (
              index < 0 &&
              optionLegend.legend[0].selected[params.name] &&
              tagsSwitch.length < 3
            ) {
              //不满足3三个的点击进行添加
              tagsSwitch.push(params.name)
            } else if (
              // 满足三个移除第一个
              tagsSwitch.length == 3 &&
              index < 0 &&
              optionLegend.legend[0].selected[params.name]
            ) {
              console.log(
                333,
                tagsSwitch[0],
                optionLegend.legend[0].selected[tagsSwitch[0]]
              )
              optionLegend.legend[0].selected[tagsSwitch[0]] = false
              tagsSwitch.shift()
              tagsSwitch.push(params.name)
            }

            console.log(
              '最终切换的指标',
              tagsSwitch,
              optionLegend.legend[0].selected
            )
            chart.setOption(optionLegend)  //保存echarts的设置
            console.log(than.$emit)
            than.$emit('upSelectedData', optionLegend.legend[0].selected) //更新
          })
        }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值