eCharts——折线图中坐标轴两边留白

折线图中常用的配置项

    <script>
        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                boundaryGap: false //坐标轴两边留白
            },
            yAxis: {
                type: 'value',
            },
            series: [{
                data: [820, 932, 900, 810, 500, 482, 1200],
                type: 'line',
                areaStyle: {}//区域填充样式
            }]
        }
    </script>

1.boundaryGap
坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。

类目轴中boundaryGap可以配置为true和false。默认为true，这时候刻度只是作为分割线，标签和数据点都会在两个刻度之间的带中间。示例图：

非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置min和max后无效。

附：也可以查看eCharts官网学习