Incubator-echarts: legend高度设置问题

Created on 9 Oct 2016  ·  1Comment  ·  Source: apache/incubator-echarts

问题简述 (One-line summary)

根据官网的配置手册,看legend的配置项中有个_height_设置组件的高度,但是我试的时候没体现出效果来,而宽度_width_的设置是起作用的。

版本及环境 (Version & Environment)

  • ECharts 版本 (ECharts version): 最新版和直接在官方示例中修改都试过
  • 浏览器类型和版本 (Browser version): 最新版chrome
  • 操作系统类型和版本 (OS Version): win7

    重现步骤 (Steps to reproduce)

1.
2.

期望结果 (Expected behaviour)

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

是不是文档没描述清楚,要配合其它配置一起用才能起作用?
因为我在对legend设置_tooltip_时也遇到了个问题, 文档的描述是“_图例的 tooltip 配置,配置项同 tooltip_”,我以为是跟tooltip一样去配置legend的_tooltip_,然而我配置的时候一直都没起作用, 后面还是添加了顶级的tooltip的时候legend的_tooltip_才起作用的,类似下面的配置:

{
    tooltip: {
        trigger: 'item'
    },
    legend: {
        ....
        tooltip: {
            show: true
        }
    },
}

ECharts配置项 (ECharts option)

var legendData = [
        'option1option1option1option1option1',
        'option2option2option2option2option2',
        'option3option3option3option3option3',
        'option3option3option3option3option4',
        'option3option3option3option3option5',
        'option3option3option3option3option6',
        'option3option3option3option3option7',
        'option3option3option3option3option8',
        'option3option3option3option3option9',
    ]

var xAxisData = ['Day 1', 'Day 2']

var series = []

$.each(legendData, function(i, k){
    series.push({
        yAxisIndex: 0,
        name: k,
        type: 'line',
        data: [
            parseInt((Math.random() + 3) *10), 
            parseInt((Math.random() + 2) *10)
        ]
    })
})

var l = ['充值人数', '充值金额', '测试1']

option = {
    grid: [
        {x: '7%', y: '20%', height: '75%'}
    ],
    tooltip: {
        trigger: 'item'
    },
    legend: {
        zlevel: 3,
        borderColor: 'rgb(191, 191, 191)',
        borderWidth: 2,
    height: 100, // 100、100px、80%这样的都试过
        data: legendData,
        tooltip: {
            show: true
        }
    },
    xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: xAxisData
    },
    yAxis: {
        type: 'value',
        name: '充值人数'
    },
    series: series
}


其他信息 (Other comments)

Most helpful comment

  • - 仔细看源码发现问题了, 是orient="horizontal"的时候,只有width会起作用,height为auto;orient="vertical"的时候只有height会起作用,width为auto。

感觉文档方面要多多完善才行啊,而且讲道理的话, 一般都不会有人希望legend的宽度会超出整个图吧~

>All comments

  • - 仔细看源码发现问题了, 是orient="horizontal"的时候,只有width会起作用,height为auto;orient="vertical"的时候只有height会起作用,width为auto。

感觉文档方面要多多完善才行啊,而且讲道理的话, 一般都不会有人希望legend的宽度会超出整个图吧~

Was this page helpful?
0 / 5 - 0 ratings