[apache/echarts]图例名字过长,使用翻页滚动会导致按钮点击无效

2024-08-22 254 views
4

图例名字过长,使用翻页滚动会导致按钮点击无效

  • ECharts version [ECharts 版本]:4.0
  • Browser version [浏览器类型和版本]:chrome 60
  • OS Version [操作系统类型和版本]:win7
option = {
    title: {
        text: '浏览器占比变化',
        subtext: '纯属虚构',
        top: 10,
        left: 10
    },
    tooltip: {
        trigger: 'item',
        backgroundColor : 'rgba(0,0,250,0.2)'
    },
    legend: {
        type: 'scroll',
        bottom: 10,
        data: (function (){
            var list = [];
            for (var i = 1; i <=28; i++) {
                list.push(i + 2000 + '年好长草草草草草草年好长草草草草草草年好长草草草草草草年好长草草草草草草年好长草草草草草草年好长草草草草草草年好长草草草草草草年好长草草草草草草年好长草草草草草草年好长草草草草草草年好长草草草草草草年好长草草草草草草');
            }
            return list;
        })()
    },
    visualMap: {
        top: 'middle',
        right: 10,
        color: ['red', 'yellow'],
        calculable: true
    },
    radar: {
       indicator : [
           { text: 'IE8-', max: 400},
           { text: 'IE9+', max: 400},
           { text: 'Safari', max: 400},
           { text: 'Firefox', max: 400},
           { text: 'Chrome', max: 400}
        ]
    },
    series : (function (){
        var series = [];
        for (var i = 1; i <= 28; i++) {
            series.push({
                name:'浏览器(数据纯属虚构)',
                type: 'radar',
                symbol: 'none',
                lineStyle: {
                    width: 1
                },
                emphasis: {
                    areaStyle: {
                        color: 'rgba(0,250,0,0.3)'
                    }
                },
                data:[
                  {
                    value:[
                        (40 - i) * 10,
                        (38 - i) * 4 + 60,
                        i * 5 + 10,
                        i * 9,
                        i * i /2
                    ],
                    name: i + 2000 + '年好长草草草草草草年好长草草草草草草年好长草草草草草草年好长草草草草草草年好长草草草草草草年好长草草草草草草年好长草草草草草草年好长草草草草草草年好长草草草草草草年好长草草草草草草年好长草草草草草草年好长草草草草草草'
                  }
                ]
            });
        }
        return series;
    })()
};
Other comments [其他信息]

回答

9

我有个办法改点源码可以暂时解决,但不能完全解决。需要的话,私聊

0

翻页是给多个图例用的,名字长的问题的确没法用,我会建议自定义 http://echarts.baidu.com/option.html#legend.formatter 判断长度,返回前面的部分加上 '...'

@cuijian-dexter 有什么想法可以在这里一起分享一下吗?

2

@Ovilia 这个地方源码确实不太好看,_pageGo这个函数,我不知道为什么每次翻页的时候都要走两遍。。还没有进行仔细研读。目前先解决的办法是把_pageGo函数内容改成如下: var scrollData = this._getPageInfo(legendModel); if(scrollData.pagePrevDataIndex === scrollData.pageNextDataIndex) { if (to === 'pagePrevDataIndex') { scrollData.pagePrevDataIndex --; }else{ scrollData.pageNextDataIndex ++; } } var scrollDataIndex = scrollData[to];

            scrollDataIndex != null && api.dispatchAction({
                type: 'legendScroll',
                scrollDataIndex: scrollDataIndex,
                legendId: legendModel.id
            });

在翻页的时候,如果两个相同的话,就移一个。暂时可以保证可以分页,但不能完全解决问题。

3

@Ovilia formatter 判断长度是没办法判断的,因为在resize的时候,没办法弄,而且自己加...这个也太······。建议是应该从每页的长度入手,如果其中一项超出了一页的长度,就自动把width改成一页的宽度。我有时间也再看看

9

@Ovilia 我只是觉得有最优的方法可以解决这个问题。 当resize的时候,单页只有一个图例的时候,其实还是无法翻页。 判断长度也只是从表面上解决,这个应该从根上处理,这种问题其实不应该让配置的人去做多余的处理。 希望能从根上处理掉这种问题,现在对长度的处理好像都还没有。谢谢

2

回头有时间我研究一下,谢谢你的建议

0

确认这是一个 bug,因为 #8971 是因为的,所以之后统一到那个下面继续。 Duplicate of #8971.

0

头像真好看