echarts圖表大小隨着窗口大小調整以及echarts圖表的媒體查詢

主要是resize()方法

基本使用方法摘要：

this.myChart=this.$echarts.init(document.getElementById('myEchartEle')) //init方法：創建一個 ECharts 實例 this.myChart.resize(); //resize方法:eCharts自帶的API,用於改變圖表尺寸，在容器大小發生改變時需要手動調用。 //結合onresize的話：
let that= this 
window.onresize = function() {
　　that.myChart.resize(); 
}

 具體的使用根據具體情境自行封裝;

下面上我的代碼,可供參考:

這次寫的是vue項目，我在src->assets->js文件夾下新建了chartResize.js文件，寫入了下述代碼：

function chartResize(eleArr) {
　　//eleArr是一個數組，因為有些頁面可能有多個echart圖表，而每個頁面只調用一次該方法，所以統一傳入
    setTimeout(() => {
      //注：此處要用addEventListener,如果用 window.onresize = function(){},如果別的組件也用了onresize事件，就容易覆蓋掉此處的函數
      window.addEventListener("resize", function () {
        for(let i=0;i<eleArr.length;i++){
          //里面那層定時器是為了在頁面存在多個圖時，resize方法的調用時間微微錯開，避免明顯的卡頓
          setTimeout(() => {
            eleArr[i].resize()
          },100*i)
        }
      })
    },100)
}
export {chartResize}

 將上述函數在main.js引入並注冊：（因為絕大多數頁面都要調用這個函數）

import {chartResize} from './assets/js/chartResize'
Vue.prototype.$chartResize = chartResize
//在原型鏈中注冊，然后在需要的頁面調用：this.$chartResize()

 

使用時：

template:

<template>
    <div class="index">
         <div class="index-chartBox">
            <div id="indexEle1" class="index-perChart"></div>
            <div id="indexEle2" class="index-perChart"></div>
            <div id="indexEle3" class="index-perChart"></div>
         </div>
    </div>
</template>        

script:

mounted(){
　　this.indexChart1=this.$echarts.init(document.getElementById('indexEle1'))
　　this.indexChart2=this.$echarts.init(document.getElementById('indexEle2'))
　　this.indexChart3=this.$echarts.init(document.getElementById('indexEle3'))
      
　　this.$chartResize([this.indexChart1,this.indexChart2,this.indexChart3])//調用前文封裝的chartResize函數，傳入了一個長度為3的數組；

},

css:

注意圖表容器的寬度不要寫死，用百分比。

#indexEle1,#indexEle2,#indexEle3{
　　margin:0 auto;
　　width:100%;
　　min-width: 300px;
　　height:300px;
}

 

上文的chartResize方法，還可以改成函數節流或者函數防抖版本，以優化性能：

//以下是函數防抖（在用戶連續調整窗口大小的時候，只有在調整停止的時候才會執行method（會有一定的延遲性 ），優化性能，避免頻繁的調用handlerResize()。)
function debounce(method,params){
  let timer=null;
  return function(){
    clearTimeout(timer);
    timer=setTimeout(function(){
      method(params)  //即調用handlerResize，params即傳入的參數eleArr
    },300);
  }
}

//也可以用函數節流的方式(函數節流跟函數防抖相比，看起來更流暢些)：
function throttle(method,params){
  let  begin=new Date();
  return function(){
    let current=new Date();
    if(current-begin>=200){
      method(params)  //即調用handlerResize，params即傳入的參數eleArr
      begin=current; //重置begin,將current賦值給begin
    }
  }
}

function handlerResize(eleArr){
  console.log('執行了resize方法')
  for(let i=0;i<eleArr.length;i++){
    //里面那層定時器是為了在頁面存在多個圖時，resize方法的調用時間微微錯開，避免明顯的卡頓
    setTimeout(() => {
      eleArr[i].resize()
    },50*i)
  }
}

function chartResize(eleArr){
  //注：此處要用addEventListener,如果用 window.onresize = function(){},在別的組件也用了onresize事件的情況下，就容易覆蓋掉此處的函數
  window.addEventListener("resize", debounce(handlerResize,eleArr)) //使用函數防抖的方式
  // window.addEventListener("resize", throttle(handlerResize,eleArr)) //使用函數節流的方式
}
export {chartResize}

 

 

echarts圖表的媒體查詢：

參考文檔：https://echarts.baidu.com/tutorial.html#%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94

官方文檔摘要：

要在 option 中設置 Media Query 須遵循如下格式：

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

　media的配置示例：

media: [
   
    {
        query: {
            maxWidth: 500               // 當容器寬度小於 500 時。
        },
        option: {
            legend: {
                right: 10,              // legend 放置在右側中間。
                top: '15%',
                orient: 'vertical'      // 縱向布局。
            },
            series: [                   // 兩個餅圖上下布局。
                {
                    radius: [20, '50%'],
                    center: ['50%', '30%']
                },
                {
                    radius: [30, '50%'],
                    center: ['50%', '75%']
                }
            ]
        }
    },
    ...
]

echarts圖表的媒體查詢有需要的話我有空上自己的demo