Vue中使用Echarts自适应问题

问题:在Vue项目中的侧栏展开或者合并时,echart图标不能自适应屏幕
解决思路:
    思路一、监听DOM变化,使用echarts自带的resize()去适配
    思路二、监听DOM变化,在router-view中重新渲染页面(未尝试)
用window.onsize监听,发现只能监听窗口变化,并没有什么卵用。

百度发现使用element-resize-detector可以完美解决

1、安装
    npm install element-resize-detector

2、引入
    var elementResizeDetectorMaker = require("element-resize-detector")

3、使用
    <div id="test">
<div id="eChart">
</div>
    在mounted(){}中:
   let that = this
var erd = elementResizeDetectorMaker()
erd.listenTo(document.getElementById("test"), function (element) {
that.$nextTick(function () {
that.$echarts.init(document.getElementById("eChart")).resize()
})
})

在一个页面中如果有多个echarts,可以用ref:
         self.chart = self.$echarts.init(self.$refs.Echart);
self.chart.resize();
    注意:这时候可能会报init is undefined,只需引入echart即可 import echarts from 'echarts',把that.$echarts改成echart就好了

参考:https://blog.csdn.net/csl125/article/details/89245267

暂无评论