最近自己在用echarts在数据平台上添加图表时发现了一个问题。
那就是在做tab切换的过程中，自己一共有3个页面，除了第一个页面的echarts显示正常以外，
第二个和第三个页面的echarts的canvas都只有100px。
为了解决这个问题，我上网查了相关讨论，并实践了一下。第一种是直接写死自己用来装echarts的容器，我试了试，
发现没什么改变。更别说什么宽度不能自适应了。紧接着又试了第二种，MyChart.resize()，还是不行。
终于在自己的不懈努力下，问题得到了解决。
这是我根据网上的一位作者分享的代码进行了一些改动，这是作者的分享：
https://www.jianshu.com/p/5be73b29c335
第一步 给tab添加点击事件（这里我用的是layui）
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li onclick="fn()">用户管理</li>
<li>权限分配</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">
<div class="layui-card hezi" style="width: 48%;position: absolute;right: 0;top: 22%;">
<div class=" layui-card-body">
<div id="mubiaos" style=" height: 350px;width: 100%"></div>
</div>
</div>
</div>
<div class="layui-tab-item">内容3</div>
</div>
</div>
第二步 给外部容器赋值宽度（图表不能正常显示的缘由是在tab切换的时候，外部div（hezi）的宽度一开始为0，
后面在加载的过程中才逐渐有了宽度）
function fn() {
setTimeout(() => {
var mubiaos = document.getElementById( mubiaos );
var hezi = document.getElementsByClassName( hezi )[0];
mubiaos.style.width = hezi.clientWidth + px ;
console.log(hezi.clientWidth)
var mubiaosChart = echarts.init(document.getElementById( mubiaos ));
mubiaosChart.clear()
mubiaosChart.setOption({
tooltip: {
trigger: item
},
legend: {
top: 5% ,
left: center
},
series: [{
name: 访问来源 ,
type: pie ,
radius: [ 40% , 70% ],
avoidLabelOverlap: false,
label: {
show: false,
position: center
},
emphasis: {
label: {
show: true,
fontSize: 40 ,
fontWeight: bold
}
},
labelLine: {
show: false
},
data: [{
value: 1048,
name: 搜索引擎
},
{
value: 735,
name: 直接访问
},
{
value: 580,
name: 邮件营销
},
{
value: 484,
name: 联盟广告
},
{
value: 300,
name: 视频广告
}
]
}]
});
}, 10)
}
由于我先开始按照上面攻城狮写去直接运行，发现问题没解决。所以我又根据他写的
代码加了一个点击事件。
全部代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li onclick="fn()">用户管理</li>
<li>权限分配</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">
<div class="layui-card hezi" style="width: 48%;position: absolute;right: 0;top: 22%;">
<div class=" layui-card-body">
<div id="mubiaos" style=" height: 350px;width: 100%"></div>
</div>
</div>
</div>
<div class="layui-tab-item">内容3</div>
</div>
</div>
<script>
function fn() {
setTimeout(() => {
var mubiaos = document.getElementById( mubiaos );
var hezi = document.getElementsByClassName( hezi )[0];
mubiaos.style.width = hezi.clientWidth + px ;
console.log(hezi.clientWidth)
var mubiaosChart = echarts.init(document.getElementById( mubiaos ));
mubiaosChart.clear()
mubiaosChart.setOption({
tooltip: {
trigger: item
},
legend: {
top: 5% ,
left: center
},
series: [{
name: 访问来源 ,
type: pie ,
radius: [ 40% , 70% ],
avoidLabelOverlap: false,
label: {
show: false,
position: center
},
emphasis: {
label: {
show: true,
fontSize: 40 ,
fontWeight: bold
}
},
labelLine: {
show: false
},
data: [{
value: 1048,
name: 搜索引擎
},
{
value: 735,
name: 直接访问
},
{
value: 580,
name: 邮件营销
},
{
value: 484,
name: 联盟广告
},
{
value: 300,
name: 视频广告
}
]
}]
});
}, 10)
}
</script>
</body>
</html>
以上就是解决echarts在tab切换中没有宽度的全过程了。
如果这篇文章对你有协助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~
© 版权声明
文章版权归作者所有，未经允许请勿转载。如内容涉嫌侵权，请在本页底部进入<联系我们>进行举报投诉!
THE END
暂无评论内容