同一个两个echarts图表，控制图表两端间距

图片说明，同一个页面两个图表 一个紧贴坐标轴，一个保留间隙如何实现 1.完成基本的echarts渲染之后，在相应的变量中传一个参数

// 第一个图表的变量 传入***boundaryGap为false***控制两端不留空格
customerNumLegend: Object.freeze([
    {
          
    key: "customerNum", name: "客户总数", type: "line", boundaryGap: false },
]),
// 第二个图表的变量 传入***boundaryGap为true***控制两端保留空格
topTenLegend: Object.freeze([
  {
          
    key: "customerNum", name: "客户总数", type: "bar" , boundaryGap: true },
]),

2.拿到传递的参数控制图表

// 基本代码结构 重点是xAxis中
  drawEchart(echartsData, domId, legend, xAxisStr) {
          
   
      let obj = document.getElementById(domId);
      let charts = echarts.init(obj);
      let timer = 0;
      window.onresize = function () {
          
   
        clearTimeout(timer);
        timer = setTimeout(() => {
          
   
          charts.resize();
        }, 200);
      };
      const option = {
          
   
        color: ["#088AEE", "#6BD4C3", "#FA7216", "#E74E59"],
        tooltip: {
          
   
          trigger: "axis",
        },
        legend: {
          
   
          data: legend.map((i) => i.name),
          padding: [0, 0, 0, 0],
          margin: [40, 0, 20, 0],
        },
        grid: {
          
   
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: 5%,
          containLabel: true,
        },
        xAxis: {
          
   
        // 拿到传过来的值 打印legend是数组 可以看到相应的false 和true 以此控制图表两端间距
        //再处理相应的数组 boundaryGap: legend[0].boundaryGap 
          *boundaryGap: legend[0].boundaryGap,* 
          type: "category",
          left:30,
          data: echartsData.map((i) => i[xAxisStr]),
          axisLine: {
          
   
            lineStyle: {
          
   
              color: "#ccc",
            },
          },
        },
        yAxis: {
          
   
          type: "value",
          axisLine: {
          
   
            lineStyle: {
          
   
              color: "#ccc",
            },
          },
        },
        series: legend.map((i) => {
          
   
          const item = {
          
   
            barWidth: 30, //柱图宽度
            name: i.name,
            type: i.type,
            smooth: true,
            data: echartsData.map((v) => v[i.key]),
          };
          return item;
        }),
      };
      charts.setOption(option);
    },

3.简单的控制图表两端间距就可以啦！ 😉哪里不对请多多指点