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

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

更多精彩内容请看 web前端中文站
www.lisa33xiaoq.net 可按Ctrl + D 进行收藏

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插件中dataZoom的handleIcon属性用法详解

代码如下,一定要自己引入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属性的相关教程!

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

0
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到