同一个两个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.简单的控制图表两端间距就可以啦!
😉哪里不对请多多指点

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值