快捷導(dǎo)航

echart自適應(yīng)寬度的兩種方法實(shí)例

更新時(shí)間：2022年12月14日 09:39:16 作者：假裝是個(gè)web狗

最近工作中element后臺(tái)管理使用Echarts圖表,在使用過程中也遇到了些問題,下面這篇文章主要給大家介紹了關(guān)于echart自適應(yīng)寬度的兩種方法,需要的朋友可以參考下

1.一個(gè)頁面多個(gè)圖表的自適應(yīng)寬度可以用

注意：應(yīng)寫在多個(gè)圖表的后面，不能一個(gè)一個(gè)寫，會(huì)發(fā)生錯(cuò)誤

//根據(jù)窗口的大小變動(dòng)圖表 
window.onresize = function(){
    myChart.resize();
    myChart1.resize();    //若有多個(gè)圖表變動(dòng)，可多寫
 
}

2.若是一個(gè)頁面的多個(gè)圖表需要分別監(jiān)聽改變寬度的話用（可以一個(gè)一個(gè)寫）

window.addEventListener("resize",function(){
     myChart.resize();
});

3.若是要自適應(yīng)高度和寬度的話

首先你的初始div 必須有初始的高度和寬度（因?yàn)閑chart繪制需要寬和高）
需要寫一個(gè)JavaScript方法去獲取你當(dāng)前div 的高度和寬度；
然后通過監(jiān)聽事件去監(jiān)聽你當(dāng)前高度和寬度的變化

例如：

// es5
function fn(){//用于使chart自適應(yīng)高度和寬度,通過窗體高寬計(jì)算容器高寬
    //var height=$("#divID").height()
    //或
    var height=document.getElementById("divID").offsetHeight
    var width=document.getElementById("divID").offsetWidth
};
 
fn ();//設(shè)置容器高寬
 
//窗口大小發(fā)生了變化，代碼：
//方法1
window.onresize = function () {//用于使chart自適的方法  
    fn ();//重置容器高寬
    myChart.resize();
}
 
//方法2
window.addEventListener("resize",function(){   //監(jiān)聽
    fn ();//重置容器高寬
    myChart.resize();
})

附：echart多圖表切換時(shí)圖表寬度變成100px，而不是100%

現(xiàn)頁面中有如下圖表需要顯示

現(xiàn)我希望頁面在進(jìn)行縮放的時(shí)候，圖表大小也跟著變。首先想到的就是寬度設(shè)置為100%，但是當(dāng)我在“總計(jì)”，“加分”，“扣分”之前切換時(shí)，發(fā)現(xiàn)圖表寬度變成了100px（如果你設(shè)置的寬度是固定大小的，比如500px，那就不會(huì)有這個(gè)問題），這是echart本身的原因。那么如何解決圖表自適應(yīng)問題呢，現(xiàn)在有如下代碼（只展示了主要的部分代碼）

<!--圖表容器-->
<div class="tab-pane active" id="total">
    <!-- 總計(jì)容器 -->
    <div id="total_chart" style="width: 100%;height:518px;"></div>
</div>
<div class="tab-pane" id="add">
    <!-- 加分容器 -->
    <div id="add_chart" style="width: 100%;height:518px;"></div>
</div>
<div class="tab-pane" id="deduction">
    <!-- 扣分容器 -->
    <div id="deduction_chart" style="width: 100%;height:518px;"></div>
</div>
<script>
    $.get('請(qǐng)求的url', function (response) {
            var total_id = "total_chart";
            var add_id = "add_chart";
            var deduction_id = "deduction_chart";
            // 總計(jì)表
            chart(total_id);
            // 加分表
            chart(add_id);
            // 扣分表
            chart(deduction_id);
        }, 'json')
    function chart(chart_id) {
        var myChart = echarts.init(document.getElementById(chart_id));
        var myOption;
        // 省略大部分代碼
        // 使用制定的配置項(xiàng)和數(shù)據(jù)顯示圖表
        myChart.setOption(myOption);
        // 監(jiān)聽點(diǎn)擊事件
        window.addEventListener("click", function () {
            myChart.resize();
        });
        // 監(jiān)聽瀏覽器頁面縮放事件
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
</script>

echart中的chart.resize()就可以實(shí)現(xiàn)，所以我們需要做的就是如何在頁面進(jìn)行縮放或者切換tab時(shí)，觸發(fā)這個(gè)resize()操作呢？注意上面代碼中的兩個(gè)事件監(jiān)聽。

第一個(gè)是監(jiān)聽點(diǎn)擊操作。只要你切換頁面中的“總計(jì)”，“加分”，“扣分”，那么就會(huì)觸發(fā)myChart.resize()，這樣圖表的大小就會(huì)發(fā)生改變，因?yàn)槲覀冊(cè)O(shè)置width是100%，所以它就會(huì)根據(jù)當(dāng)前圖表容器來進(jìn)行變化。

第二個(gè)是頁面縮放事件，道理和點(diǎn)擊是一樣的。建議兩個(gè)都寫，這樣無論是你切換tab，還是頁面縮放，圖表大小都會(huì)跟著變化的。

總結(jié)

到此這篇關(guān)于echart自適應(yīng)寬度的文章就介紹到這了,更多相關(guān)echart自適應(yīng)寬度內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: