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

图例legend翻页BUG #6743

Closed
zhangjiaqing opened this issue Sep 22, 2017 · 8 comments

Comments

Projects
None yet
9 participants
@zhangjiaqing
Copy link

commented Sep 22, 2017

One-line summary [问题简述]

图例legend启动分页之后,当某一个图例长度超过一页的总长度时,翻页翻到这个图例之后,无法继续分页,不管往前翻还是往后翻都不行。
具体可以看我给的例子,图例翻页翻到第二页时无法继续翻页了

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]:3.7.1
  • Browser version [浏览器类型和版本]:Chrome 59.0.3071.109
  • OS Version [操作系统类型和版本]:window 7

Expected behaviour [期望结果]

正常翻页

ECharts option [ECharts配置项]

option = {
   
    backgroundColor: '#1f2e4d',
    color:["#d24c57","#9b58b5","#1ab5ff","#5676fc"],
    tooltip: {},
    geo: {
      map: "china",
      roam: true,
      label: {
        emphasis: {
          show: true,
          color: "#fff"
        }
      },
      itemStyle: {
        normal: {
          borderColor: '#1f2e4d',
          borderWidth: 1.5,
          areaColor: '#324469'
        },
        emphasis: {
          areaColor: '#9b58b5'
        }
      },
    },
    graphic: [
      {
        id: "pieBackground",
        type: "rect",
        right: 0,
        bottom: 0,
        z: 3,
        cursor: "default",
        shape: {
          width: 320,
          height: 234
        },
        style: {
          fill: "#0f1626"
        }
      }
    ],
    legend: {
      type: "scroll",
      show: true,
      z: 4,
      textStyle: {
        color: "#fff"
      },
      itemWidth: 12,
      itemHeight: 12,
      left: myChart.getWidth() - 306,
      bottom: 10,
      pageTextStyle :{
        color:"#fff"
      },
      data: [{
          name: "例子1例子1例子1例子1例子1"
        },
        {
          name: "例子2"
        },
        {
          name: "例子3"
        },
        {
          name: "例子4例子4例子3123例子4例子4例子4例子4例子4"
        },
        {
          name: "例子1例子2例子1例子1例子1"
        },
        {
          name: "例子6"
        },
        {
          name: "例子9"
        },
        {
          name: "例子4例子4例子3123例子4例子4"
        }
      ]
    },
    series: [{
      name: "pieChart",
      type: 'pie',
      z: 4,
      radius: [0, 55],
      center: [myChart.getWidth() - 166, myChart.getHeight() - 127],
      label: {
        normal: {
          color: "#fff",
          formatter: "{b} : {d}%"
        }
      },
      labelLine: {
        normal: {
          length2: 0
        }
      },
      data: [{
          name: "例子1例子1例子1例子1例子1",
          value: 1480
        },
        {
          name: "例子2",
          value: 17365
        },
        {
          name: "例子3",
          value: 1890
        },
        {
          name: "例子4例子4例子3123例子4例子4例子4例子4例子4",
          value: 17365
        },
        {
          name: "例子1例子2例子1例子1例子1",
          value: 1480
        },
        {
          name: "例子6",
          value: 17365
        },
        {
          name: "例子9",
          value: 1890
        },
        {
          name: "例子4例子4例子3123例子4例子4例子4例子4例子4",
          value: 17365
        }
      ]
    }]
}

Other comments [其他信息]

@Ovilia Ovilia added the bug label Sep 22, 2017

@NangeGao

This comment has been minimized.

Copy link

commented Nov 27, 2017

请问这个bug啥时候修复啊,现在还是有问题

@NewBirdBV

This comment has been minimized.

Copy link

commented Jan 11, 2018

我也遇到过这个问题。

@TheNorthWindRises

This comment has been minimized.

Copy link

commented May 24, 2018

我也遇到这个问题,啥时候修复啊

@peacejj

This comment has been minimized.

Copy link

commented Jul 11, 2018

是啊,挺严重的,这么久还没修复

@aojianwu

This comment has been minimized.

Copy link

commented Aug 1, 2018

非常严重,请求尽快解决

@lcoder

This comment has been minimized.

Copy link

commented Sep 17, 2018

我也遇到了,3.7.2,不知道升级是否能解决

@lcoder

This comment has been minimized.

Copy link

commented Sep 17, 2018

看了下源码,应该是,ScrollableLegendView.js#353这个赋值有点问题,不过代码有点多,没理透,希望@pissang 能否给个临时解决方案

@lcoder

This comment has been minimized.

Copy link

commented Sep 17, 2018

对源码做了几处修改:
image
image
image
发现有bug的都有一个共性,就是contentGroup中符合itemRect.intersect(winRect)就一个成员,所以针对arr===1的做了特殊处理,暂时解决了我的问题,但是有个不好的就是边界情况,变灰,某些情况下失效,不过比起不可点击,可用性改善了许多。

另外,一般不推荐改源码,特别是npm或者yarn管理的项目,每次操作add,install,都会覆盖node_modules中的代码,另外我的项目属于内部产品的场景,生产情况下的其他情形我没测试过,客官们谨慎处理

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.