Echarts图表自适应？你可以这样做

2024-05-16 21:32:09

一、图表变形

使用 Echarts 绘制图表时，可能会遇到变形的问题。如下图：

其原因是 Echarts 在初始化实例的时候，对应 dom 元素的宽高还没有确定。

解决方案也很简单：监听对应 dom 元素，如果大小发生变化，调用resize()方法。

import echarts from 'echarts';

...

const chartDom = document.getElementById('myChart');let myChart = echarts.init(chartDom);// 若dom尺寸变化，则resizeconst chartObserver = new ResizeObserver(() => {    myChart.resize();});chartObserver.observe(chartDom);

二、自适应解决方案

自适应是浏览器窗口变化的时候，echarts 图表大小能够相应的变化。可通过监听浏览器窗口实现。

window.onresize = () => {    myChart.resize();}

多个 echarts 图的话，则

window.onresize = () => {    myChart1.resize();    myChart2.resize();}

个别时候，也会遇到myChart1与myaChart2不在同一个作用域内，如果多次调用window.onresize()，后一个将会覆盖掉前一个。如下：

window.onresize = () => {    myChart1.resize();}

...

// 后一个执行的代码会覆盖掉前一个window监听window.onresize = () => {    myChart2.resize();}

这时，可以使用window.addEventListener('resize', callback)来避免监听被覆盖：

window.addEventListener('resize', () => {    myChart1.resize();}, false); // false代表事件句柄在冒泡阶段执行

...

window.addEventListener('resize', () => {    myChart2.resize();}, false);

当然，也可以跟最上面的处理一样，使用ResizeObserver分别监听对应 dom 元素，调用resize()解决。

「参考资料：」

「ResizeObserver API」：https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver

本文由 mdnice 多平台发布

Echarts图表自适应？你可以这样做相关推荐

vue使用echarts图表自适应的几种解决方案
这篇文章主要给大家介绍了关于vue使用echarts图表自适应的几种解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 1. ...
echarts图表自适应（窗口大小变化时echarts图表重新渲染）
echarts图表自适应(窗口大小变化时echarts图表重新渲染) 用第一种写法会存在问题,当有多个echarts的时候,只有一个生效是因为 JS 绑定事件的时候,通过 .on 方式和 addE ...
[echarts] 图表自适应宽高大小
<div class="echart-wrap" :ref="wrapId" :id="wrapId" ><div :re ...
Vue中使echarts图表自适应
Vue中使echarts图表自适应 1.先在main.js中自定义一个全局指令,如下 // 定义全局指令 Vue.directive('resize', { // 使用局部注册指令的方式// 指令的名 ...
Echarts图表自适应宽高大小
最近项目用到了Echarts,他要求在容器上以行内样式固定宽高.这就无法按照浏览器大小进行自适应调整.经过一番纠结发现了解决方法. 官网描述的截图如下: 这个设计,多少有那么一点不够灵活. 我这个项目 ...
echarts 坐标自适应,实现 ECharts 图表自适应
数据可视化的需求越来越多,图表自动生成技术也日渐成熟 ECharts ECharts 的功能十分强大,可以生成多种形式的图表,配置项十分灵活,可以根据实际需求自由定制官方文档: https://ww ...
echarts图表自适应浏览器、盒子宽高
一.出现的问题二.想要的效果三.实现步骤 1.在html中,一定要写宽高100% <div id="main" style="width: 100%; heig ...
echarts图表自适应
当页面上只引入一个图表 window.οnresize= () =>{ myEchart.resize() } 当引入多个时,上面的方法只会影响最后一个图表 window.addEventLis ...
基于VUE的echart图表自适应窗口大小变化插件开发
需求在PC端开发含图表展示的页面时,需要考虑用户调整浏览器窗口大小后图表能够根据窗口大小自适应变化. 常规做法在含有图表组件mounted的钩子中增加监听window的resize事件,具体如下代 ...

最新文章

热门文章