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

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

先将 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画出来的图形，

效果如下：

其中的数字是路径的参数字母的表示，与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，最后关闭画笔；