1、问题描述
最近在做电商后台管理项目,在首页用echarts做可视化显示的时候,遇到了进行tabs切换时图表不会自适应的问题。具体问题截图如下。
如上图所示,当进行tabs切换的时候,折线图图表的宽不会自适应。下面我们看代码和产生该问题的原因。
<div style="width:100%;display:flex;justify-content: space-between;">
<div
ref="line"
id="line"
style="width:60%;height:320px;">
</div>
</div>
我们可以看到此处我给他设的宽度为60%,但是似乎并没有生效,接下来我们来看看控制显示的元素宽度。
我们可以清楚的看到我们设置了60%的相对宽度,但是在控制台我们可以看到宽度显示为了60px,这明显是不对的。
解决办法
我是在判断图表是否存在后,去计算了el-tabs的宽度,然后将它乘以0.6,赋值给图表。代码如下:
document.getElementById('line').style.width = document.getElementsByClassName('el-tabs')[0].offsetWidth*0.6+'px'
然后在方法的最后我还监听了窗口大小调整的事件,在窗口大小发生变化时,让图表重新设置大小。代码如下:
getEchartData() {
const chart1 = this.$refs.line;
if (chart1) {
console.log("d",document.getElementsByClassName('el-tabs')[0].offsetWidth)
document.getElementById('line').style.width = document.getElementsByClassName('el-tabs')[0].offsetWidth*0.6+'px'
const myChart = this.$echarts.init(
document.getElementById("line")
);
const option = {
title: {
text: '销售额趋势图'
},
//提示框,鼠标悬浮交互时的信息提示
tooltip: {
//触发类型,默认('item')数据触发,可选为:'item' | 'axis'
trigger: 'item'
},
//图例,每个图表最多仅有一个图例
legend: {
//显示策略,可选为:true(显示) | false(隐藏),默认值为true
show: true,
//水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
x: 'center',
//垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
y: 'top',
//legend的data: 用于设置图例,data内的字符串数组需要与sereis数组内每一个series的name值对应
data: ['销售额度']
},
xAxis: {
//显示策略,可选为:true(显示) | false(隐藏),默认值为true
show: true,
//坐标轴类型,横轴默认为类目型'category'
type: 'category',
//类目型坐标轴文本标签数组,指定label内容。 数组项通常为文本,'\n'指定换行
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
},
yAxis: {
//显示策略,可选为:true(显示) | false(隐藏),默认值为true
show: true,
//坐标轴类型,纵轴默认为数值型'value'
type: 'value',
//分隔区域,默认不显示
// splitArea: {show: true}
},
series: [{
name: '销售额度',
data: [820, 932, 901, 934, 1290, 1330, 1320,600,7000,500,900,1000],
type: 'line'
}]
};
myChart.setOption(option);
window.addEventListener("resize", function() {
// document.getElementById('line').style.width = "60%"
myChart.resize();
});
}
},
最后的效果图如下:
有更好的方法欢迎在下方评论。