echarts图表动态高度

kopppo7

已于 2023-09-04 09:57:48 修改

阅读量531

点赞数

文章标签：前端

于 2023-08-16 09:57:19 首次发布

本文链接：https://blog.csdn.net/kopppo7/article/details/129598308

版权

const dom = document.getElementById('chartView')

// 此处根据数组长度动态设置dom高度，比例可自行再调节，现在为30，基础值为80，如果没有内容默认高度为400
const height = 80 + this.chartForm.xData[1].length * 30 || 400
dom.style = `height:${height}px`

// 动态计算top值，图表数据越多，top值越小
let number = this.chartForm.xData[1].length ? 120 / (this.chartForm.xData[1].length + 1) : 15

// 小于两家门店时，图表会变形
if (this.chartForm.xData[1].length <= 2) {
  number = 30
}

// 图表的配置中
grid: {
   left: '2%',
   bottom: '3%',
   top: number + '%',
   right: '16%',
}