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

HTML5 herman 3878浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

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,最后关闭画笔。

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遮住的背景*/
		labelFormatter: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属性的相关教程! 

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » echarts插件中dataZoom的handleIcon属性用法详解