当前位置:网站首页>[echart] resize lodash to realize chart adaptation when window is zoomed
[echart] resize lodash to realize chart adaptation when window is zoomed
2022-07-05 16:28:00 【533_】
<template>
<div ref="chart" class="chart" />
</template>
import echarts from 'echarts';
import {
debounce } from 'lodash';
echarts Inside resize() + throttle
data() {
return {
chart:null
};
},
mounted() {
this.init();
// lodash.debounce Shake proof
this.resizeHandler = debounce(() => {
if (this.chart) {
this.chart.resize();
}
}, 100);
// monitor resize
window.addEventListener('resize', this.resizeHandler);
},
beforeDestroy() {
window.removeEventListener('resize', this.resizeHandler);
},
methods: {
init() {
this.chart = echarts.init(this.$refs.chart);
const option = {
......
};
this.chart.setOption(option);
},
},
Use echarts.resize() Realize chart adaptation when window is zoomed
边栏推荐
猜你喜欢
Oneforall installation and use
CISP-PTE之SQL注入(二次注入的应用)
Flet教程之 09 NavigationRail 基础入门(教程含源码)
清晰还原31年前现场,火山引擎超清修复Beyond经典演唱会
The visual experience has been comprehensively upgraded, and Howell group and Intel Evo 3.0 have jointly accelerated the reform of the PC industry
【网易云信】超分辨率技术在实时音视频领域的研究与实践
项目中批量update
scratch五彩糖葫芦 电子学会图形化编程scratch等级考试三级真题和答案解析2022年6月
五种常见的咨询公司谈判策略以及如何维护自己的利益
ES6 deep - ES6 class class
随机推荐
Batch update in the project
HiEngine:可媲美本地的云原生内存数据库引擎
Research and development efficiency measurement index composition and efficiency measurement methodology
搜索 正排索引 和 倒排索引 区别
Win11如何给应用换图标?Win11给应用换图标的方法
《21天精通TypeScript-3》-安装搭建TypeScript开发环境.md
新春限定丨“牛年忘烦”礼包等你来领~
Background system sending verification code function
漫画:什么是分布式事务?
Spring Festival Limited "forget trouble in the year of the ox" gift bag waiting for you to pick it up~
Some cognitive thinking
The new version of effect editor is online! 3D rendering, labeling, and animation, this time an editor is enough
Flet教程之 12 Stack 重叠组建图文混合 基础入门(教程含源码)
Enterprise backup software Veritas NetBackup (NBU) 8.1.1 installation and deployment of server
The difference between abstract classes and interfaces
一些認知的思考
Domestic API management artifact used by the company
obj解析为集合
Find the root of the following equation by chord cutting method, f (x) =x^3-5x^2+16x-80=0
Flet教程之 11 Row组件在水平数组中显示其子项的控件 基础入门(教程含源码)