柱状图不从圆点开始解决办法

import labelBg from "@/assets/images/business-opportunity-statistics/echaarts-label-bg.svg"
export const COLUMNAR_OPTIONS_MY = {
  // backgroundColor: '#000',
  animation: true,
  grid: {
    top: "23%",
    bottom: "15%",
    right: "6%",
    left:0,
  },
  xAxis: {
    // nameLocation:"middle",
    boundaryGap:false,//x轴得留白策略
    show: false,
    data: [],
  },
  yAxis: {
    show: false,
  },
  series: [
    {
      name: "d",
      type: "bar",
      barMaxWidth: 86,
      emphasis:{//取消hover效果
        disabled:true,
        focus:"none"
      },
      itemStyle: {
        normal: {
          color: "#F27A11FF"
        }
      },
      data: [],
      z: 10,
      zlevel: 0,
      label: {
        show: true,
        // position: ['120%', '50%'],
        position:"right",
        distance: 10,
        color: '#000000',
        // formatter: function(p){
        //   return '{labelClass|' + p.value+"%" +'}'
        // },
        backgroundColor: {
          image:labelBg,
          width:52,
          height:20
        },
        // padding: [30, 0, -20, 0],//内边距属性
        width: 52,//宽属性
        height: 20,//高属性
        lineHeight: 20,
        rich: {
          width: 52,//宽属性
          height: 20,//高属性,
          labelClass:{
            align:"center",
          }
        }
      }
    },
    {
      name: "背影",
      type: "line",
      smooth: true, //平滑曲线显示
      showAllSymbol: false, //显示所有图形。
      symbolSize: 0,
      lineStyle: {
        width: 0
      },
      areaStyle: {
        color: "rgba(168,162,162,0.1)"
      },
      data: [21, 43, 56, 32, 64],
      z: 5
    },
    {
      data: [21, 43, 56, 32, 64],
      type: 'line',
      lineStyle: {
        color: "rgba(1, 1, 1, 0)"
      },
      symbol: 'circle',
      symbolSize: 1,
      label: {
        normal: {
          show: true,
          formatter: '{title|{b}}\n{numClass|{c}}',
          rich: {
            title: {
              fontSize: 14,
              fontWeight:600,
            },
            numClass: {
              fontSize: 12,
              padding:[3,0,0,0],
            }
          }
        }
      },
      showBackground: false,
    }
  ],
  dataZoom: [
    {
      type: "slider",
      show: false,
      xAxisIndex: [0],
      endValue: 6,
      startValue: 0
    }
  ]
}

配置项

效果图；

 很明显左边的被隐藏了

加上

xAxis: {
    // nameLocation:"middle",
    // boundaryGap:false,//x轴得留白策略
    show: false,
    data: [],
  },

左右边距又过于太大

 

前段时间想了很久都没想到办法，今天突然想到用外边距就能轻易解决这个问题

grid: {
    top: "23%",
    bottom: "15%",
    right: "6%",
    left:"45px",
  },
  xAxis: {
    // nameLocation:"middle",
    boundaryGap:false,//x轴得留白策略
    show: false,
    data: [],
  },

隐藏留白策略，再加外边距就能轻松解决这个问题