echartstab切换问题整理
⼀、bootstrap tabs 解决⽅案
⽅式⼀
tab切换echarts⽆法正常显⽰
tab切换时候，第⼀个图正常显⽰，第⼆个及之后的图⽆法正常显⽰。
问题是这样的，⽤了两个tab切换，每个tab⾥⾯加载⼀个echarts图表，div的⼤⼩是百分⽐设置的，结果第⼀个echarts可以正常显⽰出来，第⼆个echarts被严重压缩了。查看了⼀下⽹页布局，发现div是有⼤⼩的，但是⾥⾯加载的echarts宽⾼都是0，这可能就是echarts显⽰过⼩的原因。
有以下三个解决办法：
1. 将div的宽⾼设置成固定值，⽐如style=”width:500px;height:500px”，这时候echarts有了明确的⼤⼩时候就可以正常显⽰出来了。（不过这个⽅法还是不好，固定值的
⾼宽⽆法⾃适应⽹页⼤⼩啊）
2. 在点击第⼆个tab的时候获取⽗div的宽和⾼，将具体的宽和⾼赋值给echarts，如何在这个⽅法⾥⾯初始化echarts，⽽不要再加载⽹页的时候就初始化。
具体的代码如下：
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#chart1" data-toggle="tab">tab1</a>
</li>
<li>
<a href="#chart2" data-toggle="tab" onclick="javascript:chartresize()">tab2</a>
</li>
<div class="tab-content">
<div class="tab-pane fade in active" id="chart1" ></div>
<div class="tab-pane fade" id="chart2"></div>
</div>
</ul>
chartresize()⽅法如下：
function chartresize(){
console.log("chartresize");
var temp = new initchart();
}
初始化echarts的⽅法如下：
var initchart = function(){
var chart2 = echarts.ElementById('chart2'));
var chart2_option={
series: [
{
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data:[
{value:10, name: 'pie1'},
{value:20, name: 'pie2'},
{value:10, name: 'pie3'},
]
}
]
}
chart2.setOption(chart2_option);
$(function(){
}
})
var ElementById('chart2');
var tabcontent = ElementById('tab-content');
width=tabcontent.offsetWidth;
height=tabcontent.offsetHeight;
chart2div.style.width=width+'px';
chart2div.style.height=height+'px';
}
}
这样每次在点击第⼆个tab的时候就会重新加载下chart2了，就不会出现chart过⼩的问题。
3、设置tab切换时候加载时间
代码如下：
$("a[data-toogle='tab']").on("shown.bs.tab",function(e){
var activeTab=$(e.target)[0].hash;
if(activeTab == "#tab1"){
}
if(activeTab == "#tab2"){
}
}
echarts的初始化跟正常的⽅式⼀样，不过记得将tab-content中的echarts⾼宽设为100%。
关键就是在tab转换的时候div是没有height的，所有要在标签页显⽰后有了width和height之后再加载图表。tab有show.bs.tab和shown.bs.tab两种，要选择shown显⽰后的
code案例
1 2 3 4 5 6 7$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { // 获取已激活的标签页的名称
var activeTab = $(e.target)[0].hash;
if(activeTab=="#day-div") loadDay();//加载图表
if(activeTab=="#week-div") loadWeek();
if(activeTab=="#month-div") loadMonth();
});
⽅式⼆
解决Echarts使⽤tab切换时只显⽰第⼀个tab中图表，其他tab中图表不显⽰或显⽰不全问题
近期项⽬中也使⽤到了Echarts来画图表，也是两个tab切换页⾯中都存在图表，页⾯加载完成后都对所有图表进⾏了初始化和绘制，然⽽在tab切换中出现了如下动图中的问题：
图中可以看到，第⼀个tab显⽰是很正常的，但是第⼆个tab中内容显⽰不完整。
我的解决⽅式如下：
1--在tab导航中加⼊radio单选按钮并隐藏，当第⼆个tab被选中的时候，再初始化图表数据，导航代码如下：
[html]
1. <ul class="tab-nav-list clearfix">
2.
3. <li class="active">
4. <label><span>数据分析</span>
5. <input class="tabToggle hide" type="radio" name="tabToggle" value="0"/></label>
6. </li>
7. <li>
8. <label><span>⽤户分析</span>
9. <input class="tabToggle hide" type="radio" name="tabToggle" value="1" /></label>
10. </li>
11. <li><span>页⾯分析</span></li>
12. </ul>
2--设置被选中监听函数，在第⼆个tab被选中时初始化图表：
[javascript]
1. initDataAnalyze();//第⼀个tab图表初始化
2. $(".tabToggle").click(function () {
3. if ($(this).val() == 1) {
4.
5. initUserAnalyze();//第⼆个tab图表初始化
6. }
7. });
经过以上两个步骤后得以正常显⽰，当然，再多个tab中也可以使⽤这种⽅式。
效果如下：
可惜的是没有我想要的，这个项⽬⽤地是easyUI组件及其样式。
⽅式三基于 vue.js 的element组件的觉得⽅案。
Vue解决echart在element的tab切换时显⽰不正确
来源：blog.csdn/SanJiK/article/details/79764429
最近在项⽬中遇到了这种情况，需要在tab控件上渲染多个echart图标，然后切换查看时，发现图表的宽度不正确
原因：在页⾯进⾏加载时，隐藏的图表不到对应的div⼤⼩，所以默认给了⼀个⼤⼩。所以要做的就是在页⾯加载时，就对图表进⾏初始化。
⽹上的解决⽅案⼤多都是监听tab的切换事件，然后再根据切换的页⾯重新渲染echart组件，⽐较⿇烦。如下是个⼈的解决⽅法：
原理：利⽤v-if属性，当切换⾄对应的tab时，设置其v-if的值为true即可，同时设置默认显⽰的tab
举例如下：
<el-tabs type="card" v-model="tabItem">
<el-tab-pane name="heart">
<span slot="label"><icon name="heart" scale="2"></icon>⼼率</span>
<baseline ref="heart" :chartData="{}" v-if="'heart' === tabItem"></baseline>
</el-tab-pane>
<el-tab-pane name="breath">
<span slot="label"><icon name="breath" scale="2"></icon>呼吸</span>
<baseline ref="breath" :chartData="{}" v-if="'breath' === tabItem"></baseline>
</el-tab-pane>
<el-tab-pane label="体动" name="move">
<span slot="label"><icon name="move" scale="2"></icon>体动</span>
<baseline ref="move" :chartData="{}" v-if="'move' === tabItem"></baseline>
</el-tab-pane>
</el-tabs>
这⾥默认tab为⼼率tab，当切换时，同⼀时刻只有⼀个v-if为true，当将其设置为true时，Vue会重新在页⾯渲染组件，即完成了组件渲染的步骤。
更新: 知乎某不知名⼤佬给了⼀个更加的简单的⽅法:
el-tab-pane添加上lazy=’true’属性即可
难过的时，我的项⽬⽤的是EasyUI组件及其样式，然⽽没到EasyUI的解决⽅案。
⼆、jquery EasyUI tabs 解决⽅案
1 EasyUI 官⽅⽂档
2发现⼏个有⽤的配置： width、height 、onSelect、resize。
简化后的代码：
html
<div id="tt" class="easyui-tabs" >
<div title="Tab1" >
tab1
</div>
<div title="Tab2" >
tab2
</div>
</div>
javascript
$(function () {
// 初始化时设置宽度和⾼度
$('#tt').tabs({
panewidth: $("#tt").parent().width(),
height: "auto",
onSelect:function(title,index){
console.log(title,index);
//切换的时候重新设置⾼度和宽度。
chartResize();
}
});
});
function chartResize() {
//改变 tab⼤⼩
$('#tt').tabs({
width: $("#tt").parent().width(),
height: "auto"
});
//重置⼤⼩，使其⼦模块也随之变化。如果没有这⼀步改变不会发⽣。
$("#tt").tabs("resize");
/
/以下是对Echarts 重置⽅法
//chart_size();
}
//窗⼝⼤⼩改变后，重新调整echarts⼤⼩
setTimeout("chartResize();", 100);
}
以上是对某个问题解决⽅法的提炼，本⼈并没有写Demo。
3 宽度解决了，echarts⾼度怎么⾃适应呢？
问题解决。
最终效果：
实际完整代码，内容太多太杂，可以不⽤看。
@{
var todayWeek = ViewBag.TodayWeek;
var todayYear = ViewBag.TodayYear;
var forecastDefaultRegion = System.Configuration.ConfigurationManager.AppSettings["ForecastDefaultRegion"];
}
<style type="text/css">
</style>
<div class="row">
<div class="col-md-6">
<table>
<tr>
<td><label id="lbselectRegion">地区:</label></td>
<td>
<select class="easyui-combobox" id="selectRegion" data-options="required:false,label: $('#lbselectRegion'),width:150,labelWidth:50"></select>
</td>
<td ></td>
<td><label id="lbselectVegetableType">品种选择:</label></td>
<td>
<select class="easyui-combobox" id="selectVegetableType" data-options="required:false,label: $('#lbselectVegetableType'),width:200,labelWidth:80"></select> </td>
</tr>
</table>
</div>
</div>
<!-- 700px-->
<div id="tt" class="easyui-tabs" >
<div title="价格预测" >
<div class="row">
<div class="col-md-6">
<table>
<tr>
<td><label id="lbselectTimeType">类型:</label></td>
<td>
<select class="easyui-combobox" id="selectTimeType" data-options="required:false,label: $('#lbselectTimeType'),width:150,labelWidth:50"></select>
</td>
</tr>
</table>
</div>
</div>
<div id="day" class="row">
<div class="col-md-12">
<div class="weui-loadmore" id="dayPrice_loadding">
<img src="~/Images/loading.gif" />
<span class="weui-loadmore__tips">正在加载</span>
</div>
<div id="dayPrice" >
</div>
</div>
</div>
<div id="week" class="row">
<div class="col-md-12">
<div class="weui-loadmore" id="weekPrice_loadding">
<img src="~/Images/loading.gif" />
<span class="weui-loadmore__tips">正在加载</span>
</div>
<div id="weekPrice" >
</div>
</div>
</div>
<div id="month" class="row">
<div class="col-md-12">
<div class="weui-loadmore" id="monthPrice_loadding">
<img src="~/Images/loading.gif" />
<span class="weui-loadmore__tips">正在加载</span>
</div>
<div id="monthPrice" ></div>
</div>
</div>
</div>
<div title="结果⽐较" >
<div class="row">
<div class="col-md-6">
<table>
<tr>
<td><label id="lbselectTimeTypeCompare">类型:</label></td>
<td>
<select class="easyui-combobox" id="selectTimeTypeCompare" data-options="required:false,label: $('#lbselectTimeTypeCompare'),width:150,labelWidth:50"></select>
</td>
</tr>
</table>
</div>
</div>
<div id="dayCompare">
<div class="row">
<div class="col-md-12">
<table>
<tr>
<td ></td>
<td><label id="lbDateStart" >开始⽇期:</label></td>
<td>
<input id="boxDateStart" class="easyui-datebox" />
</td>
<td ></td>
<td><label id="lbDateEnd" >结束⽇期:</label></td>
<td>
<input id="boxDateEnd" class="easyui-datebox" />
</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="dayPriceCompare" ></div>
</div>
</div>
</div>
<div id="weekCompare" >
<div class="row">
<div class="col-md-12">
<table>
<tr>
<td ></td>
<td><label id="lbyearStartSelect_Week">开始年:</label></td>
<td>
<select class="easyui-combobox" id="yearStartSelect_WeekCombox" data-options="required:false,label: $('#lbyearStartSelect_Week'),width:150,labelWidth:50"></select> </td>
<td ></td>
<td><label id="lbweekStartSelect">开始周:</label></td>
<td>
<select class="easyui-combobox" id="weekStartSelectCombox" data-options="required:false,label: $('#lbweekStartSelect'),width:150,labelWidth:50"></select>
</td>
<td ></td>
<td><label id="lbyearEndSelect_Week">结束年:</label></td>
<td>
<select class="easyui-combobox" id="yearEndSelect_WeekCombox" data-options="required:false,label: $('#lbyearEndSelect_Week'),width:150,labelWidth:50"></select> </td>
<td ></td>
<td><label id="lbweekEndSelect">结束周:</label></td>
<td>
<select class="easyui-combobox" id="weekEndSelectCombox" data-options="required:false,label: $('#lbweekEndSelect'),width:150,labelWidth:50"></select>
</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="weekPriceCompare" ></div>
</div>
</div>
</div>
<div id="monthCompare">
<div class="row">
<div class="col-md-12">
<table>
<tr>
<td ></td>
<td><label id="lbYearMonthStart" >起始年⽉:</label></td>
<td>
<input id="attYearMonthStart" editable="false" name="attYearMonthStart" class="easyui-datebox" />
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论