在图表中加入交互组件

除了图表外 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.xAxisIndexdataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。
  • dataZoom 组件可同时存在多个,起到共同控制的作用。控制同一个数轴的组件,会自动联动。下面例子中会详细说明。

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

    数据过滤模式的设置不同,效果也不同,参见:dataZoom.filterMode

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

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

在代码加入 dataZoom 组件

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

  1. option ={
  2. xAxis:{
  3. type:'value'
  4. },
  5. yAxis:{
  6. type:'value'
  7. },
  8. dataZoom:[
  9. {// 这个dataZoom组件,默认控制x轴。
  10. type:'slider',// 这个 dataZoom 组件是 slider 型 dataZoom 组件
  11. start:10,// 左边在 10% 的位置。
  12. end:60// 右边在 60% 的位置。
  13. }
  14. ],
  15. series:[
  16. {
  17. type:'scatter',// 这是个『散点图』
  18. itemStyle:{
  19. opacity:0.8
  20. },
  21. symbolSize:function(val){
  22. return val[2]*40;
  23. },
  24. 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"]]
  25. }
  26. ]
  27. }

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

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

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

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

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

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

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