echarts dataZoom 修改两侧缩放手柄的样式为圆形、

问题

默认echarts dataZoom 两侧的缩放手柄是这个样子的，现在我要改成圆形或者方形怎么做？

image.png

有的小伙伴看到官网有这个属性 borderCap

image.png
但是实际上这个是无效的，这个是用于指定线段末端的绘制方式，并不是手柄的样式。
image.png

解决办法 - 使用 handleIcon

image.png

使用base64图片也行，但是推荐使用svg path方式。

选择 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊。

代码如下，包含三种path：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ],
    dataZoom: [
    {
      bottom: 100,
      type: 'slider',

      moveHandleStyle:{
        color:'transparent'
      },
      handleSize: '100%',
      handleIcon: 'M0,0 v10 h5 v-10 h-5', // 画一个长方形
      // handleIcon: 'M 0,0 a 50 50 0 0 1 0 100 a 50 50 0 0 1 0 -100', // 圆形
      // handleIcon: 'M 0,0 v30 a 50 50 0 0 1 0 100 a 50 50 0 0 1 0 -100 m0,100 v30', // 带上下线段的圆形
    }
  ]
};

长方形

handleIcon: 'M0,0 v10 h5 v-10 h-5'

image.png

圆形

handleIcon: 'M 0,0 a 50 50 0 0 1 0 100 a 50 50 0 0 1 0 -100'

image.png

带上下线段的圆形

handleIcon: 'M 0,0 v30 a 50 50 0 0 1 0 100 a 50 50 0 0 1 0 -100 m0,100 v30'

image.png

贴个调好样式的dataZoom代码

let backColor = '#ecedf0';
let frontColor = 'rgba(203,205,213,0.6)';
option = {
  tooltip:{
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  // legend: {
  //   data: ['全选', 'line1']
  // },
  series: [
    // {
    //   data: [],
    //   name: '全选',
    //   type: 'lines',
    //   itemStyle: {
    //     color: 'red'
    //   }
    // },
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      name: 'line1',
      type: 'line',
      smooth: true
    }
  ],
  dataZoom: [
    {
      bottom: 100,
      type: 'slider',
      borderColor: 'none',
      backgroundColor: backColor,
      fillerColor: 'transparent',
      textStyle: {
        color: 'rgba(0,0,0,0.87)'
      },
      // 数据阴影的样式
      dataBackground: {
        lineStyle: {
          color: backColor
        },
        areaStyle: {
          color: backColor,
          opacity: 1
        }
      },
      // 选中部分数据阴影的样式。
      selectedDataBackground: {
        lineStyle: {
          color: frontColor
        },
        areaStyle: {
          color: frontColor,
          opacity: 1
        }
      },
      handleSize: '100%',
      handleIcon:
        'M 0,0 v50 a 40 40 0 0 1 0 100 a 50 50 0 0 1 0 -100 m0,100 v50',
      handleStyle: {
        borderColor: frontColor,
        borderWidth: 1,
        shadowBlur: 5,
        shadowColor: frontColor,
        color: '#ffffff'
      },
      moveHandleStyle: {
        color: 'transparent'
      },
      emphasis: {
        moveHandleStyle: {
          color: 'transparent'
        }
      }
    }
  ]
};

image.png

若对你有帮助，请点个赞吧，若能打赏不胜感激，谢谢支持！
本文地址：https://www.jianshu.com/p/5ee952ad53a3?v=1721025801532，转载请注明出处，谢谢。

参考：
https://www.cnblogs.com/ZerlinM/p/16823837.html
https://blog.csdn.net/cdc_csdn/article/details/80473541