1 问题背景 顾问反馈大屏在反复切换的过程中，页面会出现白屏，导致后续的操作无法进行，只能通过刷新页面才能恢复正常。 我们的页面类似于这样的布局（下方的是直接从网络上找的截图） 点击下方红线框住的区域

前言 技术栈 依赖引入 首先为了解决echarts的全量引入问题，我们需要单独书写一个echarts依赖引入文件，文件内部之引入我们需要使用的echarts依赖, 通过我们引入部分的 echarts/

通过矩阵的方式用 `Canvas` 实现以鼠标当前位置为原点缩放及画布拖动，理解起来更加容易，大大减少了代码量，同时缩放和拖拽的逻辑可以复用

在前端开发中，有些时候会遇到根据鼠标当前位置为原点，滚动滚轮实现图片、canvas、DOM元素缩放的需求。有些同学可能觉得有点难，但其实借助线性代数中的矩阵运算，可以非常容易地实现这一功能

本文会带大家认识Canvas中常用的坐标变换方法 translate 和 scale，并结合这两个方法，实现鼠标滚轮缩放以及画布拖动功能。

效果 预览地址 https://code.juejin.cn/pen/7272286843029979171 前言 刚好看到这么一个东西，甘特图，然后又发现好像echarts 里面没有这个图形渲染，也

最近有个图表需求配置十分头疼。所以想手写实现一个交互体验还不错的曲线图，支持开场动画、自动根据父盒子宽度适配、比echarts更全的配置项，分区线段的可以更好的自定

我们需要将内容在一屏里全部展示出来。这就需要页面的内容宽高能像图片一样自由缩放填满整个屏幕。这种填满整个屏幕的方式可以理解为锁定屏幕宽高比。

echart 窗口---自适应字体 : 1.在utils文件夹中新建index.js 使用: 在页面中引入