echarts旭日图调整画面大小

1、首先打开echarts思维导图软件。

2、选择一个旭日图并打开。

3、双击主题可以修改文本内容。还可以一键切换主题样式。

4、绘制完成后建议在线打印和导出图片。

5、或者用手机打开echarts思维导图软件。

6、新建旭日图，并开始制图，修改旭日图大小。

7、添加主题并完善旭日图即可。

内部图表的大小是和外部设置的div容器息息相关的，如果想调整整个图表的空间占比，直接修改外部的div容器的宽高即可，但是如果是想设置图表与容器内部的上下以及左右的空白部分（div容器宽高不允许修改的情况下），即需要设置grid属性。

本文同步发表于个人的 CSDN博客

echarts5 以上的版本，echarts容器支持直接设定百分比宽高，但是仍然会有低版本的一个问题，就是浏览器尺寸变动的时候，echarts容器不会响应式的变化。

为了解决这个问题，有了如下解决方案：

其中父元素一定要使用行内样式的方式设定宽高。

在处理echarts图表的时候，往往需要使用 window.onresize 来监听页面大小，从而进一步去改变echarts的大小，但是 resize 事件触发的频率极其频繁，如果页面的echarts图表又很多，这无疑是一件十分灾难的事情。

首先定义一个节流函数，需要接收一个函数，并且返回一个函数，示例如下：

原理很简单，就是使用 setTimeout 延迟执行，如果尚未执行完毕，则直接返回。

应用如下：

效果还是很明显的：

---