本文详解ECharts在移动端屏幕适配中的媒体查询机制，包括优先级处理、容器尺寸变化及复合选项合并规则。同时深入解析分段视觉映射组件（visualMapPiecewise）的三种模式、维度映射配置及事件行为处理，提供完整的代码示例与最佳实践建议。
移动端适配
在同时满足多个查询条件时，所有匹配的查询配置将通过 mergeOption 进行合并，最终由 merge 定义最高优先级的选项。若媒体查询中未明确指定某项规则，则视为默认值，即当所有特定规则均不匹配时，采用此默认配置。此外，当容器 DOM 节点尺寸发生实时变化时，需特别注意相关配置的处理逻辑。
多数场景下，无需通过拖拽任意改变容器 DOM 节点的大小，而是针对不同的终端设备预设几种典型尺寸。但若确实需要支持通过拖拽任意调整容器大小，则需注意：若配置项出现在某个查询选项中，该配置项也必须出现在其他所有查询选项中，否则无法恢复至原始状态（注：left、right、top、bottom、width、height 属性不受此限制）。
{
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%']
}
]
}
},
...
]
复合选项中的媒体列表不支持合并。即当调用 setOption(rawOption) 且 rawOption 为包含媒体列表的复合选项时，新的媒体列表将直接替换旧媒体列表，而非与旧列表合并。当然，baseOption 通常仍会与旧选项合并。鉴于极少场景需要多次使用“复合选项”设置，建议在使用 mediaQuery 时，首次 setOption 使用“复合选项”，后续 setOption 仅使用“原子选项”，即仅通过 setOption 修改 baseOption。
{
minWidth: 200,
maxHeight: 300,
minAspectRatio: 1.3
}
目前支持三个属性：width、height 和 aspectRatio。每个属性前均可添加 min 或 max 前缀，例如 minWidth:200 表示“宽度大于或等于 200px”。同时指定两个属性表示逻辑“与”，例如 {minWidth:200, maxHeight:300} 表示“宽度大于或等于 200px 且高度小于或等于 300px”。由于媒体中的选项为原子选项，理论上可编写任何配置项，但通常仅用于布局定位，例如拦截部分查询选项。
option = {
// 这里是基本的『原子option』。
title: {...},
legend: {...},
series: [{...}, {...}, ...],
...,
media: [ //
{
query: {...}, // 这里写规则。
option: { // 这里写此规则满足下的option。
legend: {...},
...
}
},
{
query: {...}, // 第二个规则。
option: { // 第二个规则对应的option。
legend: {...},
...
}
},
{ //
option: { //
legend: {...},
...
}
}
]
};
此处定义了 media query 的逐条规则。若某条规则中未编写具体条件，则表示“默认”配置，即当所有其他规则均不满足时，采用该 option。
数据和维度
ECharts 中的数据通常存储于系列数据（series data）中。根据图表类型的不同，数据的具体形式可能略有差异，例如线性表、树结构或图形数据。但它们共同点在于均为“数据项”的集合，每个数据项包含“值”及其他信息（如有必要）。每个值可以是单个数值（一维）或数组（多维）。例如，series 最常见的数据形式为“线性表”，即常见的数组格式，其中每一项即为数据项（dataItem），其数据值（value）即为具体数值。
series: {
data: [
{
value: 2323, //
itemStyle: {...}
},
1212, //
2323, //
4343,
3434
]
}
也可直接使用 dataItem 的 value，这种形式更为常见，每个 value 均为“一维”数据。
分段视觉映射组件
分段视觉映射组件（visualMapPiecewise）提供三种模式：连续数据的平均分割，依据 visualMapPiecewise.splitNumber 自动平均分割为若干块；连续数据的自定义分割，依据 visualMapPiecewise.pieces 定义每个块的范围；离散数据（分类数据），类别在 visualMapPiecewise.categories 中定义。由于这是“数据”到“视觉元素”的映射，可在 visualMap 中指定数据的“哪个维度”（参见 visualMap.dimension），以映射到特定的“视觉元素”（参见 visualMap.inRange 和 visualMap.outOfRange）。
option = {
visualMap: [
{
type: 'piecewise',
min: 0,
max: 5000,
dimension: 3,
seriesIndex: 4,
inRange: {
color: ['blue', '#121122', 'red'],
symbolSize: [30, 100]
},
outOfRange: { // 选中范围外的视觉配置
symbolSize: [30, 100]
}
},
...
]
};
series.data 的第四个维度（即 value[3]）被映射，series.data 的第四个维度（即 value[3]）被映射。
事件和行为
myChart.on('click', function (params) {
console.log(params.name);
});
在 ECharts 中，事件主要分为两类：一类是用户鼠标单击或悬停图表图形时触发的事件；另一类是用户使用可交互组件后触发的行为事件，例如切换图例开关时触发的“legendselectchanged”事件（注意：切换图例开关不会触发“legendselecttchchanged”事件），以及缩放数据区域时触发的“datazoom”事件。
myChart.on('click', function (params) {
if (params.componentType === 'markPoint') {
if (params.seriesIndex === 5) {
}
}
else if (params.componentType === 'series') {
if (params.seriesType === 'graph') {
if (params.dataType === 'edge') {
}
else {
}
}
}
});
点击 markPoint 时，可识别是否点击到了 index 为 5 的 series 的 markPoint。点击 graph 的 edge（边）或 node（节点）时，ECharts 中几乎所有的组件交互都会触发相应的事件。事件文档中列出了常见事件及其对应参数。
以上就是 ECharts 框架分段视觉映射在移动端适配的详细内容，更多关于 ECharts 分段视觉映射的资料请关注本站其它相关文章！