需求：触发某一条件后echarts进行重新绘制，宽高 随着父级的变化而变化
正常效果 （折线图）：
image.png
image.png
代码：
dom部分
<div class="echartCon" id="registerChart2" ref="tapp"></div>
<div class="iconFD" @click="iconFun">
<i v-if="iconFangda" class="iconfont icon-fangda"></i>
<i v-else class="iconfont icon-suoxiao"></i>
</div>
style部分
.echartCon {
width: 100%;
height: calc(100% - 80px);
}
.iconFD {
width: 46px;
height: 46px;
position: absolute;
bottom: 10px;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
box-shadow: 0px 0px 10px #000;
color: #fff;
cursor: pointer;
.iconfont {
font-size: 24px;
}
}
js部分
// 监听元素宽高变化
import elementResizeDetectorMaker from 'element-resize-detector'
// 点击 放大缩小图标
myHW() {
this.iconFangda = !this.iconFangda
const _this = this
const erd = elementResizeDetectorMaker()
erd.listenTo(document.getElementById('app'), (element) => {
_this.$nextTick(() => {
if (this.iconFangda) {
let height = element.offsetHeight - 520
let width = element.offsetWidth - 300
this.$refs.tapp.style.height = height + 'px'
this.$refs.tapp.style.width = width + 'px'
// 折线图
this.drawLine2(height, width)
} else {
let height = element.offsetHeight - 380
let width = element.offsetWidth - 60
this.$refs.tapp.style.height = height + 'px'
this.$refs.tapp.style.width = width + 'px'
this.drawLine2(height, width)
}
})
})
},
// 折线图
drawLine2(height, width) {
let echarts = require('echarts')
let myChart2 = echarts.init(
document.getElementById('registerChart2')
)
// 重新绘制！！！必须添加这个！
myChart2.clear()
myChart2.resize({ height: height, width: width })
// 绘制图表
myChart2.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
color: ['#409eff'],
grid: {
left: '3%',
right: '2%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: this.myData2.timeStr,
},
],
yAxis: [
{
type: 'value',
min: 0,
max: function(value) {
const formatInt = (num, prec = 2, ceil = true) => {
const len = String(num).length
if (len < prec) {
return num
}
const mult = Math.pow(10, prec)
return ceil
? Math.ceil(num / mult) * mult
: Math.floor(num / mult) * mult
}
return formatInt(value.max, 2, true)
},
},
],
series: [
{
smooth: true,
type: 'line',
data: this.myData2.countInt,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(60, 177, 255,0.2)',
},
{
offset: 0.9,
color: 'rgba(0,0,0,0)',
},
],
global: false,
},
},
},
],
})
},