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

 

转载于:https://www.cnblogs.com/nuonuo-D/p/10516937.html