前言
自适应这个东西整了一下午,感觉网上的东西有很多坑,这里记录一下
技术
1.vue-echarts
这里用的vue与echarts结合的组件化的东西
代码
1.页面
<v-chart
:options="orgOptions"
style="width: 100%;height:100%;"
:auto-resize="true"
ref="chart"
/>
这里的style是必须的,意思是填充上一层盒子
ref也是必要的,后面回用到这里。
2.js–mounted
1)初始时适应
this.$nextTick(() => {
this.$refs.chart.resize();
})
this.$refs.chart.resize()这个是官网给的自适应方法,
这里的核心是$nextTick,页面渲染完成后执行这个自适应函数
2)窗口变化时适应
window.addEventListener("resize", this.resizeTheChart);//这句在mounted中
methods中:
resizeTheChart() {
if (this.$refs && this.$refs.echarts1) {
this.$refs.echarts1.r