apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.21k stars 19.61k forks source link

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

Closed Karl-Xu closed 6 years ago

Karl-Xu commented 6 years ago

One-line summary [问题简述]

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

Version & Environment [版本及环境]

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 commented 6 years ago

不好意思,我通过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]
        }
    ]
};