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

 

posted @ 2019-03-12 15:22  几何柒期  阅读(4952)  评论(1编辑  收藏  举报