1. 使用前提：

• Slider 組件作為 G2 的交互插件，必須在 G2 引入的前提下使用！
• 為了做到純粹和解耦，Slider 組件是完全基于數據的篩選操作，需要配合 DataSet 以及狀態量使用，當滑動條發生變化時，通過定義 onChange 更新狀態量，來達到圖表的自動更新。
• 引入腳本

import G2 from '@antv/g2';
import Slider from '@antv/g2-plugin-slider';

const slider = new Slider({
  
});

• 創建 Slider 的方式如下：

new Slider({
  container: {string} | {HTMLElement},
  width?: {number} | {string},
  height?: {number},
  padding?: {object} | {number} | {array},
  xAxis: {string},
  yAxis: {string},
  start: {string} | {number},
  end: {string} | {number},
  data: {array} | {dataview},
  fillerStyle?: {object},
  backgroundStyle?: {object},
  textStyle?: {object},
  handleStyle?: {object},
  backgroundChart?: {object}
});

2. 屬性

container

• (string | HTMLElement)
• 對應 slider 的 DOM 容器，可以傳入該 DOM 的 id 或者直接傳入容器的 html 節點對象。

width

• (string | number)
• 設置 slider 組件的寬度，默認為 auto，表示自適應容器的寬度。

height

• (number)
• 設置 slider 組件的高度，默認為 26，單位為 ‘px’。

padding

• 設置 slider 組件所在畫布 canvas 的內邊距，用于與圖表對齊（默認圖表的 canvas 容器也是帶了內邊距），默認值同 G2 默認主題的 padding 相同，[ 20, 20, 95, 80 ]。

xAxis

• (string)
• Slider 是帶有背景圖表的滑動條組件，該字段用于聲明該背景圖表的橫軸映射字段，同時該字段也是數據過濾字段。
• 必須聲明。

yAxis

• (string)
• Slider 是帶有背景圖表的滑動條組件，該字段用于聲明該背景圖表的縱軸軸映射字段。
• 必須聲明，不然會報錯。xAxis和yAxis用于展示滑塊上的縮略圖。

data

• (array | dataview)
• 必須聲明，數據源。

start

• (number | string)
• 聲明滑動條起始滑塊的位置對應的數據值，默認為最小值。

end

• (number | string)
• 聲明滑動條結束滑塊的位置對應的數據值，默認為最大值。

scales ----- 還未使用過，不太明白具體的使用方法

• (object)
• 用于對 xAxis 和 yAxis 字段進行列定義，用于同操作的圖表中對應的列定義相同。
• 示例代碼：

scales: {
  [`${xAxis}`]: {
    type: 'time',
    mask: 'MM-DD'
  }
}

onChange

• (function)
• 當滑動條滑塊發生變化時，觸發該回調函數，主要用于更新 ds 的狀態量。該回調函數會提供一個參數，該參數是一個對象，包含如下屬性：

onChange: (obj) => {
  const { startValue, endValue, startText, endText } = obj;
}

• startValue 起點滑塊當前對應的原始數據值，如果是 time 或者 timeCat 類型是，該值為時間戳，請注意。
• endValue 終點滑塊當前對應的原始數據值，如果是 time 或者 timeCat 類型是，該值為時間戳，請注意。
• startText 起點滑塊當前的顯示文本值
• endText 終點滑塊當前的顯示文本值
• 說明：之所以區分 text 和 value，是因為大部分情況下用戶會對數值進行格式化，所以在設置狀態量和更新狀態量時，需要保證前后數值類型的一致。

fillerStyle

• (object)
• 選中區域的樣式配置，默認配置如下：

{
  fill: '#BDCCED',
  fillOpacity: 0.3
}

• 圖中紅框框選區域：
  

backgroundStyle

• (object)
• slider 整體背景樣式。

textStyle

• (object)
• slider 輔助文本字體樣式配置。

handleStyle

• (object)
• slider 滑塊的樣式配置，可配置的屬性如下：

{
  img: 'https://gw.alipayobjects.com/zos/rmsportal/QXtfhORGlDuRvLXFzpsQ.png', // 可以使圖片地址也可以是 data urls
  width: 5,
  height: 26
}

backgroundChart

• (object)
• slider 滑塊的背景圖表配置，可配置其圖表類型以及顏色：

{
  type: [ 'area' ], // 圖表的類型，可以是字符串也可是是數組
  color: '#CCD6EC'
}

3. 方法

render

• slider.render() 渲染組件，即將其繪制到頁面上。

changeData

• slider.changeData(data) 更新數據源。

repaint

• slider.repaint() 重繪。

destroy

• slider.destroy() 銷毀。