柱状图标签在柱的上方怎么进行展示

距离过年还有4天,哦耶耶!!!

 UI图要你这样实现,该怎么办尼,看我的博客就对了,哈哈哈

  var option = {
                    grid:{
                        top:10,
                        right:10,
                        left:40,
                    },
                    xAxis: {
                        show:true,
                        minInterval: 3000,//最小值
                        axisLine:{
                            show:true,//X轴要展示
                        },
                        axisTick:{
                            show:false, //刻度线不展示
                        },
                        splitLine:{
                            show:true,
                            lineStyle:{
                                color:['#2E354F'],
                                width:1,  
                                type:'solid' 
                            }
                        },
                        axisLabel: {
                            show: true,
                            interval:1
                        },
                    },
                    yAxis: {
                        type: 'category',
                        inverse: true, //反向坐标
                        data:[a,b,c,d,e,f],//Y轴的name
                        axisTick:{
                            show:false,
                        },
                        splitLine:{
                            show:false,
                        },

                        axisLabel: { //标签相关设置,最重要的部分
                            show: true,
                            inside: true,
                            splitNumber: 50,
                            boundaryGap: [20, 20],
                            textStyle: {
                                color: "#fff",
                                verticalAlign: "bottom",
                                align: "left",
                                padding: [200, 0, 10, 0],
                                fontSize:10
                            },
                        },
                    },
                    series: [
                        {
                            type: 'bar',
                            data: salesVolum,//后端传的值
                            color:"#0F99FB",
                            fontSize:10,
                            label: {
                                show: true,
                                position: 'right',
                                fontSize:8,
                                color:'#fff'
                            },
                            top:-54,
                            emphasis:{
                                label:{
                                    show:true,
                                },
                            },
                            barWidth:10,
                        }
                    ],
                };

然后就可以实现最开始图的样子了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值