Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] 设置多个legend,每个legend中selector互相影响 #20128

Closed
xwq163zmsh opened this issue Jul 8, 2024 · 10 comments · Fixed by #20129
Closed

[Bug] 设置多个legend,每个legend中selector互相影响 #20128

xwq163zmsh opened this issue Jul 8, 2024 · 10 comments · Fixed by #20129

Comments

@xwq163zmsh
Copy link

Version

5.3.3

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?code=PYBwLglsB2AEC8sDeAoWsDGwA2wBOAXLANoBEAxAAyUDMNAbPaQDSwXWMCcnLb5ALBgCGAIwwBTXhXEBWGgCYakgLrM0sACZCwQgM7iwRVOnS7gAVzwSixdSZKkwATxCTWpeZQCM8qZ680ft78QV4yoUyqdiZkAGL44rpgvAqUrHTy6d7pNPzpnJRR9uhkAMpg4iCuvPKerF4AHJmwXpxerIp5sPIFRcVkACKJ4njJ9TJp3Qod2S0yXa2FasUOAOoG2ELQGrycDawA7Af1s9ys_IXRyuoAvsuw2OIA5uLbNtHGxRAaRO3R6BAKgBbcpOR5GO7_TTaIQ2UjlSrVdzxPCJZJ9eyPABmhjYXkoAFIWFD9I8MGB8O8VvZPtSTM5XERSEJsNhiXT7AB6TmwQD3yoBTuUA9GaAb7lAPCGgAN5QA5qoAia0AIW6wSBgR5QlaK8FsQAWioBIBPZHMhHOQKuKDPETIg0AAbiN9LqDWrTWxALPKOvudP11IxJix-CB2gqhFgWPM0HJUDgAApoEIgeIAJSGg2osCWOAAckAyvqAWSUQMAfrBU7AANSwKMxgDcUJu0Xd6FpJm-REyUMB4hBznVSBrJi0OjhQ30oyk6yVWx2nvQeAgTwAFrjSPiia6TKTxOTKSQjbXN_SXA7mazbRzuXyhWKpXKFYDlQb0PamdrDysuys63STWbLda3Nvb1e987H2KZ8THHQMfT9EYiCDENIBgWBI2jOMEw5JMU3zQAw5UAJ-UczzAti1LcQKyfat7j6AAPABBMiIF0IxonfNhhAqJ58CcQ8hGo3QABUIAwABrOiVl0adgAAdygll9GrW57icKiaIhe4BwgRIbDrBjSBEIQ8EPZTEgAGSEJwLDAAAhJwmTwMTSBk5Db13JktJ0pc9N0QzjPMMyLLYKzRJs9A7jshUHLYJzdJGFS3KMkzzMs6zbPUkLNO08LJwM6LPNinz4oC64biAA&_source=echarts-doc-preview

Steps to Reproduce

1、折线图options

option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: [
    {
      itemStyle: {},
      data: ["Email", "Union Ads"],
      left: "0%",
      selector: [
          {
            type: "all",
            // 可以是任意你喜欢的 title
            title: "全选",
          },
          {
            type: "inverse",
            title: "反选",
          },
        ],
      formatter: function (name) {
          return '当前pod: ' + name;
      }
    },
    {
      itemStyle: {},
      data: ["Video Ads", "Direct","Search Engine"],
      right: "0%",
      selector: [
          {
            type: "all",
            // 可以是任意你喜欢的 title
            title: "全选",
          },
          {
            type: "inverse",
            title: "反选",
          },
        ],
      formatter: function (name) {
          return '历史pod: ' + name;
      }
    },
  ],
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

2、legend有两个

legend: [
   {
     itemStyle: {},
     data: ["Email", "Union Ads"],
     left: "0%",
     selector: [
         {
           type: "all",
           // 可以是任意你喜欢的 title
           title: "全选",
         },
         {
           type: "inverse",
           title: "反选",
         },
       ],
     formatter: function (name) {
         return '当前pod: ' + name;
     }
   },
   {
     itemStyle: {},
     data: ["Video Ads", "Direct","Search Engine"],
     right: "0%",
     selector: [
         {
           type: "all",
           // 可以是任意你喜欢的 title
           title: "全选",
         },
         {
           type: "inverse",
           title: "反选",
         },
       ],
     formatter: function (name) {
         return '历史pod: ' + name;
     }
   },
 ],

3、每个legend的selector的多选和反选功能不能独立使用,点击后对两个图例都生效

Current Behavior

1、折线图
image
2、点击左侧图例反选按钮
image
3、点击右侧全选按钮
image

Expected Behavior

options中legend设置多个legend,每个legend的selector的多选和反选功能不能独立使用,点击后对两个图例都生效

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

@xwq163zmsh xwq163zmsh added the bug label Jul 8, 2024
@echarts-bot echarts-bot bot added the pending We are not sure about whether this is a bug/new feature. label Jul 8, 2024
Copy link

echarts-bot bot commented Jul 8, 2024

@xwq163zmsh It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

[Bug] 设置多个legend,每个legendponponselector互相影响

@plainheart plainheart added topic: legend and removed pending We are not sure about whether this is a bug/new feature. labels Jul 8, 2024
@plainheart plainheart added this to the 5.5.2 milestone Jul 8, 2024
@plainheart plainheart removed this from the 5.5.2 milestone Jul 8, 2024
@xwq163zmsh
Copy link
Author

@plainheart 你好,我看到您针对我提出的问题提交了修改,这个问题会在5.5.2版本解决吗,请问对于我当前工程来说怎么解决这个问题呢,我需要修改node_modules中关于echarts源码的哪些文件,如何修改,麻烦您有时间提供一些帮助

@xwq163zmsh
Copy link
Author

@plainheart 当前是5.3.3

@plainheart
Copy link
Member

需要升级到 5.5.1,然后将此补丁压缩包 patches.zip 解压到你的项目根目录,然后在 package.json 中添加一行 script

"scripts": {
  "postinstall": "npx patch-package"
}

安装依赖之后会自动应用补丁。

@xwq163zmsh
Copy link
Author

@plainheart 好的我试一下 谢谢

@xwq163zmsh
Copy link
Author

@plainheart 你好,上周提供给我的补丁压缩包我操作后没有生效

@xwq163zmsh
Copy link
Author

image

@plainheart
Copy link
Member

@xwq163zmsh 不是很确定为什么你那边不能打补丁。不过明天应该能以当前最新代码发一个 nightly build 版本,届时你可以直接 npm 安装,无需这么复杂操作。

@xwq163zmsh
Copy link
Author

@plainheart 有没有可能因为我这边使用的是pnpm导致补丁不生效 不过明天有新版本发布的话就不需要补丁文件了

@plainheart
Copy link
Member

plainheart commented Jul 18, 2024

@xwq163zmsh nightly 版本已发,可以使用如下命令安装 nightly 版本,然后测试一下。

npm i echarts@npm:echarts-nightly@5.5.2-dev.20240718

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants