柱状图图表上方显示数值

最新推荐文章于 2023-10-19 09:35:32 发布

原创最新推荐文章于 2023-10-19 09:35:32 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

HTML 同时被 2 个专栏收录

9 篇文章

订阅专栏

echart

1 篇文章

订阅专栏

本文详细介绍了如何使用Echarts库创建一个带有顶部标签的柱状图，包括设置x轴为类别类型，y轴为值类型，以及启用背景颜色和自定义条形图样式。此外，还特别强调了开启并定制条形图的顶部标签显示，如字体大小和颜色等关键配置项。

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
        },itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
    }]
};