如何在图表中配置一个能够在移动端响应的DataZoom组件？

Question

类似 （https://www.visactor.io/vchart/demo/line-chart/basic-line）这样的简单线图，

怎么配置DataZoom组件？DataZoom组件可以在移动端设备进行交互吗？For a simple line chart like this one (https://www.visactor.io/vchart/demo/line-chart/basic-line), how do I configure the DataZoom component? Can the DataZoom component be used for interaction on mobile devices?

Answer 1

这个组件做了专门移动端适配的, 甚至可以直接调试不同分辨率,

也可以手机端扫码查看:

dataZoom 演示:

https://www.visactor.io/vchart/demo/sequence-chart/social-med...

Answer 2

解决方案 Solution

不同图表库的解决方案不一样，根据你给的demo，在VChart中只需要配置 dataZoom ，就会展示组件；为了移动端的交互更加友好，可以开启roam: true的配置。

代码示例 Code Example

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
    }
  ]
};

结果展示 Results

在线效果参考：https://codesandbox.io/s/line-chart-datazoom-wzk8n7

相关文档 Related Documentation

DataZoom demo：https://www.visactor.io/vchart/demo/data-zoom/preview-data?ke...

DataZoom教程：https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Conc...

相关配置：https://www.visactor.io/vchart/option/lineChart#dataZoom.valu...

github：https://github.com/VisActor/VChart