<template>
<div
:class="className"
:style="{ height: height, width: width }"
ref="Echart"
id="myChart"
/>
</template>
methods: {
init() {
const self = this; //因为箭头函数会改变this指向,指向windows。所以先把this保存
setTimeout(() => {
window.addEventListener("resize", function () {
self.chart = self.$echarts.init(self.$refs.Echart);
self.chart.resize();
});
}, 10);
},
}
注意:这里$echarts,是在全局配置了echart
1.vue 项目中 引用echarts
cnpm install echarts -S
2.安装成功后 在main.js中全局配置echarts
就不需要再每个页面都引入echart:
参考链接:echarts自适应