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 容器左边界的距离。
• right：表示距离 DOM 容器右边界的距离。
• top：表示距离 DOM 容器上边界的距离。
• bottom：表示距离 DOM 容器下边界的距离。
• width：表示宽度。
• height：表示高度。

小提示：

在表示横向的量的时候，由于组件的位置和大小可以由任意的两个量决定，所以在 left、right、width 三个量中，可以只提供两个量的值。至于取哪两个量的值就取决于用户，例如 left 和 right 或者 right 和 width 都可以决定组件的位置和大小。 

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

center / radius 定位方式

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

注意：在自适应容器大小时，百分比设置是很有用的。

横向（horizontal）和纵向（vertical）

ECharts 中像 legend、visualMap、dataZoom、timeline等狭长型的组件，大部分都有横向布局和纵向布局这两种选择。例如，在宽少长多的移动端屏幕上，使用纵向布局更为合适；而在屏幕较宽的 PC 端上，则要选择使用横向布局。

横纵向布局的设置：

• 一般在组件或者系列的 orient 或者 layout 配置项上，设置为 'horizontal' 或者 'vertical'。
  

与 ECharts2 的兼容性：

ECharts2 中可以使用如 x/x2/y/y2 的命名方式，分别对应 left/right/top/bottom。但是写成 left/right/top/bottom 会更为规范。

为了兼容 ECharts2，在描述位置的时候可以支持一些看起来略奇怪的设置，例如：left: 'right'、left: 'left'、top: 'bottom'、top: 'top'。这些语句分别等效于：right: 0、left: 0、bottom: 0、top: 0，写成后者就不奇怪了。

Media Query

Media Query 提供了随着容器尺寸改变而改变的能力。

下面的例子，可以拖动右下角的圆点改变尺寸，随着尺寸变化，legend 和 系列会自动改变布局位置和方式：

点击编辑实例 》》

在 option 中设置 Media Query 需要遵循下面的格式：

option = {
    baseOption: { // 这里是基本的『原子option』。
        title: {...},
        legend: {...},
        series: [{...}, {...}, ...],
        ...
    },
    media: [ // 这里定义了 media query 的逐条规则。
        {
            query: {...},   // 这里写规则。
            option: {       // 这里写此规则满足下的option。
                legend: {...},
                ...
            }
        },
        {
            query: {...},   // 第二个规则。
            option: {       // 第二个规则对应的option。
                legend: {...},
                ...
            }
        },
        {                   // 这条里没有写规则，表示『默认』，
            option: {       // 即所有规则都不满足时，采纳这个option。
                legend: {...},
                ...
            }
        }
    ]
};

上述例子中的 baseOption、以及 media 每个 option 都是原子 option，即普通的含有各组件、系列定义的 option。而由原子option组合成的整个 option，我们称为复合 option。baseOption 是必然被使用的，此外，满足了某个 query 条件时，对应的 option 会被使用 chart.mergeOption() 来 merge 进去。

query：

每个 query 可以写成下述形式：

{
    minWidth: 200,
    maxHeight: 300,
    minAspectRatio: 1.3
}

目前 query 支持三个属性：width、height、aspectRatio（长宽比）。每个属性都可以加上 min 或 max 前缀。比如，minWidth: 200 表示 大于等于200px宽度 。两个属性一起写表示  且 ，例如：{minWidth: 200, maxHeight: 300} 表示 大于等于200px宽度，且小于等于300px高度 。

option：

media 中的 option 既然是 原子 option ，理论上可以写任何 option 的配置项。但是一般我们只写跟布局定位相关的，例如截取上面例子中的一部分 query option：

media: [
    ...,
    {
        query: {
            maxAspectRatio: 1           // 当长宽比小于1时。
        },
        option: {
            legend: {                   // legend 放在底部中间。
                right: 'center',
                bottom: 0,
                orient: 'horizontal'    // legend 横向布局。
            },
            series: [                   // 两个饼图左右布局。
                {
                    radius: [20, '50%'],
                    center: ['50%', '30%']
                },
                {
                    radius: [30, '50%'],
                    center: ['50%', '70%']
                }
            ]
        }
    },
    {
        query: {
            maxWidth: 500               // 当容器宽度小于 500 时。
        },
        option: {
            legend: {
                right: 10,              // legend 放置在右侧中间。
                top: '15%',
                orient: 'vertical'      // 纵向布局。
            },
            series: [                   // 两个饼图上下布局。
                {
                    radius: [20, '50%'],
                    center: ['50%', '30%']
                },
                {
                    radius: [30, '50%'],
                    center: ['50%', '75%']
                }
            ]
        }
    },
    ...
]

具有多个 query 时的优先级：

注意，可以有多个 query 同时被满足，会都被 mergeOption，定义在后的后被 merge（即优先级更高）。

默认 query：

如果 media 中有某项不写 query，则表示『默认值』，即所有规则都不满足时，采纳这个option。

容器大小实时变化时的注意事项：

如果容器DOM节点需要能任意随着拖拽变化大小，那么目前使用时需要注意这件事：某个配置项，如果在某一个 query option 中出现，那么在其他 query option 中也必须出现，这样才能够回归到原来的状态。（left/right/top/bottom/width/height 不受这个限制。）

复合 option 中的 media 不支持 merge

也就是说，当第二（或三、四、五 ...）次 chart.setOption(rawOption) 时，如果 rawOption 是 复合 option（即包含 media 列表），那么新的 rawOption.media 列表不会和老的 media 列表进行 merge，而是简单替代。当然，rawOption.baseOption 仍然会正常和老的 option 进行merge。

其实，很少有场景需要使用 复合 option 来多次 setOption，而我们推荐的做法是，使用 mediaQuery 时，第一次 setOption 使用 复合 option ，后面 setOption 时仅使用 原子 option，也就是仅仅用 setOption 来改变 baseOption。

最后看一个和时间轴结合的例子：

点击编辑实例 》》