最近在vue中使用echarts时，碰到的一个echarts bug，tab切换时，echarts图表默认隐藏的时候，是不渲染的，等再次有数据的时候就会渲染，但这时候渲染的默认宽度是100px。
查询了许多方法终于解决了问题，现在讲解决方法记录一下，希望都其他人能有所帮助。
解决办法：
就是每次绘图之前动态在重新给eharts赋一次width
<template>
<div id="staticWidth">
<div style="width: 100%; position:relative">
<el-button type="primary" style="position:absolute;right:10%;top:10px;z-index: 999" @click="changeTable()">切换展示方式</el-button>
<div v-show="whichOne" >
<div id='pieCharts' style="height:500px;"></div>
</div>
<div v-show="!whichOne" >
<div id="compositeLine" :option="optionLine" ></div>
</div>
</div>
</div>
</template>
<script>
import echarts from 'echarts';
import {
optionLine
} from '@/components/js/chartjs/hydLine.js';
//hydLine 封装echarts line export default {
name: 'aaa',
data() {
return {
whichOne: true,
loading: true,
optionLine: {},
dataListArr: [{
'number': 10,
'percentNum': 0
},
{
'number': -80,
'percentNum': 0
},
{
'number': 30,
'percentNum': 0
},
{
'number': -50,
'percentNum': 0
}
]
}
},
components: {},
created() {
let maxIndex = 0,
maxNegative = 0,
maxPositive = 0;
this.dataListArr.forEach(function (v, i) {
if (Math.abs(v.number) <= Math.abs(v.number)) {
maxIndex = i;
}
if ((v.number > 0) && (v.number > maxPositive)) {
maxPositive = v.number;
}
if ((v.number < 0) && (v.number < maxNegative)) {
maxNegative = v.number;
}
});
this.$nextTick(function () {
document.querySelector('.line-chart').style.marginTop = -(maxPositive - maxNegative) / 20 + 'rem';
})
let maxnumber = Math.abs(this.dataListArr[maxIndex].number);
setTimeout(function () {
this.dataListArr.forEach(function (value, index) {
value.percentNum = Math.abs(value.number) / maxnumber;
});
console.log(this.dataListArr);
}.bind(this), 0)
},
activated() {
this.handleListener();
},
computed: {
},
methods: {
changeTable(){
let _this = this;
_this.whichOne=!_this.whichOne;
if(!_this.whichOne) {
_this.drawLine()
} else {
_this.drawPie()
}
},
// 饼图
drawPie() {
var myPie = echarts.init(document.getElementById('pieCharts'), 'infographic');
var option = {
title: {
text: '统计分析柱状图 ',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'horizontal',
left: '46%',
bottom:"0",
data: ['2018','2019']
},
series: [{
name: '绝缘电阻分析',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [{
value: 335,
name: '2014'
},
{
value: 310,
name: '2019'
},
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
myPie.setOption(option);
//重新渲染图表的时候，resize 图表的宽度width
let resize = {
width: this.initWidth,
height: 300
};
myPie.resize(resize);
},
//线图
drawLine() {
let self = this;
// 基于准备好的dom，初始化echarts实例
var myLine = echarts.init(document.getElementById('compositeLine'), 'infographic');
// 绘制基本图表
var option = {
color: ['#3398DB'],
title: {
show: true,
text: "年份统计分析柱状图",
textAlign: 'center',
left: '50%',
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['2018', '2019'],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '演示案例',
type: 'bar',
barWidth: '20px',
data: [330, 220]
}],
opts: [{
width: '20px'
}]
};
console.log(option.xAxis[0].data[0])
if (this.value1 != "") {
option.xAxis[0].data[0] = this.value1
}
if (this.selectEndTime != "") {
option.xAxis[0].data[1] = this.selectEndTime
}
myLine.setOption(option);
let resize = {
width: this.initWidth,
height: 270
};
myLine.resize(resize);
},
//重新计算echarts的宽度
calculateEcharts() {
//获取这个组件的窗口宽度
this.initWidth = document.getElementById('staticWidth').offsetWidth;
console.log(this.initWidth);
},
//监听窗口变化
handleListener() {
// 调用renderChart方法对图表进行重新渲染
window.addEventListener('resize', this.drawLine);
window.addEventListener('resize', this.drawPie);
window.addEventListener('resize', this.calculateEcharts);
},
},
mounted() {
this.calculateEcharts();
},
beforeDestroy() {},
updated() {
}
}
</script>
<style scoped>
</style>calculateEcharts()方法动态获取窗口的宽度，在绘制echarts时，通过
let resize = {
width: this.initWidth,
height: 270
};
myLine.resize(resize);重新绘制echarts的宽度
