如何在图表中配置一个能够在移动端响应的 DataZoom 组件？
问题描述
类似 这样的简单线图，
怎么配置 DataZoom 组件？DataZoom 组件可以在移动端设备进行交互吗？
解决方案
不同图表库的解决方案不一样，根据你给的 demo，在 VChart 中只需要配置 dataZoom ，就会展示组件；为了移动端的交互更加友好，可以开启roam: true的配置。
代码示例
const spec = {
type: "line",
data: {
values: [
{
time: "2:00",
value: 8
},
{
time: "4:00",
value: 9
},
{
time: "6:00",
value: 11
},
{
time: "8:00",
value: 14
},
{
time: "10:00",
value: 16
},
{
time: "12:00",
value: 17
},
{
time: "14:00",
value: 17
},
{
time: "16:00",
value: 16
},
{
time: "18:00",
value: 15
}
]
},
xField: "time",
yField: "value",
dataZoom: [
{
orient: "bottom",
filterMode: "filter",
roam: true
}
]
};