echarts 图表 pc && 移动端自适应方案

因为公司主要做前端数据可视化项目的，因此有些项目需要有大屏展示的效果，所以一般公司的项目，设计那边给出的设计稿都是 1920*1080 的。

数据可视化，肯定是离不开数据图表的展示，所以有些图表，我们在技术选型上就用了开源的 echarts。

如果只是单纯的做固定尺寸的大屏页面的话，做起来肯定是很简单的，直接照着设计稿的尺寸无脑的还原就行了。

但是实际情况下，用户的需求是复杂多变的，比如最近做的这个项目，主要是三维的模型展示+二维的图表展示。但是客户的需求是，必须要适配移动端和pc端不同尺寸的设备。这个需求咋一听很无脑，细想一下，确实很无脑。

但是客户的需求，我们肯定是要解决的对不对，于是就寻找解决的方案。

首先对于 3d 拓扑图展示区域，适配起来很简单，因为我们用的是浏览器中的 webgl 技术，我们的场景的就是绘制在那块 canvas 上面的，虽然根据尺寸不同的设备，我们的 canvas 大小势必要发生变化，但是没关系，我们监听一下窗口的 resize 事件，然后动态的获取 canvas 元素尺寸，而一般的 webgl 三维框架，都会对这种尺寸变化作出适配。

比如比较有名的 webgl 框架 three.js，就是采用下面这种方式，针对 canvas 尺寸变化的时候，作出适配：

function resizeRendererToDisplaySize(renderer) {
   
   
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
   
   
    renderer.