echarts图表容器设置动态高度
问题:使用echarts绘制图表,数据太多时存在图表柱子拥挤重叠解决方法:一、已知数据多少的情况下,可以在标签上赋值<div class="chartBox" :style="{height: clientHeight + 'px'}"></div>//jsdata(){return{height:23*20}}...
·
问题:使用echarts绘制图表,数据太多时存在图表柱子拥挤重叠
解决方法:
一、已知数据多少的情况下,可以在标签上赋值
<div class="chartBox" :style="{height: clientHeight + 'px'}"></div>
//js
data(){
return{
height:23*20
}
}
二、未知数据多少的情况下,调用 resize 方法传入容器高度 {height:this.threeHeight}
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
width: '90%',
right: '2%',
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
},
yAxis: {
type: 'category',
data: this.titleList,
inverse: true
},
series: [{
type: 'bar',
data: this.dataList
}]
}
myChart.setOption(option)
//this.dataList.length为返回结果的长度 36为柱子的宽度
myChart.resize({height:this.dataList.length*36})
更多推荐
已为社区贡献1条内容
所有评论(0)