当前位置:网站首页>[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
边栏推荐
- 【毕业季】作为一名大二计科在校生,我有话想说
- Solve the Hanoi Tower problem [modified version]
- 抽象类中子类与父类
- Subclasses and superclasses of abstract classes
- The visual experience has been comprehensively upgraded, and Howell group and Intel Evo 3.0 have jointly accelerated the reform of the PC industry
- 【学术相关】多位博士毕业去了三四流高校,目前惨不忍睹……
- DeSci:去中心化科学是Web3.0的新趋势?
- Research and practice of super-resolution technology in the field of real-time audio and video
- The new version of effect editor is online! 3D rendering, labeling, and animation, this time an editor is enough
- Cartoon: what is blue-green deployment?
猜你喜欢
随机推荐
漫画:什么是MapReduce?
17. [stm32] use only three wires to drive LCD1602 LCD
scratch五彩糖葫芦 电子学会图形化编程scratch等级考试三级真题和答案解析2022年6月
Boost the development of digital economy and consolidate the base of digital talents - the digital talent competition was successfully held in Kunming
Transaction rollback exception
Win11如何给应用换图标?Win11给应用换图标的方法
求解汉诺塔问题【修改版】
The difference between abstract classes and interfaces
[深度学习][原创]让yolov6-0.1.0支持yolov5的txt读取数据集模式
视觉体验全面升级,豪威集团与英特尔Evo 3.0共同加速PC产业变革
Reduce the cost by 40%! Container practice of redis multi tenant cluster
抽象类和接口的区别
Desci: is decentralized science the new trend of Web3.0?
《MongoDB入门教程》第04篇 MongoDB客户端
ES6 deep - ES6 class class
记一次'非常诡异'的云安全组规则问题排查过程
Domestic API management artifact used by the company
详解SQL中Groupings Sets 语句的功能和底层实现逻辑
The list set is summed up according to a certain attribute of the object, the maximum value, etc
用键盘输入一条命令








