1、下载依赖包
npm install element-resize-detector
2、在组件内引入依赖
var elementResizeDetectorMaker = require("element-resize-detector")
3、加载图表
<div id="warnstatistics"
ref="typeEchart">
</div>
initEcharts(){
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
}
if (this.myEchart != null && this.myEchart != "" && this.myEchart != undefined) {
this.myEchart.dispose()
}
this.myEchart = echarts.init(this.$refs.typeEchart)
this.myEchart.setOption(option)
}
4、mounted中监听加载图表的dom元素
mounted(){
this.resizeEchart ()
}
methods:{
resizeEchart () {
var erd = elementResizeDetectorMaker()
erd.listenTo(document.getElementById("warnstatistics"), element => {
this.myEchart? this.myEchart.resize() : ''
})
}
}