echarts 饼图移动端_ECharts实现移动端自适应

用户使用 Echarts 工作的时候所需要用到的 组件 和 系列 都在指定高宽的 DOM 节点(容器)中，其中每个节点都可以由用户指定位置。

Echarts 图表库内部采用的是类似于绝对布局的易于理解的布局方式，因为实现 DOM 文档流布局是不合适的。但是图表库所采用的布局方式会受到容器尺寸的影响，出现组件重叠的情况。这就带来了一个问题：如果图表需要同时在 PC端和移动端展示，该怎么解决内部组件的布局？

上述问题需要 Echarts 内部组件能够自动地随着容器尺寸的改变而进行调整的能力。为了解决这个问题，ECharts 完善了组件的定位设置，并且实现了类似 CSS Media Query 的自适应能力。

ECharts 组件的定位和布局

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

center / radius 定位方式

left/right/top/bottom/width/height 定位方式

该定位方式中的六个量，每个量都可以当做 绝对值、百分比 或者 位置描述：绝对值的单位是浏览器像素(px)，用 number 形式书写(不写单位)。例如 {left: 23, height: 400}。

百分比表示占 DOM 容器高宽的百分之多少，用 string 形式书写。例如 {right: '30%', bottom: '40%'}。

位置描述可以设置 left: 'center'，表示水平居中。可以设置 top: 'middle'，表示垂直居中。

这六个量的概念，和 CSS 中六个量的概念类似：left：表示距离 DOM