Echarts拖拽组件样式配置

...
dataZoom: [{
  type: "slider", /*类型*/
  xAxisIndex: 0, /*对应的轴*/
  bottom: "10", /*位置，定位*/
  start: 20, /*开始*/
  end: 100, /*结束*/
  handleIcon: "M0,0 v9.7h5 v-9.7h-5 Z",
  handleStyle: { /*手柄的样式*/
    color: "#40bcf9",
    borderColor: "#1fb2fb"
  },
  backgroundColor: "#e2f3ff", /*背景 */
  dataBackground: { /*数据背景*/
    lineStyle: {
      color: "#000000"
    },
    areaStyle: {
      color: "#d4d9dd"
    }
  },
  fillerColor: "rgba(31,178,251,0.2)", /*被start和end遮住的背景*/
}],
....

dataZoom: [{
  type: 'slider',
  show: true,
  xAxisIndex: [0],
  height: 20, //组件高度
  bottom: 10,
  start: 0,
  end: 100,
  backgroundColor: '#0355c3',
  fillerColor: 'rgba(43, 187, 239, 0.2)',
  borderColor: '#2bbbef',
  showDataShadow: false,
  showDetail: false,
  handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
  handleSize: '20',
  handleStyle: {
		color: '#2bbbef',
  },
  axisTick: {
    inside: true,
    alignWithLabel: true,
    lineStyle: {
    	color: ['rgba(255,255,255,.5)'],
    }
  },
},
{
  	type: 'inside',
}
],

...
dataZoom: [
  {
    type: "slider" /*类型*/,
    xAxisIndex: 0 /*对应的轴*/,
    bottom: 8 /*位置，定位*/,
    handleIcon: "M0,0 v5.1h1 v-5.1h-1 Z",
    handleStyle: {
      /*手柄的样式*/
      color: "#79d0fd",
      borderColor: "#79d0fd",
    },
    backgroundColor: "#e2f3ff" /*背景 */,
    dataBackground: {
      /*数据背景*/
      lineStyle: {
        color: "#000000",
      },
      areaStyle: {
        color: "#d4d9dd",
      },
    },
    start: 0,
    end: 100,
    fillerColor: "rgba(31,178,251,0.2)" /*被start和end遮住的背景*/,
  },
],
...