Dynamically change echarts height and re-render

//vue模版内容
<div  ref="barChartRef" class="barChart" :style="`height:${heightNum}px`" />


//vue中js部分


init(){
  .
  .
  .
  this.option.dataset.source = res.data || []
  const dataLen = res.data.length
  const tmp = dataLen * 35 + 50
  this.heightNum = tmp < 70 ? 70 : tmp
  this.$nextTick(() => {
                this.initChart()
              })
},
initChart() {                          
  if (!this.myChart) {
        const barChartRef = this.$refs.barChartRef
        this.myChart = this.$echarts.init(barChartRef)
        this.myChart.on('click', (params) => {//绑定点击事件         
          const locationId = params.data.locationId   
          this.init()
        })
  }
  // 清除画布,重新绘制的时候就不会遗留之前的数据,解决高度数据变echarts高度不变问题
  this.myChart.clear()
  this.myChart.setOption(this.option)// 重新绘制图标
  this.myChart.resize({ height: this.heightNum })
}

Guess you like

Origin blog.csdn.net/u011200562/article/details/127529684