echarts的柱形图增加背景框，背景框比柱形图宽

写项目时，UI设计的原型图上，有背景，一比一还原，没办法写呗

要求的图：

代码：

//数据处理

 getData() {

       let data= [

        {

            "name": "设备1",

            "totalCount": 9

        },

        {

            "name": "设备2",

            "totalCount": 8

        },

        {

            "name": "设备3",

            "totalCount": 6

        },

        {

            "name": "设备4",

            "totalCount": 4

        },

        {

            "name": "设备5",

            "totalCount": 2

        }

    ];

    let xAxis=[];

    let yAxis=[];

    data.forEach((item,index)=>{

      xAxis.push(item.name);

      yAxis.push(item.totalCount);

    })

    this.init(xAxis,yAxis);

    },

//echarts的代码

 init(xAxis,yAxis) {

//背景需要是柱形图的最大值，所以使用math函数

      let maxData=Math.max(...yAxis);      

//因为我的柱形图要求的是渐变效果，所以我在这写了个colorlist，使用graphic时需要引用嗯，要不报错呢

      let colorlist=[new graphic.LinearGradient(

                0, 0, 0, 1,

                [

                  {offset: 0, color: '#FED379'},

                  {offset: 1, color: '#0C1528'}

                ]

              ),new graphic.LinearGradient(

                0, 0, 0, 1,

                [

                  {offset: 0, color: '#FED379'},

                  {offset: 1, color: '#0C1528'}

                ]

              ),new graphic.LinearGradient(

                0, 0, 0, 1,

                [

                  {offset: 0, color: '#FED379'},

                  {offset: 1, color: '#0C1528'}

                ]

              ),new graphic.LinearGradient(

                0, 0, 0, 1,

                [

                  {offset: 0, color: '#71FFCD'},

                  {offset: 1, color: '#0C1528 '}

                ]

              ),new graphic.LinearGradient(

                0, 0, 0, 1,

                [

                  {offset: 0, color: '#71FFCD'},

                  {offset: 1, color: '#0C1528 '}

                ]

              ),];

      let backColorlist=['rgba(254, 211, 121, 0.06)','rgba(254, 211, 121, 0.06)','rgba(254, 211, 121, 0.06)',

      'rgba(113, 255, 205, 0.06)','rgba(113, 255, 205, 0.06)']

      this.option = {  

            grid: {

              top: '15%',

              left: '0%',

              right: '0%',

              bottom: '2%',

              containLabel: true

            },

            xAxis: {

              type: "category",

              data: xAxis,          

              axisLabel: {

                color: '#E7FAFF',

                fontSize: 12,

                fontFamily: 'PingFang SC',

                fontWeight: 'normal',

                rotate: 14,            

              },

              axisLine: {              

                lineStyle: {

                  color: '#6F7E93',

                  width: 1,

                }

              },

              splitLine: {

                show: false,

              },

            },

            yAxis: {

              type: "value",

              name: "（个）",

              nameTextStyle: {

                color: "#A8C7DB",

                fontSize: 12,

                fontFamily: 'PingFang SC',

                fontWeight: 600,

                padding: [0, 0, 0, -35],

              },

              nameGap:5,

              nameLocation: "end",

              splitLine: {

                show: false,            

              },

              axisLabel: {

                color: '#A8C7DB',

                fontSize: 12,

                fontFamily: 'PingFang SC',

                fontWeight: 600,  

                interval:2,            

              },

              max: function(value) {

                return value.max;  // 设置 y 轴的最大值为数据的最大值

              },        

            },

            series: [

            {

              type: 'bar',

              animationDuration: 0,//关键代码  初始动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果：

              animationDurationUpdate: 0,//关键代码  数据更新动画的时长。支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的更新动画效果：

              itemStyle: {

                normal: {

                color: function(params) {

                  return backColorlist[params.dataIndex];

                }                

              }

              },

              data:[maxData+5,maxData+5,maxData+5,maxData+5,maxData+5],

              barWidth: '37',

              z: 1,//层级问题，加上嗯，这个必须加嗯，

            },

          {

            data: yAxis,

            type: 'bar',

            barWidth: 12,

            itemStyle: {

              normal: {

                color: function(params) {

                  return colorlist[params.dataIndex];

                }                

              }

            },

            label: {

              show: true,

              position: 'top',

              color: '#ffffff',

              fontSize: 12,

              fontFamily: 'PingFang SC',

              fontWeight: 600,  

            },

            barGap: '-65%',  //这句话就是为了让柱形图的柱子到达背景图上

          }        

        ]

      };  

    },