背景介紹
項(xiàng)目中經(jīng)常會(huì)用到使用圖表來(lái)展示數(shù)據(jù)的方式辙培，作為國(guó)內(nèi)的開發(fā)者，我們會(huì)優(yōu)先選擇使用Echarts圖表，一般情況下我們都是在頁(yè)面上展示一個(gè)圖表；但是最近在項(xiàng)目中遇到一個(gè)需要點(diǎn)擊切換tab標(biāo)簽來(lái)顯示Echarts圖表网严，當(dāng)然了這樣也是能做的，那我們可以采用異步加載的方式來(lái)進(jìn)行顯示嗤无，但是呢震束，在我目前的項(xiàng)目中采用這種異步加載的方式特別麻煩，所以只能選擇采用在加載頁(yè)面的時(shí)候当犯，就將2個(gè)tab標(biāo)簽頁(yè)的數(shù)據(jù)都顯示出來(lái)垢村，tab標(biāo)簽頁(yè)的第一個(gè)Echarts圖表顯示正常，點(diǎn)擊切換tab頁(yè)面時(shí)第二個(gè)頁(yè)面顯示不正常嚎卫，各種搜索之后得到解決辦法：需要將第二個(gè)圖表resize操作嘉栓，因?yàn)榈诙€(gè)圖表中style=“display：none的”，默認(rèn)是沒(méi)有寬度和高度的拓诸，下面先展示處理前的圖表和處理后的圖表侵佃。
處理前
處理后
既然找到了處理的辦法，那接下來(lái)就是如何實(shí)現(xiàn)它恰响。
HTML代碼
<div class="tabJs">
<div class="Tab_Cont">
<div class="cur">
<div id="index_main01" style="width:96%; height: 5.3rem;margin: 0 auto;"></div>
</div>
<div>
<div id="index_main0100" style="width:96%; height: 5.3rem;margin: 0 auto;"></div>
</div>
</div>
<ul class="echartsUl">
<li class="active">
<a class="echartsSub" style="color: #519ee8;"><span><img src="__IMG__/zengzhanglu.png" /></span>凈值增長(zhǎng)率</a>
</li>
<li>
<a class="echartsSub"><span><img src="__IMG__/jingzhi1.png" /></span>凈值走勢(shì)</a>
</li>
</ul>
</div>
js代碼
<script>
$(function() {
$(".tabJs .echartsUl li").click(function(){
var this_index = $(this).index();
var this_tabjs = $(this).parents(".tabJs");
this_tabjs.find(".echartsUl li").removeClass("active");
$(this).addClass("active");
this_tabjs.find(".Tab_Cont >div").removeClass("cur");
this_tabjs.find(".Tab_Cont >div").eq(this_index).addClass("cur");
var optId = this_tabjs.find(".Tab_Cont >div").eq(this_index).find('div').attr("id");
var chart = echarts.init(document.getElementById(optId));
// 手動(dòng)初始化圖表
chart.resize();
});
})
</script>
當(dāng)然需要在開始的地方引入Echarts插件趣钱。
總結(jié)：
- 加載頁(yè)面時(shí)將tab標(biāo)簽中2個(gè)圖表的數(shù)據(jù)都加載過(guò)來(lái)。
- 點(diǎn)擊切換時(shí)胚宦，將第二個(gè)要展示的圖表ID獲得首有，然后初始化第二個(gè)圖表燕垃，最后調(diào)用它的resize()方法。
