首页 > 其他分享 >react 中echarts-for-react使用resize解决图表自适应问题

react 中echarts-for-react使用resize解决图表自适应问题

时间:2024-03-25 17:12:27浏览次数:21  
标签:图表 useEventListener react import echarts resize

 

import React, { PureComponent } from "react";
import ReactEcharts from 'echarts-for-react';
import { useEventListener } from 'ahooks';

  useEventListener(
    'resize',
    () => {
        ref?.current?.getEchartsInstance()?.reresize;
    },
    
  );

 return (
            <ReactEcharts
              ref={ref}
              option={pieOption(distributionData?.parentModelInfoList || [], {})}
              style={{
                height: '320px',
                width: clientWidth,
              }}
            />
  );

 

标签:图表,useEventListener,react,import,echarts,resize
From: https://www.cnblogs.com/webqiand/p/18094831

相关文章

  • React Native 应用打包上架
    引言在将ReactNative应用上架至AppStore时,除了通常的上架流程外,还需考虑一些额外的优化策略。本文将介绍如何通过配置AppTransportSecurity、ReleaseScheme和启动屏优化技巧来提升ReactNative应用的上架质量和用户体验。配置AppTransportSecurity在iOS9引入的......
  • 基于 React 的今日热门榜单平台
    前言花了几天时间,收集了微博、抖音、百度等一些热门平台的API接口,使用React搭建了一个热门榜单汇总,全网热点尽览无余。项目信息项目预览:今日热榜前端技术栈:React、Vite、AntdGithub:react-daily-hot效果预览热点平台Logo平台类别接口地址微博热搜榜weibo哔哩哔......
  • React Native 应用打包上架
     引言在将ReactNative应用上架至AppStore时,除了通常的上架流程外,还需考虑一些额外的优化策略。本文将介绍如何通过配置AppTransportSecurity、ReleaseScheme和启动屏优化技巧来提升ReactNative应用的上架质量和用户体验。 配置AppTransportSecurity在iOS9引入的......
  • 关于浏览器resize的一些问题
    谷歌浏览器(当前版本是:版本92.0.4515.159(正式版本)(64位),目前最新版也一样有该问题)添加了resize监听时,在缩小窗口时,如果宽度和高度都发生了变化,就会触发两次,而放大时,不论是否宽度高度都改变,都只会触发一次。而如果在缩小时只调整了宽度或者高度中的一个,则只会触发一次。其他浏......
  • 微信小程序使用echarts(三)
    一、新问题在根据前两个步骤完成小程序图表的显示之后,发现echarts过大,导致小程序超过2m二、解决过程1、根据官网上的提示进行图表定制,同时注意官网上的echarts.js版本和定制版本需要一致,以防出现版本原因导致的其他问题2、在定制完成,并且将定制的echarts.min.js替换掉原来的ec......
  • vue3项目中使用echarts实现中国地图大区任意分区
    最终效果:背景:项目需要在中国地图上显示各大区的库存情况,使用echarts将下载的中国地图挂载后,好家伙,全是一块块的省份,再定睛一看,我这项目需求的大区咋只有6个,好好好,看来得探索一波如何将各省份自定义为大区了。1.echarts、中国地图json文件下载echarts下载:npminstallecha......
  • echarts.js画折线图
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><scriptsrc="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script></head><body><divid="w......
  • 前端Vue篇之Vue3响应式:Ref和Reactive
    目录Vue3响应式:Ref和ReactiveRef和Reactive概述用途Ref基本用法及在setup()中的使用基本用法在setup()中使用`<scriptsetup>`语法为何使用refReactive基本概念及在模板中的使用基本概念在模板中使用Reactive深层响应式与Ref区别为何使用ReactiveRef和Reactive比较和......
  • react中什么时候使用useRef,直接在外层定义普通的变量可以吗
    react中什么时候使用useRef,直接在外层定义普通的变量可以吗在React中,useRef主要是用来创建一个可变的引用对象,它可以用来保存任何可变值,而且这个引用在组件重新渲染时始终保持不变。以下是几个典型使用场景:访问DOM元素:当你需要直接访问HTML元素时,可以使用useRef创建一个引......
  • new ReactRefreshWebpackPlugin({ overlay: false, }), 作用是什么
    ReactRefreshWebpackPlugin是一个专门为React应用程序提供快速热更新(FastRefresh/HotReloading)的Webpack插件。当你的React组件代码发生变化时,它能够自动重新渲染受影响的组件,而不是刷新整个页面,从而显著提升开发效率。配置项中的overlay:false表示禁用错误提示覆......