对于长日期字符串,Echarts会增加轴下方的空间

时间:2018-06-07 19:46:03

标签: javascript echarts

Echarts cutting of the bottom Xaxis fields

请查看图片,如果有选项可以增加此图片的边距/边框以适应长日期/时间字符串,请告诉我。

2 个答案:

答案 0 :(得分:0)

真的很抱歉。使用边距/边框,我们无能为力,因为我们有很多数据。该图像中已经有很多xAxis标签。

我们可以为此做一件事。你为什么不能尝试这种图表

https://ecomfe.github.io/echarts-examples/public/editor.html?c=candlestick-brush

在图表底部,它将具有更改xAxis范围的句柄。

enter image description here

希望您喜欢此解决方案。

答案 1 :(得分:0)

您可以设置grid选项可以实现此目标:

grid.containLabel = true

如果愿意,还可以设置:

grid.bottom = 0

例如:

    option = {
    xAxis: {
        type: 'category',
        axisLabel: {
            interval: 1,
            rotate: 45
        },
        data: ['2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04', '2018-06-07 14:27:04']
    },
    yAxis: {
        type: 'value'
    },
    grid: {
        bottom: 0,
        containLabel: true
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
    }]
};

结果: enter image description here