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

关于Y轴数值标签自适应的问题 #7942

Closed
Karl-Xu opened this issue Mar 15, 2018 · 1 comment
Closed

关于Y轴数值标签自适应的问题 #7942

Karl-Xu opened this issue Mar 15, 2018 · 1 comment

Comments

@Karl-Xu
Copy link

Karl-Xu commented Mar 15, 2018

One-line summary [问题简述]

关于eCharts4柱形图等直角坐标系刻度标签显示的问题:
1、eCharts2中柱线图Y轴的首尾数值可以自适应不超出图形主体范围,详见下图

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]: echarts 4.0
  • Browser version [浏览器类型和版本]: Chrome Version 63.0.3239.132 (Official Build) (64-bit)
  • OS Version [操作系统类型和版本]: Mac OS X 10.11.6 (15G18013)

Actual behaviour [实际结果]
eCharts4.0的实际效果:
官网DOME:http://echarts.baidu.com/examples/editor.html?c=mix-line-bar
截图指示:
image

Expected behaviour [期望结果]

官网DOME:http://echarts.baidu.com/echarts2/doc/example/mix1.html
截图指示:
image

ECharts option [ECharts配置项]

配置项详见官网DEMO即可,上面都有链接和截图显示。

Other comments [其他信息]

实际应用场景:
因业务需求:我们需要在限定的范围内绘制图形,原有2.0Y轴自适应显示后效果很好,但是升级后,却无法查看了,详见截图对比:
2.0截图效果:
image
4.0截图效果:
image

@Karl-Xu
Copy link
Author

Karl-Xu commented Mar 15, 2018

不好意思,我通过formatter格式化换行解决了。
http://echarts.baidu.com/examples/editor.html?c=mix-line-bar 用一下代码替换看效果,不过希望官方能有自适应。

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data:['蒸发量','降水量','平均温度']
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '水量',
            nameLocation: "end",
            nameTextStyle: {
                
            },
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                margin: 10,
                inside: false,
                formatter: function (value, index) {
                    var tmp = value + 'ml';
                    if(!index) {
                        tmp = tmp + "\n";
                    } else if(index === 5) {
                        tmp = "\n" + tmp;
                    }
                    return tmp;
                },
                showMinLabel: true
            }
        },
        {
            type: 'value',
            name: '温度',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value} °C'
            }
        }
    ],
    series: [
        {
            name:'蒸发量',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
        },
        {
            name:'降水量',
            type:'bar',
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
        {
            name:'平均温度',
            type:'line',
            yAxisIndex: 1,
            data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
    ]
};

@Karl-Xu Karl-Xu closed this as completed Mar 15, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant