炫意html5
最早CSS3和HTML5移动技术网站之一

ECharts – 移动端自适应

Media Query

  • 在实际的使用中,有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要 ECharts 内部组件随着容器尺寸变化而变化的能力。
  • Media Query 提供了『随着容器尺寸改变而改变』的能力。

如下例子,可尝试拖动右下角的圆点,随着尺寸变化,legend 和 系列会自动改变布局位置和方式。

具体实例可以参考ECarts官网的给出的官方实例:https://echarts.apache.org/examples/zh/editor.html?c=doc-example/pie-media

格式

要在 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
}

现在支持三个属性: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节点任意随着拖拽变化大小,而是只是根据不同终端设置几个典型尺寸。
  • 但是如果容器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。

炫意HTML5 » ECharts – 移动端自适应

Java基础教程Android基础教程