Echarts 3.x.x, 单柱图,markLine短小无法至左右边缘,且可能被柱体覆盖 #2688

Closed
waynezzz opened this Issue Feb 29, 2016 · 0 comments

Comments

Projects
None yet
2 participants
@waynezzz

在以下网址调试显示结果:
http://echarts.baidu.com/demo.html#bar1

两个及更多柱体时,标准markLine,只能从柱子到柱子,无法至边缘。
代码如下:

option = {
    title : {
        text: '某地区蒸发量和降水量',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['降水量']
    },
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月'],
        }
    ],
    yAxis : [
        {
            type : 'value',
        }
    ],
    series : [
        {
            name:'降水量',
            type:'bar',
            data:[2.63,5],
            barMaxWidth: 50,
            markLine : {
                data: [[
                    {xAxis:0,yAxis:3},
                    {xAxis:'2月',yAxis:3}
                ]]
            }
        }
    ]
};

效果如下:
image

单柱体时,如果markLine值低于柱子值,会跟柱子叠在一起,除非设置不同颜色,代码如下:

option = {
    title : {
        text: '某地区蒸发量和降水量',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['降水量']
    },
    xAxis : [
        {
            type : 'category',
            data : ['1月'],
        }
    ],
    yAxis : [
        {
            type : 'value',
        }
    ],
    series : [
        {
            name:'降水量',
            type:'bar',
            data:[2.63],
            barMaxWidth: 50,
            markLine : {
                data: [[
                    {xAxis:0,yAxis:2.8},
                    {xAxis:'1月',yAxis:2.8}
                ]]
            }
        }
    ]
};

对应显示效果:
image

即使另加一个xAxis通过设置boundaryGap: false使markLine能到左右边缘,但也只是在双柱及以上可以,单柱时,也会有问题。会跑到左上角显示一个怪怪的标识。
代码如下:

option = {
    title : {
        text: '某地区蒸发量和降水量',
    },
    tooltip : {
        trigger: 'item',
        showContent: true
    },
    legend: {
        data:['降水量', '']
    },
    xAxis : [
        {
            type : 'category',
            data : ['1月'],
        },
        {
            type : 'category',
            data : ['1月'],
            axisLabel: false,
            boundaryGap: false,
            axisLine:{
                show: false
            }
        }
    ],
    yAxis : [
        {
            type : 'value',
        }
    ],
    series : [
        {
            name:'降水量',
            type:'bar',
            data:[2.63],
            barMaxWidth: 50,
            },
            {
            type:'bar',
            data:[0],
            xAxisIndex:1,
            markLine : {
                data: [[
                    {xAxis:'1月',yAxis:2},
                    {xAxis:'1月',yAxis:2}
                ]]
            }
        }
    ]
};

效果如下,异常见左上角title左上侧。
image

@pissang pissang added the enhancement label Feb 29, 2016

@pissang pissang closed this in 080fa37 Mar 2, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment