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

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

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

Comments

@waynezzz
Copy link

在以下网址调试显示结果:
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

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

No branches or pull requests

2 participants