echarts柱状图x轴字体显示不全问题

this.chart = echarts.init(document.getElementById(id));
              this.chart.showLoading();
              this.chart.setOption({
                  title: {
                      text: '产品线统计',
                      textStyle: {
                          fontSize:18,
                          fontWeight:'bold',
                      }
                  },
                  legend:{
                      textStyle: {
                          fontSize: 12,
                      },
                      data:['容器数', '项目数', '机器数'],
                      align: 'right',
                    right: 10
                  },
                  tooltip:{
                      show: true,
                      trigger: 'axis',
                      axisPointer: {
                          type:'shadow',
                      },
                  },
                  grid:{
                      left:5,
                      right:20,
                      top:80,
                      bottom:50,
                      containLabel:true,
                  },
                  xAxis: {
                      show:true,
                      axisLabel:{
                          interval:0,
                          rotate:-30,
                          margin: 30,
                          textStyle:{
                            align: 'center'
                          },
                      },
                      axisTick:{
                          alignWithLabel:true
                      },
                      data: this.appNameArr,
                  },
                  yAxis: [
                      {
                          type:'value',
                          axisTick:{
                              alignWithLabel:true
                          },
                          splitLine:{
                              show:false,
                          },
                      }
                  ],
                  series: [
                    {
                      type: 'bar',
                      name:'容器数',
                      data:this.containerCountArr,
                      label: {
                        normal: {
                          show:true,
                          position: 'insideTop',
                          offset:[0,20],
                        },
                      },
                    },
                    {
                      type: 'bar',
                      name:'项目数',
                      data:this.appCountArr,
                      label: {
                        normal: {
                          show:true,
                          position: 'insideTop',
                          offset:[0,20],
                        },
                      },
                    },
                    {
                      type: 'bar',
                      name:'机器数',
                      data:this.masterCountArr,
                      label: {
                        normal: {
                          show:true,
                          position: 'insideTop',
                          offset:[0,20],
                        },
                      },
                    }
                  ]
              });
              this.chart.hideLoading()
          }




这种要怎么改呢，不知道是什么原因，以前也从来没遇到过，这个是写在vuejs里面的，其它也没什么特别的样式，我把这个option放到官网上面显示也是没问题的

2 个解决方案

#1

查看样式啊。

#2

盛放echarts的div高度调高一点 ，或者你可以将grid中的top在调高点试试。