echarts间距折线间距

### 如何设置 ECharts 折线图中图表元素之间的间距

在 ECharts 中，可以通过多种方式来控制折线图内不同元素间的距离。具体方法取决于想要调整哪部分的距离。

#### 调整 X 轴标签与图形间距离

通过 `axisLabel` 属性中的 `margin` 参数可以改变轴刻度标签到坐标轴的距离：

xAxis: {
    type: 'category',
    axisLabel: {
        margin: 20 // 设置X轴文字离轴线的距离为20像素
    }
}

#### 修改网格区域边距

利用 `grid` 组件定义绘图区相对于容器边缘的位置以及宽度高度比例，从而间接影响线条之间横向纵向的空间大小：

grid: {
    top: '10%',     // 上方留白占整个画布的比例
    bottom: '15%',
    left: '8%',
    right: '8%'
},

#### 控制系列项内部间隔

对于多个数据序列共存的情况，可通过调节 `series` 下的 `lineStyle.width` 来增加或减少各条曲线本身的粗细程度；另外还可以借助于 `symbolSize` 改变节点标记尺寸，以此达到视觉上的分离效果[^1]。

#### 使用 legend 组件优化布局

当存在较多的数据集时，合理配置 `legend` 的位置也能有效改善整体观感。比如将其放置在顶部中央并适当加大 itemGap 可使各项更加清晰可见:

legend: {
    orient: 'horizontal',  
    x: 'center',
    y: 'top',
    itemGap: 20,          // Legend items spacing
}

以上几种手段结合起来运用能够很好地解决折线图拥挤的问题，使得图表既美观又易于理解[^2]。