問題:使用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})