当前位置:网站首页>[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
边栏推荐
- 有序链表集合求交集 方法 总结
- List uses stream flow to add according to the number of certain attributes of the element
- Solve the Hanoi Tower problem [modified version]
- Oneforall installation and use
- obj集合转为实体集合
- 普洛斯数据中心发布DC Brain系统,科技赋能智慧化运营管理
- One click installation script enables rapid deployment of graylog server 4.2.10 stand-alone version
- yarn 常用命令
- 极坐标扇图使用场景与功能详解
- Record a 'very strange' troubleshooting process of cloud security group rules
猜你喜欢
极坐标扇图使用场景与功能详解
Intel 13th generation Raptor Lake processor information exposure: more cores, larger cache
中间表是如何被消灭的?
Coding devsecops helps financial enterprises run out of digital acceleration
Use of set tag in SQL
Cs231n notes (top) - applicable to 0 Foundation
Data Lake (XIV): spark and iceberg integrated query operation
有序链表集合求交集 方法 总结
英特尔第13代Raptor Lake处理器信息曝光:更多核心 更大缓存
Single merchant v4.4 has the same original intention and strength!
随机推荐
[graduation season] as a sophomore majoring in planning, I have something to say
公司自用的国产API管理神器
给自己打打气
英特尔第13代Raptor Lake处理器信息曝光:更多核心 更大缓存
Migrate /home partition
极坐标扇图使用场景与功能详解
一键安装脚本实现快速部署GrayLog Server 4.2.10单机版
Five common negotiation strategies of consulting companies and how to safeguard their own interests
Cartoon: what is the eight queens problem?
求解汉诺塔问题【修改版】
单商户 V4.4,初心未变,实力依旧!
Record the pits encountered in the raspberry pie construction environment...
Research and development efficiency measurement index composition and efficiency measurement methodology
阿掌的怀念
vant popup+其他组件的组合使用,及避坑指南
搜索 正排索引 和 倒排索引 区别
Spring Festival Limited "forget trouble in the year of the ox" gift bag waiting for you to pick it up~
【漏洞预警】CVE-2022-26134 Confluence 远程代码执行漏洞POC验证与修复过程
Desci: is decentralized science the new trend of Web3.0?
Cheer yourself up