Incubator-echarts: 希望legend 里面可以添加分组功能

Created on 10 Jul 2016  ·  6Comments  ·  Source: apache/incubator-echarts

问题简述 (One-line summary)

希望 legend 里面可以添加一个功能,就是可以将几个系列设为一个组显示一个别名,然后点击这个别名,可以显示隐藏这个组里面的所有系列!如:我有150个系列,现在要显示150个legend,界面显示太多且不美观,如果我可以将相似的1-50的系列设为一个组,51-100的系列设为一个组,101-150的系列设为一个组,然后显示只显示组名,这样我只要显示三个legend,界面就会简洁多了,而且便于用户操作!可以将其data这样设置[[name,['','','']],[[name,['','','']]],其中name为别名,后一个数组为系列组合。

版本及环境 (Version & Environment)

  • ECharts 版本 (ECharts version):
  • 浏览器类型和版本 (Browser version):
  • 操作系统类型和版本 (OS Version):

    重现步骤 (Steps to reproduce)

1.
2.

期望结果 (Expected behaviour)

legend可以分组显示,统一操作!

可能哪里有问题 (What went wrong)

ECharts配置项 (ECharts option)

option = {

}

其他信息 (Other comments)

stale support

Most helpful comment

我给你写了个例子,这里有四个系列,两两一组,系列名分别是 ab,legend 名称是 s(这个可以替换成你要的 1-50 小组),tooltip 里的 param.value[2] 是真正的系列名(即 a 或者 b)。你可以看看鼠标移上去以后输出的 log 信息,再理解下文档
希望能有帮助~

option = {
    legend: {
        data: ['s']
    },
    tooltip: {
        formatter: function(param) {
            console.log(param);
            return '[' + param.value[0] + ', ' + param.value[1] +
                ']: ' + param.value[2];
        }
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: 's',
        type: 'line',
        data:[[1, 2, 'a'], [3, 5, 'a']]
    }, {
        name: 's',
        type: 'line',
        data:[[1, 1, 'a'], [3, 3, 'a']]
    }, {
        name: 's',
        type: 'line',
        data:[[1, 4, 'b'], [3, 6, 'b']]
    }, {
        name: 's',
        type: 'line',
        data:[[1, 3, 'b'], [3, 4, 'b']]
    }]
};

All 6 comments

现在就是支持的,你可以用多个同名的 series,这样 legend 可以同时控制他们的开关。

我的想法就是不能用同名的series,不然我在用tooltip的时候,就没有办法显示原来的系列名称了!

@daoyuanjiao 你可以把 series name 信息放到 data 的一个维度里,然后自己写 tooltip 的 formatter 吧

我现在就是存在一个数组里面的,但是我不知道怎样判断我鼠标滑过该系列时,如何读取数组里面相应的系列名称!我看format里面只有几个abcd参数可用!如有可能,您可以给我一个示例吗?谢谢!

我给你写了个例子,这里有四个系列,两两一组,系列名分别是 ab,legend 名称是 s(这个可以替换成你要的 1-50 小组),tooltip 里的 param.value[2] 是真正的系列名(即 a 或者 b)。你可以看看鼠标移上去以后输出的 log 信息,再理解下文档
希望能有帮助~

option = {
    legend: {
        data: ['s']
    },
    tooltip: {
        formatter: function(param) {
            console.log(param);
            return '[' + param.value[0] + ', ' + param.value[1] +
                ']: ' + param.value[2];
        }
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: 's',
        type: 'line',
        data:[[1, 2, 'a'], [3, 5, 'a']]
    }, {
        name: 's',
        type: 'line',
        data:[[1, 1, 'a'], [3, 3, 'a']]
    }, {
        name: 's',
        type: 'line',
        data:[[1, 4, 'b'], [3, 6, 'b']]
    }, {
        name: 's',
        type: 'line',
        data:[[1, 3, 'b'], [3, 4, 'b']]
    }]
};

非常感谢,我试试!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kirazxyun picture kirazxyun  ·  3Comments

771752687 picture 771752687  ·  3Comments

jxffly picture jxffly  ·  3Comments

jarben picture jarben  ·  3Comments

akvaliya picture akvaliya  ·  3Comments