在图表中加入交互组件

在图表中加入交互组件

除了图表外 ECharts 中，提供了很多交互组件。例如：

图例组件 legend、标题组件 title、视觉映射组件 visualMap、数据区域缩放组件 dataZoom、时间线组件 timeline

下面以 数据区域缩放组件 dataZoom 为例，介绍如何加入这种组件。

数据区域缩放组件（dataZoom）介绍

『概览数据整体，按需关注数据细节』是数据可视化的基本交互需求。dataZoom 组件能够在直角坐标系（grid）、极坐标系（polar）中实现这一功能。

如下例子： https://echarts.baidu.com/gallery/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1“

  • dataZoom 组件是对 数轴（axis） 进行『数据窗口缩放』『数据窗口平移』操作。

可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。

  • dataZoom 组件可同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动。下面例子中会详细说明。

  • dataZoom 的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果。

    数据过滤模式的设置不同，效果也不同，参见：dataZoom.filterMode。

  • dataZoom 的数据窗口范围的设置，目前支持两种形式：

dataZoom 组件现在支持几种子组件：

在代码加入 dataZoom 组件

先只在对单独一个横轴，加上 dataZoom 组件，代码示例如下：

  2. 2. option = {
  3. 3. xAxis: {
  4. 4. type: 'value'
  5. 5. },
  6. 6. yAxis: {
  7. 7. type: 'value'
  8. 8. },
  9. 9. dataZoom: [
  10. 10. {   // 这个dataZoom组件，默认控制x轴。
  11. 11. type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
  12. 12. start: 10,      // 左边在 10% 的位置。
  13. 13. end: 60         // 右边在 60% 的位置。
  14. 14. }
  15. 15. ],
  16. 16. series: [
  17. 17. {
  18. 18. type: 'scatter', // 这是个『散点图』
  19. 19. itemStyle: {
  20. 20. opacity: 0.8
  21. 21. },
  22. 22. symbolSize: function (val) {
  23. 23. return val[2] * 40;
  24. 24. },
  25. 25. data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
  26. 26. }
  27. 27. ]
  28. 28. }

可以看到如下结果： https://echarts.baidu.com/gallery/view.html?c=doc-example/scatter-tutorial-dataZoom-1&edit=1&reset=1

上面的图只能拖动 dataZoom 组件导致窗口变化。如果想在坐标系内进行拖动，以及用滚轮（或移动触屏上的两指滑动）进行缩放，那么要再加上一个 inside 型的 dataZoom组件。直接在上面的 option.dataZoom 中增加即可：

  2. 1. option = {
  3. 2. ...,
  4. 3. dataZoom: [
  5. 4. {   // 这个dataZoom组件，默认控制x轴。
  6. 5. type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
  7. 6. start: 10,      // 左边在 10% 的位置。
  8. 7. end: 60         // 右边在 60% 的位置。
  9. 8. },
  10. 9. {   // 这个dataZoom组件，也控制x轴。
  11. 10. type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
  12. 11. start: 10,      // 左边在 10% 的位置。
  13. 12. end: 60         // 右边在 60% 的位置。
  14. 13. }
  15. 14. ],
  16. 15. ...
  17. 16. }

可以看到如下结果（能在坐标系中进行滑动，以及使用滚轮缩放了）： https://echarts.baidu.com/gallery/view.html?c=doc-example/scatter-tutorial-dataZoom-2&edit=1&reset=1

如果想 y 轴也能够缩放，那么在 y 轴上也加上 dataZoom 组件：

  2. 1. option = {
  3. 2. ...,
  4. 3. dataZoom: [
  5. 4. {
  6. 5. type: 'slider',
  7. 6. xAxisIndex: 0,
  8. 7. start: 10,
  9. 8. end: 60
  10. 9. },
  11. 10. {
  12. 11. type: 'inside',
  13. 12. xAxisIndex: 0,
  14. 13. start: 10,
  15. 14. end: 60
  16. 15. },
  17. 16. {
  18. 17. type: 'slider',
  19. 18. yAxisIndex: 0,
  20. 19. start: 30,
  21. 20. end: 80
  22. 21. },
  23. 22. {
  24. 23. type: 'inside',
  25. 24. yAxisIndex: 0,
  26. 25. start: 30,
  27. 26. end: 80
  28. 27. }
  29. 28. ],
  30. 29. ...
  31. 30. }

可以看到如下结果： https://echarts.baidu.com/gallery/view.html?c=doc-example/scatter-tutorial-dataZoom-3&edit=1&reset=1