Vue项目使用g2配置背景图表 backgroundChart，文档中提到配置为false不渲染，然而配置为false会

g2-plugin-slider 使用心得

引入插件（需要配合g2的DataSet使用）
1. npm install g2-plugin-slider
2. import Slider from '@antv/g2-plugin-slider'
3. import { DataSet } from '@antv/data-set'

使用

创建slider对应的DOM容器,我是创建了一个图表的子节点来作为slider容器
```
<div id='chart'>
    <div id='slider'></div>
</div>
```

创建DataSet实例

指定初始化状态量,数据默认是按照时间排序的话可以这样写，如果是确定的某个时间段或是其他也可以自定义状态量
let ds = new DataSet({
    state: {
        start: data[0].time,   
        end: data[len].time
    }
})
let dv = ds.createView()
dv.source(data)   // data为基础数据源

创建Slider实例

let slider = new Slider({
    container: 'slider',   // 容器
    height: 8,  //高度
    // 选中区域的样式
    fillerStyle: {
        fill: '#3385FF',  // 填充颜色
        fillOpacity: 1  // 填充颜色透明度
    },
    // 背景条样式
    backgroundStyle: {
        fill: '#fff',    // 填充颜色
        fillOpacity: 0.1,  // 填充颜色透明度
        lineWidth: 0,    // 边框线的大小
        radius: 4   // 圆角
    },
    // 背景图表
    backgroundChart: {
        type: ['line'],    // 类型，需要的话可以看文档配置
        color: 'transparent' // 我这里不需要给成透明
    },
    textStyle: false,   // 文本样式我这里不需要显示
    // 手柄的样式,默认可以设置宽高，如果需要自定义可以传base64格式或者具体的图片路径
    handleStyle: {
        width: 8,
        height : 8,
        img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAXFJREFUOBG9lLFKA0EQhucsLCyEdIIINvENRKtESCtYChZ2Fj6F+BSCpYVgZ2ErJLFRfAHRRhDBLqBgYXP+39zu5Tww3nLgwOR2Z//5snc7s2b/ZXmeD+Sn8gf5R3DGxAaN9yFxVz6U/2VounVwVg1I0NP8Ut75/LL87Nay8aPZy6RQrXTMemtm+5uWL8wbuazsZFl2UyjMgz4O/3anSef+2ez4yuztPcp+PpcWzY62zdZXPQ50Q9AnZuUOBRxq3gd2eK5RAzvZK6EjAbdImeNHMD5yn9dkZ00NLTnkBkYBVGAXCN/st9dkvW5oyQlxZ/gOFeAwjANItUqOMyJwGVA8zRRoJccZEZjCmKmNwFdU1FmqVXKcEYFjQBRtqlVynBGBF4DoAIq2qaElJ+id4UAV5bWCI9qJDmhqaEMLUtgwyjpkfCCf0E50wKydslbpElqPXLdYlD5Rtbe+HAJ3+hC01fU1JdVG9Ka8/QVb4yZPvwFKLvxF4hsEYAAAAABJRU5ErkJggg=='
    },
    start: ds.state.start, // 和状态量对应
    end: ds.state.end,
    xAxis: time,    // x轴映射字段
    yAxis: value,   // y轴映射字段
    data: dv,     // 数据源
    onChange: function onChange(_ref){
        var startValue = _ref.startValue,
        endValue = _ref.endValue
        ds.setState('start', startValue)     // 更新状态量
        ds.setState('end', endValue)
    }
})

渲染滑动条
```
slider.render()
```

踩坑
1. 配置背景图表 backgroundChart，文档中提到配置为false不渲染，然而配置为false会报错，导致整个滑动条不显示，就像下面这样。
2. 文档配置项不详细，需要看源码
  - 滑动条外面总是有个白色的框框，好丑怎么办，文档里面没有相应的配置项。来啊~互相伤害吧~ 咦，我发现了它，lineWidth给0不就好了吗，妥妥的👏
  - 想给边框圆角怎么办，没有配置项，源码也没设置。自己试试呗，borderRadius：4 居然没用~😔。再试试radius：4，居然成了，这配置想不写出来真的脑壳痛。。。
最终效果

ending~ ❤