echarts图表随屏幕自适应不变形

最新推荐文章于 2023-02-22 15:02:49 发布

HerayChen

最新推荐文章于 2023-02-22 15:02:49 发布

阅读量599

点赞数 1

分类专栏：笔记文章标签： js echarts

本文链接：https://blog.csdn.net/qq_45832807/article/details/116230644

版权

笔记专栏收录该内容

145 篇文章 6 订阅

订阅专栏

这篇博客介绍了如何使用ECharts库在网页中初始化一个名为`weekOnYear`的图表，并确保它在窗口大小调整时能自适应，保持图表的正确显示。主要涉及ECharts的初始化、设置选项以及监听窗口resize事件来调用resize方法。

摘要由CSDN通过智能技术生成

resize之前
在这里插入图片描述

 <div id="weekOnYear" style="width: 100%;height: 300px;" class="canvas-wrap"></div>

  import * as echarts from 'echarts';
  drawWeekOnYear(weekOnYearStatistic: LineChartBean){
  	  // 获取echarts操作的画布
      let weekOnYear = echarts.init(document.getElementById('weekOnYear'));
      // 给画布添加图表数据
      weekOnYear.setOption({});
       // 图表自适应（屏幕缩放图表不变形）
       window.addEventListener('resize', () => {
            weekOnYear.resize();
        });
  }