echarts插件中dataZoom的handleIcon属性用法详解

echarts插件是百度所有开源库中最火的一款了。该插件在开源以来深受用户喜欢，在图表制作方面有着非常不错的表现。其中很多用户对dataZoom中的handleIcon属性不太属性，那么通过本文，我们一起来学习学习它。

dataZoom中的handleIcon ，一般对应的value是“M0,0 v9.7h5 v-9.7h-5 Z”这样类似的内容，很难理解。但是只要你学会了它，就很简单。这是由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，最后关闭画笔。

代码如下，一定要自己引入echarts，路径不一样。

 <!DOCTYPE html> 
 <html> <head> 
 <meta charset="UTF-8"> 
 <title></title> </head> 
 <body> 
 <div id="main" style="width: 600px;height:400px;">
 </div> </body> 
 <script type="text/javascript" src="js/echarts.js"></script> 
 <script type="text/javascript"> 
 var option = {   
 tooltip: {    
 //触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'    trigger: 'axis'   
 },   
 //图例，每个图表最多仅有一个图例   
 legend: {    
 //显示策略，可选为：true（显示） | false（隐藏），默认值为true    show: true,    
 //水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}
 （x坐标，单位px）    
 x: 'center',    
 //垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}
 （y坐标，单位px）    
 y: 'top',    
 //legend的data: 用于设置图例，data内的字符串数组需要与sereis数组内每一个series的name值对应    
 data: ['蒸发量','降水量']   },   
 //工具箱，每个图表最多仅有一个工具箱   
 toolbox: {    
 //显示策略，可选为：true（显示） | false（隐藏），默认值为false    show: true,   
 //启用功能，目前支持feature，工具箱自定义功能回调处理    
 feature: {     //辅助线标志     mark: {show: true},     
 //数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，
 //可指定readOnly为false打开编辑功能     
 dataView: {show: true, readOnly: true},     
 //magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换     
 magicType: {show: true, type: ['line', 'bar']},     
 //restore，还原，复位原始图表     
 restore: {show: true},     
 //saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'     
 saveAsImage: {show: true}    }   },   
 xAxis: [{   //显示策略，可选为：true（显示） | false（隐藏），默认值为true    
 show: true,    //坐标轴类型，横轴默认为类目型'category'    
 type: 'category',    //类目型坐标轴文本标签数组，指定label内容。 
 //数组项通常为文本，'/n'指定换行    
 data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']    }],  
 dataZoom: [{    
 type:"slider", /*类型*/   xAxisIndex:0, /*对应的轴*/   bottom:"10", 
 /*位置，定位*/   zoomLock:100, /*是否锁住，不能缩放*/   start:0, 
 /*开始*/   end:40, 
 /*结束*/   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:"#294b97",     borderColor:"#5476c2"   },   
 backgroundColor:"#f7f7f7", /*背景 */   
 dataBackground:{ /*数据背景*/    
 lineStyle:{     color:"#dfdfdf"    },    
areaStyle:{     color:"#dfdfdf"    }   },    
 fillerColor:"rgba(220,210,230,0.6)", 
/*被start和end遮住的背景*/   labelForma tter:function (value,params) { 
 /*拖动时两端的文字提示*/    
 var str = "";    
 if(params.length > 4){     
 str = params.substring(0,4)+"…";    }else {     
 str = params;    }    
 return str;   }  }],  
 //直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值   
 //纵轴通常为数值型，但条形图时则纵轴为类目型   
 yAxis: [{   
 //显示策略，可选为：true（显示） | false（隐藏），默认值为true    show: true,    
 //坐标轴类型，纵轴默认为数值型'value'    type: 'value',    
 //分隔区域，默认不显示 ,,,栅格阴影效果   
 splitArea: {show: true}   }],   
 //sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构；对象内包含对象   
 series: [{   
//系列名称，如 果启用legend，该值将被legend.data索引相关    name: '蒸发量',    
 //图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。    
 type: 'bar',    
 //系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组
 //axis.data的长度，并且他们间是一一对应的。数组项通常为数值    
 data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],    
 //系列中的数据标注内容    
 markPoint: {     data: [      {type: 'max', name: '最大值'},      
 {type: 'min', name: '最小值'}    ]    },    
 //系列中的数据标线内容    
 markLine: {data: [{type: 'average', name: '平均值'}]}   },{    
 //系列名称，如果启用legend，该值将被legend.data索引相关    name: '降水量',    
 //图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。    
 type: 'bar',    
 //系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组
 //axis.data的长度，并且他们间是一一对应的。数组项通常为数值    
 data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],    
 //系列中的数据标注内容    
 markPoint: {     data: [      {type: 'max', name: '最大值'},      
 {type: 'min', name: '最小值'}     ]    },    
//系列中的数据标线内容    markLine: {    
 data:  [{type: 'average', name: '平均值'} ]    }   }]  }; 
  var myChart = echarts.init(document.getElementById('main')); 
myChart.setOption(option); myChart.on("click",function(params){   
 console.log(params); }); </script> </html>

以上就是handleIcon属性的相关教程！

【注：本文源自网络文章资源，由站长整理发布】