吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 744|回复: 1
收起左侧

[求助] 求助大佬 这段代码怎么修改才能让 echarts 图列 legend 组件 独立运行?

[复制链接]
zh648990 发表于 2021-11-28 11:55
本帖最后由 zh648990 于 2021-11-28 11:58 编辑

代码如下,这是需要修改的功能代码
[JavaScript] 纯文本查看 复制代码
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);


这是 图列组件实例
[JavaScript] 纯文本查看 复制代码
option = {
    legend:[
        {
            data: ['测试标题1', '测试标题2'],
            left: 663,
            top: 383,
            itemWidth: 0,
            itemHeight: 0,
            textStyle: {
                color: '#FFF',
                fontSize: 14,
            },
            selected: {
                '测试标题1': true,
                '测试标题2': false
            }
        },
        {
            data: ['测试标题3', '测试标题4'],
            left: 663,
            top: 383,
            itemWidth: 0,
            itemHeight: 0,
            textStyle: {
                color: '#FFF',
                fontSize: 14,
            },
            selected: {
                '测试标题3': true,
                '测试标题4': 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],
        },
    ],
};

实现的功能是图列组件点击后让上一个标记自动取消 举个例子 点击测试标题2后测试标题1自动取消
但是当图列组件有多个data时就会影响到其他data了 点击测试标题4会影响到测试标题1和2
怎么让每一个data都能实现功能但又不影响其他data?

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

头像被屏蔽
machenglin 发表于 2021-11-28 12:28
提示: 作者被禁止或删除 内容自动屏蔽
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-11-25 18:37

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表