一、问题产生
最近在做后台项目（vue2+element-ui）时，发现一个小bug，后台的echarts图像大小并不能随浏览器窗口变化而变化，这就会导致调整浏览器窗口时，echarts图像被遮挡的效果。效果如下：
1、全屏时，图像如下：
2、调整浏览器窗口时，bug如下：
二、解决问题
1、解决图像大小随浏览器窗口变化而变化的问题
话不多说，直接上代码
A.template部分:
<template>
<div class="content">
<div id="main" style="width:80%;height:600px;margin:85px auto"></div>
</div>
</template>B.script部分
import echarts from 'echarts';
export default {
name:'App',
data(){
return {}
},
mounted(){
this.initEcharts();
},
methods:{
initEcharts(){
const myChart = echarts.init(document.getElementById("main"));
myChart.setOption({
xAxis: {
data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
},
legend: {
orient: 'horizontal',
left: '10%',
top: '1%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: ''
},
yAxis: {},
series: [
{
name:'男生',
type: "bar", //形状为柱状图
data: [11, 16, 30, 37, 67, 54, 25],
barWidth:"25%",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'blue'
}, {
offset: 1,
color: 'skyblue'
}]),
}
}
},
{
name:'女生',
type: "bar", //形状为柱状图
data: [10, 12, 40, 30, 30, 43, 50],
barWidth:"25%",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'red'
}, {
offset: 1,
color: 'pink'
}]),
}
}
}
]
});
// ***********随着浏览器大小调节图表*********** <-重点在此
window.onresize = () => {
myChart.resize()
}
}
}
}
</script>C.效果如下：
这样就达到了随浏览器窗口变化而变化的效果
2.echarts图像随指定元素变化而变化
有的时候echarts图像随浏览器变化而变化是不能满足需求的，于是乎就找了一个vue的插件，
element-resize-detector，就是它
a.安装：npm i element-resize-detector
b.main.js引入：
// 监听元素大小变化(为echarts服务)
import ElementResizeDetectorMaker from "element-resize-detector";
Vue.prototype.$erd = ElementResizeDetectorMaker();c.使用
template部分：
<template>
<div class="content" style="width:80%;height:700px;border:1px solid black;">
<div id="main" style="width:80%;height:600px;margin:85px auto"></div>
</div>
</template>script部分：
<script>
import echarts from 'echarts';
export default {
name:'App',
data(){
return {}
},
mounted(){
this.initEcharts();
},
methods:{
initEcharts(){
// ************引入vue监测插件************* <-重点在此
const elementResizeDetectorMaker = require("element-resize-detector");
let erd = elementResizeDetectorMaker();
const myChart = echarts.init(document.getElementById("main"));
myChart.setOption({
xAxis: {
data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
},
legend: {
orient: 'horizontal',
left: '10%',
top: '1%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: ''
},
yAxis: {},
series: [
{
name:'男生',
type: "bar", //形状为柱状图
data: [11, 16, 30, 37, 67, 54, 25],
barWidth:"25%",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'blue'
}, {
offset: 1,
color: 'skyblue'
}]),
}
}
},
{
name:'女生',
type: "bar", //形状为柱状图
data: [10, 12, 40, 30, 30, 43, 50],
barWidth:"25%",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'red'
}, {
offset: 1,
color: 'pink'
}]),
}
}
}
]
});
// ***********随着指定元素大小调节图表*********** <-重点在此
erd.listenTo(document.querySelector(".content"), () => {
myChart.resize();
});
}
}
}
</script>d.效果如下：
全屏状态下：
缩放状态下：
可以看出，echarts图像已经开始随.content盒子变化而变化 ，原理就是通过vue插件监测指定元素变化而变化。
有价值的信息就这些，希望对你有帮助，不懂的话看看代码里的注释，已经标出重点，在不明白就直接复制粘贴，直接套用，我也是为了记录一下工作中遇到的疑难杂症，不为其他，欧耶！