echarts中dataZoom ，设置 handleIcon 为圆形或长方形

心已赠人 2022-12-04 09:14 375阅读 0赞

### `dataZoom` 组件 用于区域缩放，先上手柄效果图：长方形和圆形的效果： ###

![20200907164441339.png][]

![20200907164511716.png][]

先将 handleIcon 的具体数值贴出来：

dataZoom: [
              {
                id: "dataZoomX",
                type: "slider",
                backgroundColor: "#F2F5F9",
                fillerColor: "#BFCCE3",
                showDataShadow: false,
                height: 13,
                handleSize: 22,
                right: 60,
                left: 60,
                bottom: 15,
                handleSize: "200%", // 手柄大小
                borderColor: "none", 
                handleIcon: // 用于画手柄
                  // "M0,0 v9.7h5 v-9.7h-5 Z", // 画一个长方形
               "path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z",// 画一个圆形
                handleStyle: { 
                  color: '#BFCCE3', 
                  global: true  , // 缺省为 false
                  shadowBlur: 6,
                  shadowColor: 'rgba(123, 154, 204, 0.5)',
                  shadowOffsetX: 0, // 阴影偏移x轴多少
                  shadowOffsetY: 0 // 阴影偏移y轴多少
                }
             }, 
            ],

具体说明：

1、找到官网文档代码中dataZoom中的handleIcon ，看见对应的例子，默认是：“'M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z'”，这是由svg画出来的图形，

效果如下：![20200907164247822.png][]

其中的数字是路径的参数字母的表示，与canvas类似，见下面解释

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  
　　　　注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

例如：“M0,0 v9.7h5 v-9.7h-5 Z”：解释为：笔移动到坐标（0，0）点开始画笔，相对当前位置，向下走9.7，再向左走5， 再向上走9.7（向下-9.7，即向上9.7），再向右走5，最后关闭画笔；

[20200907164441339.png]: /images/20221123/df16e8ee08f54af49a8d583ac24fef7d.png
[20200907164511716.png]: /images/20221123/8bced3a8a28f4bb09e88c282c72ac4a8.png
[20200907164247822.png]: /images/20221123/bd216abcfb654540a60704210b8b6777.png