vue使用echarts出现图表被压缩问题
//html
<div id="chart" :style="{width: '100%', height: '350px',margin:'0 auto'}" />
//js
getData() {
const myChart = echarts.init(document.getElementById('chart'))
const namelist = []
const value = []
getdata().then(res => {
if (res.success) {
for (var j = 0; j < res.data.length; j++) {
const val = res.data[j]
namelist.push(val.name)
value.push(val.value)
}
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
toolbox: {
feature: {
datazoom: {
show: true
}
}
},
grid: {
top: '2%',
left: 0,
right: '2%',
bottom: '2%',
containLabel: true
},
xAxis: {
type: 'value',
position: 'top',
},
yAxis: {
type: 'category',
data: namelist
},
series: [
{
type: 'bar',
data: value
}
]
}
myChart.setOption(option)
}
})
}
在获取图表数据前,将图表初始化放在第一步,可以有效避免图表被压缩。亲测有效