关于前端:EchartsdataZoom的自定义样式配置

最终成果:

代码:

const dataZoomStyle = {
  // 文字款式
  textStyle: {
    color: fontColor
  },
  // 背景色
  backgroundColor: dataZoomBgColor,
  // 是否开启刷选性能
  brushSelect: false,
  // 选中范畴的填充色彩
  fillerColor: dataZoomSliderColor,
  // datazoom的边框色彩
  borderColor: 'rgba(0, 0, 0, 0)',
  handleIcon: 'M0,0 v9.7h5 v-9.7h-5 Z', /* 手柄的形态
    M = moveto
    L = lineto
    H = horizontal lineto
    V = vertical lineto
    C = curveto
    S = smooth curveto
    Q = quadratic Belzier curve
    T = smooth quadratic Belzier curveto
    A = elliptical Arc
    Z = closepath
    以上所有命令均容许小写字母。大写示意相对定位，小写示意绝对定位。
  * */
  // 手柄的款式
  handleStyle: {
    color: dataZoomHandleColor,
    borderColor: dataZoomHandleColor
  },
  // 高度
  height: 10,
  showDetail: false, // 拖拽时候是否显示具体数值信息
  showDataShadow: false // 组件中是否显示数据暗影
}