apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser

Home Page:https://echarts.apache.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

xwq163zmsh opened this issue · comments

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

@plainheart 当前是5.3.3

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

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

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

@plainheart 好的我试一下 谢谢

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

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

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

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

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