Echarts--tabs切换图表宽度显示为100px问题

原因很简单,在tab页中,图表的父容器div是隐藏的(display:none),图表在执行js初始化的时候找不到这个元素,所以自动将“100%”转成了“100”,最后计算出来的图表就成了100px

解决办法:

找一个在tab页的切换操作中不会隐藏的父容器,把它的宽度的具体值取出后在初始化图表之前直接赋给图表

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲chartMain").css…("#TabContent").width());//获取父容器的宽度具体数值直接赋值给图表以达到宽度100%的效果
var Chart = echarts.init(document.getElementById(‘chartMain’));

// 指定图表的配置项和数据
option = { …配置项和数据 };

// 使用刚指定的配置项和数据显示图表。
Chart.setOption(option);

例:实例echarts之前设置高度
window.JQ("#construction").css(‘width’,window.JQ("#left").width())
this.myChart1 = window.Echarts.init(document.getElementById(‘construction’));

//当浏览器缩放的时候 - 改变charts
resizeCharts () {
this.myChart.resize();
this.myChart1.resize();
this.myChart2.resize();
}

销毁echarts实例
this.myChart1.dispose()

el-tabs切换导致echarts图表样式错乱的解决方案是通过改变页面大小来解决的。当切换选项卡时,el-tabs中不显示tab页会有一个display: none的样式,这导致echarts无法获取宽度,从而导致图表样式错乱。解决方法是在切换tabs后,改变页面大小,再次切换tabs,这样echarts图表宽度就能正确计算并恢复正常。 以下是一个示例代码,演示了如何使用el-tabs切换echarts图表: ```html <template> <div> <el-tabs v-model="activeTab" @tab-click="handleTabClick"> <el-tab-pane label="Tab 1"> <div ref="chart1" style="width: 100%; height: 400px;"></div> </el-tab-pane> <el-tab-pane label="Tab 2"> <div ref="chart2" style="width: 100%; height: 400px;"></div> </el-tab-pane> </el-tabs> </div> </template> <script> import echarts from 'echarts'; export default { data() { return { activeTab: 'Tab 1', chart1: null, chart2: null }; }, mounted() { this.initChart(); }, methods: { initChart() { this.chart1 = echarts.init(this.$refs.chart1); this.chart2 = echarts.init(this.$refs.chart2); // 初始化图表数据和样式 // ... // 在切换tabs后,改变页面大小,再次切换tabs this.$nextTick(() => { window.addEventListener('resize', this.handleResize); }); }, handleTabClick(tab) { // 切换tabs时更新图表数据和样式 // ... }, handleResize() { // 改变页面大小后重新计算图表宽度 this.chart1.resize(); this.chart2.resize(); } }, beforeDestroy() { window.removeEventListener('resize', this.handleResize); } }; </script> ``` 在上述代码中,我们使用了el-tabs组件来实现选项卡切换,每个选项卡对应一个echarts图表。在mounted钩子函数中,我们初始化了echarts图表,并在切换tabs后通过监听resize事件来重新计算图表宽度
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值
>