问题:当我们写完echarts后缩放浏览器窗口常常会出现图表超出指定范围,然后我们刷新页面图标又恢复到范围内。
解决方法:添加resize事件
作用:当浏览器窗口缩放时自动“刷新”echarts图标
写法一:
export default {
data(){
return {
myChart:''
}
},
methods:{
getMap(){
var that=this;
that.myChart = that.$echarts.init(document.getElementById("map"));
var option = {//配置项
//geo3D: {
// map: 'china',
// roam: true
//}
//......
};
that.myChart.setOption(option);
// 自适应
window.addEventListener('resize', function () {
that.myChart.resize()
});
}
}
}
写法二:
export default {
data(){
return {
myChart:''
}
},
mounted(){
// 自适应
window.onresize = ()=>{
this.myChart.resize();
// ...可持续添加
}
},
methods:{
getMap(){
var that=this;
that.myChart = that.$echarts.init(document.getElementById("map"));
var option = {//配置项
//geo3D: {
// map: 'china',
// roam: true
//}
//......
};
that.myChart.setOption(option);
}
}
}