如何设置echarts图表中标签的显示位置

发布时间：2023-05-21

一、基础知识

在使用 echarts 图表时，我们可以设置标签的显示位置以更好地展示数据。echarts 提供了以下几个标签显示位置：

  • inside：标签在图形内部显示。
  • insideLeft：标签在图形内部左侧显示。
  • insideRight：标签在图形内部右侧显示。
  • insideTop：标签在图形内部顶部显示。
  • insideBottom：标签在图形内部底部显示。
  • left：标签在图形左侧显示。
  • right：标签在图形右侧显示。
  • top：标签在图形顶部显示。
  • bottom：标签在图形底部显示。 我们可以通过在 series.itemStyle.normal.label 中设置 position 属性来设置标签的显示位置。下面是一个基本的示例：
option = {
    series: {
        data: [10, 20, 30, 40, 50],
        type: 'bar',
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'top'
                }
            }
        }
    }
}

这段代码会将标签显示在每个条形图的顶部。如果我们想要将标签显示在每个条形图的内部，可以通过设置 position 为 'inside' 来实现：

option = {
    series: {
        data: [10, 20, 30, 40, 50],
        type: 'bar',
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'inside'
                }
            }
        }
    }
}

二、各个标签显示位置的详细设置方法

1. inside

inside 表示标签在图形内部显示，可以通过设置 padding 属性来控制标签和图形之间的距离。默认情况下，padding 为 5px。

option = {
    series: {
        data: [10, 20, 30, 40, 50],
        type: 'bar',
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'inside',
                    padding: [5, 10, 15, 20] // 上右下左
                }
            }
        }
    }
}

2. insideLeft 和 insideRight

insideLeft 表示标签在图形内部左侧显示，insideRight 表示标签在图形内部右侧显示，可以通过设置 align 属性来控制标签和图形之间的横向对齐方式。默认情况下，align 为 center，即居中对齐。

option = {
    series: {
        data: [10, 20, 30, 40, 50],
        type: 'bar',
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'insideLeft',
                    align: 'right'
                }
            }
        }
    }
}

3. insideTop 和 insideBottom

insideTop 表示标签在图形内部顶部显示，insideBottom 表示标签在图形内部底部显示，可以通过设置 verticalAlign 属性来控制标签和图形之间的纵向对齐方式。默认情况下，verticalAlign 为 middle，即居中对齐。

option = {
    series: {
        data: [10, 20, 30, 40, 50],
        type: 'bar',
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'insideTop',
                    verticalAlign: 'bottom'
                }
            }
        }
    }
}

4. left、right、top 和 bottom

left 表示标签在图形左侧显示，right 表示标签在图形右侧显示，top 表示标签在图形顶部显示，bottom 表示标签在图形底部显示。

option = {
    series: {
        data: [10, 20, 30, 40, 50],
        type: 'bar',
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'right'
                }
            }
        }
    }
}

三、总结

通过以上的介绍，我们可以发现，echarts 提供了多种不同的标签显示位置，可以根据实际情况选择合适的位置。同时，我们也可以通过设置 align、verticalAlign、padding 等属性来精细地调整标签的显示位置，达到更好的数据展示效果。

推荐文章