Echarts多个图表自适应大小(亲测有效)

本文探讨了Echarts图表在前端开发中如何实现自适应大小的问题。针对onresize方法无效的情况,作者通过试验发现,结合addEventListener和onresize,可以在设置option后使Echarts图表成功自适应,特别适用于多张图表的场景。此方法需要依赖jQuery,且目前网络上对此解决方式的介绍较少。
摘要由CSDN通过智能技术生成
	用Echarts在同一个页面插入了两个图后想让这两个图都自适应页面的大小,网上提供了很多方法,但这些方法都
没法解决问题,于是我尝试将几种方法中的一些特性进行结合终于解决了问题,由于网上没有看到这个方法寻找解决办
法的过程中耗费了大量时间,所以想写这篇文章希望能帮助遇到相同问题的人。

注意

	在同一页面插入两个图的方式我感觉还是有区别的,有的图是一个option里面集成了两张图,这种其实就是一张
图,只是分了两个部分,直接用onresize即可,而我是进行了两次myChart.setOption(option);一开始的方案是在
body里面插入两个script,将两个部分分开画图但是看了似乎两个图自适应要在一个script里面分别对两张图进行自
适应,就合成了一个script,而若使用onresize则出现了一个很普遍的问题:只有最后一张图自适应而第一张图没法
自适应;但是又看了一些文章说addEventListener可以让两张图都成功自适应但实则没有任何效果,连一张图自适应
都没了。

如下,注意所有的自适应代码段都要在setOption之后,此法没有效果。

myChart.setOption(option);
myChart1.setOption(option);
window.addEventListener("resize",function(){
			myChart.resize();
			myChart1.resize();
});

事实上很多文章里面提到的onresize方法也是没有任何效果,具体原因未知,格式也是类似上方代码,而成功实现一张图自适应的代码是这样的。(注:这种方法需要借助jquery,此法不适用两张图)

    myChart.setOption(option);
    window.onresize = function () {
			height= $(window).height();
			myChart.getDom().style.height = this.height+ "px";
      width= $(window).width();
			myChart.getDom().style.width = this.width+ "px";
			myChart.resize();}

于是在尝试了几十种方法并查看了文档后,我想到了addEventListener和onresize成功的情况,想着是否能将onresize成功的代码段用在addEventListener上,最终尝试后,成功。

      myChart.setOption(option);

      window.addEventListener("resize",function()
  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Echarts是一个功能强大的数据可视化库,能够生成各种类型的图表。在Vue3框架下使用Echarts绘制多个图表时,可以实现自适应的效果。具体实现方法如下: 第一步,安装Echarts和Vue3,可以通过npm安装。使用以下命令: ``` npm install echarts --save npm install vue@next --save ``` 第二步,在Vue3中使用Echarts,需要在组件上挂载ref属性,在mounted生命周期函数中初始化Echarts图表。示例代码如下所示: ``` <template> <div ref="chartDom"></div> </template> <script> import * as echarts from 'echarts'; export default { name: 'EchartsChart', mounted() { const chartDom = this.$refs.chartDom; const myChart = echarts.init(chartDom); // 以下为Echarts图表配置项和数据 } } </script> ``` 第三步,使用Vue3的响应式数据,监听窗口大小的变化,并在窗口大小发生改变时重新绘制Echarts图表。示例代码如下所示: ``` <template> <div ref="chartDom"></div> </template> <script> import { onMounted, onBeforeUnmount, ref } from 'vue'; import * as echarts from 'echarts'; export default { name: 'EchartsChart', setup() { const chartDom = ref(null); let myChart; onMounted(() => { myChart = echarts.init(chartDom.value); window.addEventListener('resize', handleChartResize); handleChartResize(); }); onBeforeUnmount(() => { window.removeEventListener('resize', handleChartResize); }); function handleChartResize() { myChart.resize(); } return { chartDom, }; }, }; </script> ``` 通过以上方法,即可实现多个Echarts图表自适应效果。在Vue3的setup函数中,使用ref定义响应式的DOM节点,并在mounted函数中初始化Echarts实例。使用onMounted和onBeforeUnmount函数进行生命周期监听,监听窗口大小的变化并在窗口大小发生改变时重新绘制图表。最终返回chartDom,即可在模板中使用。<br>
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

清辉映夜凝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值