vue electron自適應

問題：

pc端自適應。

移動端自適應。

 

解決方案：

pc: 

　　一個圖，

window.onresize = function () {
    myChart.resize();            
}

　　多個圖，代碼寫在同一個方法中，

window.onresize = function () {
    myChart.resize();
    myChart1.resize(); 
    myChart2.resize();   //以此類推添加多個echarts圖形的名稱
}              

　　多個圖，不同的js中，調用 addEventListener

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

 

移動端：

　　設置最大長度，寬度，長寬比。列舉情況：

option = {
    baseOption: { // 這里是基本的『原子option』。
        title: {...},
        legend: {...},
        series: [{...}, {...}, ...],
        ...
    },
    media: [ // 這里定義了 media query 的逐條規則。
        {
            query: {...},   // 這里寫規則。
            option: {       // 這里寫此規則滿足下的option。
                legend: {...},
                ...
            }
        },
        {
            query: {...},   // 第二個規則。
            option: {       // 第二個規則對應的option。
                legend: {...},
                ...
            }
        },
        {                   // 這條里沒有寫規則，表示『默認』，
            option: {       // 即所有規則都不滿足時，采納這個option。
                legend: {...},
                ...
            }
        }
    ]
};

主要用在移動端~ 詳情見 echarts官網

------------------------------------------------------------

根據語言也可以寫做下列：

單：

window.onresize = this.chartPie.resize;

多：

window.addEventListener('resize', this.chartPie.resize);

 ----------------------------------------------------------

 

結束語：使用echarts的時候實例代碼中，option需要  const定義一下。

 

 

如果對你有幫助，點贊點贊！！！