1.修改的样式如下：

2.相关代码

// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(this.$refs.tasksChart)
// 绘制图表
myChart.setOption({
   grid: {
       top: '4%',
       left: '12%',
       right: '4%',
       bottom: '23%'
   },
   // tooltip: {
   //     formatter: '{b} {c}%'
   // },
   xAxis: {
       data: xAxisLabel,
       axisTick: {
           show: true,
           alignWithLabel: true
       },
       boundaryGap: true,
       axisLabel: {
           hideOverlap: false,
           interval: 0,
           rotate: 30,
           formatter: (value) => {
               if (value && value.length > 4) {
                   return value.slice(0, 4) + '...'
               } else {
                   return value
               }
           },
           fontSize: 12
       }
   },
   yAxis: {
       type: 'value',
       axisLabel: {
           show: true,
           interval: 'auto',
           formatter: '{value}%'
       },
       show: true
   },
   dataZoom: [{
       type: 'inside',
       start: 0,//数据窗口范围的起始百分比
       end: 50,//数据窗口范围的结束百分比
       zoomLock: true
   }, {
       type: 'slider',
       height: 10,
       bottom: 0,
       brushSelect: false,
       showDetail: false,
       showDataShadow: false,
       zoomLock: true,
       show: true
   }],
   series: [
       {
           name: '',
           type: 'bar',
           data: xAxisValue,
           itemStyle: {
               color: '#40a9ff',
               normal: {
                   label: {
                       show: true, //开启显示
                       position: 'top', //在上方显示
                       textStyle: { //数值样式
                           color: '#5470c6',
                           fontSize: 12
                       },
                       formatter: '{c}%'
                   }
               }
           }
       }
   ]
})