代码改变世界

echarts基础 handleIcon 设置

2016-12-28 12:42  muamaker  阅读(8318)  评论(0)  编辑  收藏  举报

1、自己引入echarts库

2、找到代码中dataZoom中的handleIcon ，看见对应的是“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，最后关闭画笔

 

3、效果图

 

4.代码如下，一定要自己引入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>