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) //更新
          })
        }

你可能感兴趣的:(echarts,vue.js,前端)