echarts基础 handleIcon 设置
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>
echarts基础 handleIcon 设置的更多相关文章
- Echarts柱形图颜色设置
ECharts图为每个数据项配置颜色 (2014-11-12 15:52:53) 转载▼ 标签: 时尚 分类: 开发学习 其实给每个数据项配置很简单 只需要在series里面给data数组的每个元素设 ...
- echarts仪表盘如何设置图例(legend)
echarts 图表中经常需要对不同的颜色设置图例标识不同的意义,而仪表盘的指针只存在一个值,如何表示不同颜色的意义,官网配置项并未给出该功能: 不同段的颜色是通过axisLine->lineS ...
- echarts - 条形图grid设置距离绘图区域的距离
在一些数据量过大的情况下,在一个固定的区域绘图往往需要对图表绘制区域的大小进行动态改变.这时候设置条形图距离绘图区域上下左右的距离可使用如下方式:表示条形图的柱子距离绘图区左边30%,距离右边40%, ...
- Echarts 基础知识浅析
1. 引入Echarts Echarts是基于canvas的数据可视化产品,由百度公司推出 参考官方文档,引入教程示例即可,注意有两种引入方式: (1)直接引入 (2)模块化引入 2. 基本API使用 ...
- echarts相关属性设置（1）折线图篇
option = { tooltip: { trigger: 'axis', // axisPointer: { // type: 'cross', // label: { // background ...
- echarts圆饼图设置默认选中项并在中间显示文字
效果: 代码: var myChart = echarts.init(document.getElementById('quanshi-echarts-two')); option = { grid: ...
- python基础-PyCharm设置作者信息模板_修改解释器_设置软件UTF-8编码
一.PyCharm 设置作者信息模板 1.File---Settings---在搜索框中搜索:File and Code Templates---Python scripts #!/usr/bin/e ...
- winform基础窗体设置及基础控件
WinForm - 也叫做C/S 客户端 另:B/S是 网页端 客户端应用程序 - 是需要安装在用户电脑上才可以使用的程序 特点: 不需要联网也可以打开使用部分功能,但是现在的情况是许多功能依然需要 ...
- MySQL基础 - 编码设置
刚开始工作的时候,在工作中遇到的与数据库相关的问题,多半跟编码有关,总结一下数据库编码的设置. 字符集 查看数据库支持的字符集: mysql> SHOW CHARACTER SET; 从图中可以 ...
随机推荐
- java基础（四）
一.面向对象的三个基本特征: 1.封装,将对象的实现细节隐藏起来,并通过公共接口暴露相关功能: 2.继承,代码复用的表现,当子类继承父类后,子类作为一种特殊的父类,直接获得父类的属性和方法: 3.多态 ...
- 对JavaScript中异步同步机制以及线程深入了解
今天在网上看到各种对Js异步同步单线程多线程的讨论 经过前辈们的洗礼 加上鄙人小小的理解 就来纸上谈兵一下吧~ Js本身就是单线程的 至于为什么Js是单线程的 那就要追溯到Js的历史了 总而言之 由于 ...
- js文件上传
DOM: <form id="clueForm" class="insert-dialog" action="/xxx/xxx"met ...
- C# 五、谈扩展方法的理解
http://www.cnblogs.com/zhaopei/p/5678842.html
- jQuery插件（拖拽）
拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). ...
- github page
使用github page 可以查看仓库中保存的网页的事例 新建gh-pages的分支,然后点击上方的page按钮即可配置相应的链接以及地址 注:默认情况下显示的是当前文件下的index.html文件 ...
- 从零开始山寨Caffe·壹：仰望星空与脚踏实地
请以“仰望星空与脚踏实地”作为题目,写一篇不少于800字的文章.除诗歌外,文体不限. ——2010·北京卷 仰望星空 规范性 Caffe诞生于12年末,如果偏要形容一下这个框架,可以用"须敬 ...
- 一些Asp.Net面试题答案
工作时间长了总是用同样的一些东西 其他的有些生疏 闲来看看面试题练习一下: 题目出处嘛...aspnet-tests-for-juniors 转载请注明来源:http://www.cnblogs ...
- CentOS系统配置记录
1. 挂載 ntfs: 确定已经安装了rpmforge软件库的源.在线安装使用 yum install 命令 含有 rpmforge源. yum install fuse ntfs-3g -y 安装后 ...
- 学习Sass 的基本语法规则[Sass和compass学习笔记]
自从发现可编程的css语法 Sass和基于Sass的css库compass 一个给我的感觉像c# 另外一个给我的感觉像.NET Framework,一切都为了提升开发效率和降低开发大型web的门槛. ...