//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 })
}
动态改变echarts高度并重新渲染
猜你喜欢
转载自blog.csdn.net/u011200562/article/details/127529684
今日推荐
周排行