2021-06-01

echarts,实现自适应学习笔记

首先需要明确，我们在利用Echarts进行工作时 都是在指定高和宽的DOM容器中运用需要的组件和系列。用户可以指定每个DOM容器的位置。

其次，Echarts图表库内部的布局方式是采用了像绝对布局这种相对比较好理解的方式，因为dom不适合流布局。但是由于容器尺寸的影响图表库采用的布局方式会出现组件重叠的情况。因而引出了我们实际操作中的问题：如何解决图表在缩放网页窗口时内部组件的布局。

想解决这个问题就需要内部组件拥有能够随容器尺寸改变而自动调整的能力，这就需要学习CSS Media Query

大部分的组件和系列会遵循两种定位方式即：
left/right/top/bottom/width/height 定位
center / radius 定位

关于left/right/top/bottom/width/height 定位：此定位方式中的量都可以用 绝对值、百分比或位置来描述。
ps：

• 绝对值的单位是浏览器像素（px），用 number 形式书写（不写单位）
• 百分比表示占 DOM 容器高宽的百分之多少，用 string形式书写。
• 位置描述可以设置 left: ‘center’，表示水平居中。

一些需要注意的点：

• 首先在表示横向的量的时候，由于组件的位置和大小可以由任意的两个量决定，所以在 left、right、width三个量中，可以只提供两个量的值。都可以决定组件的位置和大小。

同理，在表示纵向的量 top、bottom、height 时，取值与横向量相同。

center / radius 定位方式

• center 是一个数组，表示 [x, y]，其中，x、y可以是绝对值或者百分比，含义与前面描述的相同。
• radius 是一个数组，表示 [内半径, 外半径]，其中，内外半径可以是绝对值或者百分比，含义与前面描述的相同。

注意：

• 在自适应容器大小时，百分比设置会更有效一点。
• 具有多个 query 时的优先级：可以有多个 query 同时被满足，会都被mergeOption，定义在后的后被 merge（即优先级更高）。

学习网站：https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-4db128yc.html