一、问题产生
最近在做后台项目(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插件监测指定元素变化而变化。
有价值的信息就这些,希望对你有帮助,不懂的话看看代码里的注释,已经标出重点,在不明白就直接复制粘贴,直接套用,我也是为了记录一下工作中遇到的疑难杂症,不为其他,欧耶!