1、问题描述
处理在多个echarts图表下 resize()方法只生效一个,最后一个的行为会覆盖前面的。多个图表自适应有两种情况:
第一种情况是改变窗口大小要多个图表自适应,
第二种情况是窗口大小不变,整个页面分为两部分,左边菜单导航树形宽度占20%,右边图表宽度占80%,当左边菜单宽度变为10%时图表自适应变为90%;
2、思路分析
(1)、改变窗口大小:
方法 1、遍历生成的折线图的Dom,通过getInstanceByDom方法获取dom容器,调用每个图形的resize方法,在window.onresize监听窗口变化时,调用getEchartObj()方法
方法2、因为采用DOM一级绑定方式会只适应一个图表,在使用window.onresize监听窗口变化时,要使用DOM二级绑定方式:addEventListener方式;(注释的位置)
(2)、改变div的宽度:
3、解决办法
改变窗口大小:
(1)当多个图形在一个vue组件中时:(方法 1\方法2)
methods:{
//饼图分析
drawPie() {
let myChart = echarts.init(this.$refs['payWayRef']);
// 绘制图表
let option = {
title: {
text: "分析",
left: "center"
},
tooltip: {
trigger: "item",
formatter: `{a}<br/>{b}:{c}({d}%)`
},
legend: {
orient: "vertical",
left: "left",
selected: this.legendData
},
toolbox: {
show: true,
feature: {
// dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
series: []
};
myChart.setOption(option);
// window.addEventListener("resize",()=>{
// myChart.resize()
// })
},
//曲线图分析
drawLine(data) {
// this.dateArr.pop();
let lineCount = data.lineCount;
let lineMoney = data.lineMoney;
let myChart = echarts.init(this.$refs["payWayLineRef"]);
// 绘制图表
let option = {
title: {
text: "分析",
left: "center"
},
tooltip: {
trigger: "axis"
},
legend: {
type: "scroll",
left: "left"
},
toolbox: {
show: true,
feature: {
// dataView: { readOnly: false },
magicType: { type: ["line", "bar"] },
restore: {},
saveAsImage: {}
}
},
grid: {
right: "15%"
},
xAxis: {
type: "category",
data: this.dateArr,
name: "月份"
},
yAxis: [
{
type: "value",
name: "笔数",
nameLocation: "start",
nameGap: 30,
position: "left",
splitLine: false
},
],
series: [
{
name: "笔数",
data: lineCount,
yAxisIndex: 0,
type: "line"
},
{
name: "金额",
data: lineMoney,
yAxisIndex: 1,
type: "bar"
}
]
};
myChart.setOption(option);
// window.addEventListener("resize",()=>{
// myChart.resize()
// })
},
//处理多个图形的自适应
getEchartObj(){
let arr = ['payWayRef',"payWayLineRef"]
arr.map(v => {
let _ref=this.$refs[v];//遍历生成的折线图的Dom
//通过getInstanceByDom方法获取dom容器
let myEchars = _ref?echarts.getInstanceByDom(_ref):undefined;
if(myEchars!== undefined){
myEchars.resize();
}
});
}
}
mounted(){
this.$nextTick(()=>{
window.onresize = ()=>{
this.getEchartObj()
}
})
}
(2)当多个图形在不同子组件中时:(父组件/多个子组件)
//父组件 father
//子组件1 son1
//子组件2 son2
import echarts form "echarts"
//父组件主要代码块
<son1 ref='son1'></son1>
<son2 ref='son2'></son2>
mounted(){
this.$nextTick(()=>{
window.onresize = ()=>{
this.$refs.son1.reResizeFn()
this.$refs.son2.reResizeFn()
}
})
}
//son1子组件主要代码块(echarts为引入的echarts对象)
<div id='echart1'></div>
//处理多个图形的自适应
reResizeFn(){
let _ref=document.getElementById("echart1")
//通过getInstanceByDom方法获取dom容器
let myEchars = _ref?echarts.getInstanceByDom(_ref):undefined;
if(myEchars!== undefined){
myEchars.resize();
}
}
//son2子组件主要代码块
<div id='echart1'></div>
//处理多个图形的自适应
reResizeFn(){
let _ref=document.getElementById("echart2")
//通过getInstanceByDom方法获取dom容器
let myEchars = _ref?echarts.getInstanceByDom(_ref):undefined;
if(myEchars!== undefined){
myEchars.resize();
}
}
改变div的宽度:
(1)左侧菜单,右侧内容的场景