Echarts设置高度随数据量变化

echarts所有的图表都需要设置宽高才能在页面中显示出来。

如果数据量固定，那么只需要根据页面设置合适的图表宽高就行了；那如果数据量不固定，在同样的宽高下，数据量多则会显示不全，数据量少则又会有大片空白，影响页面美观。

那我可不可以让图表根据数量的多少进行动态配置高度呢？

当然可以，下面是我在项目中写的，这里只作一个参考，将一些关键的代码记录下来。。。

<template>
  <div>
    <div id="pieChart" ref="pieChart" :style="{ width: '100%', height:pieChartHight }"/>
  </div>
</template>
<script>
import { pieApi } from '@/Api/basic'

export default {
  name: 'pie',
  data () {
    return {
      chartData: [], // 饼图数据
      pieChartHight: '230px', // 饼图基础高度
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    // 获取接口数据
    getData () {
      let queryData = {
        startDayLong: this.$moment().startOf('day').valueOf(),
        endDayLong: this.$moment().endOf('day').valueOf(),
      }
      this.$toast.loading({ message: '加载中...', forbidClick: true })
      pieApi(queryData).then(res => {
        // 这里的 res 是举例，实际根据后端接口返回的数据进行赋值
        if (res.code === 200) {
          res.data.map(item => {
            let pieObj = {
              name: item.name,
              value： item.value
            }
            // pieObj 中的属性可根据需要添加
            this.chartData.push(pieObj)
          })
          this.drawPie()
        } else {
          this.$toast(res.msg)
        }
        this.$toast.clear()
      }).catch(error => {
        console.log(error)
        this.$toast.clear()
      })
    },
    // 画图
    drawPie () {
      this.pieChart = this.$echarts.init(document.getElementById('pieChart'))
      let option = {
        ...
        // 这里为饼图数据显示的各项配置，根据项目需要自行配置
      }
      this.pieChart.setOption(option)
      
      // 50：显示的单条数据文本大致高度，根据实际需要进行调整
      // 150：基础高度，根据实际需要进行调整
      // 根据数据量动态设置饼图高度
      this.pieChartHight = option.series.data.length * 50 + 150
      // 根据数据量动态设置柱状图y轴的高度
      this.autoHeight = option.yAxis.data.length * 50 + 150
      
      // 获取ticChart容器的dom节点并赋值高度
      this.pieChart.getDom().style.height = this.pieChartHight + 'px'
      this.pieChart.getDom().childNodes[0].style.height = this.pieChartHight + 'px'
      this.pieChart.resize()
    },
  }
}
</script>

<style lang="scss" scoped>
</style>