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属性的相关教程!
【注:本文源自网络文章资源,由站长整理发布】