echarts 固定柱状图的宽高,设置类别之间的间距为固定值(不让 ECharts 自动调整)

需求:

1.当数据变多或者变少的时候,让柱状图不自适应调整,而是保持固定间距

2.当柱状超出当前页面的时候显示滑块,且固定滑块的滑动范围,不让用户调整展示柱状图的数量;

解决办法:

需求2:根据返回值数组的长度,以及页面需要固定展示的条数,动态计算百分比,然后设置dataZoom的配置:

// 计算滑块的展示区域,这里限制了一次最大展示八个柱状图,
        const zoomValue = salvProName.length > 8 ? (8 / salvProName.length) * 100 : 100;
  const option = {
...,

dataZoom: {
            show: salvProName.length > 8,
            type: "slider",
            yAxisIndex: [0], // 绑定到 yAxis
            orient: "vertical", // 垂直方向
            left: "95%", // 右侧
            bottom: "10%", // 从底部向上偏移
            width: "5%", // 滚动条宽度
            height: "90%", // 滚动条高度
            start: 0, // 数据窗口范围的起始百分比
            end: zoomValue, // 数据窗口范围的结束百分比
            minSpan: zoomValue, // 数据窗口范围的最小跨度(百分比)
            maxSpan: zoomValue, // 数据窗口范围的最大跨度(百分比)
          },
}

需求1:动态计算,设置yAxis的max值

const option = {
...,
  yAxis: {
  type: "category",
            inverse: true,
...,
  // 设置类别之间的间距为固定值(不让 ECharts 自动调整)
            max: function (value) {
              if (value.max < 8) {
                value.max = 8;
              } else {
                value.max = value.max;
              }
              return value.max;
            },

}
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值