echarts 插件是百度所有开源库中最火的一款了。该插件在开源以来深受用户喜欢，在图表制作方面有着非常不错的表现。其中很多用户对 dataZoom 中的handleIcon属性不太属性，那么通过本文，我们一起来学习学习它。
更多精彩内容请看 web 前端中文站
http://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，路径不一样。
<!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属性的相关教程！
【注：本文源自网络文章资源，由站长整理发布】
