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
(*╹▽╹*)几何柒期的blog