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; 从图中可以 ...
随机推荐
- 11g新特性-查询缓存(1)
众所周知,访问内存比访问硬盘快得多,除非硬盘体系发生革命性的改变.可以说缓存在Oracle里面无处不在,结果集缓存(Result Cache)是Oracle Database 11g新引入的功能,引入 ...
- SharePoint 2013 Apps TokenHelper SharePointContext OAuth Provider-Hosted App (抄袭,测试 csc.rsp 用)
namespace Microshaoft.SharePointApps { using Microsoft.IdentityModel; using Microsoft.IdentityModel. ...
- nodejs review-04
79 Secure your projects with HTTPS Express 生成SSL证书 openssl genrsa -out privkey.pem 1023 openssl req ...
- node模块函数图解
已截图方式记录模块信息: HTTP模块: 对于网络返回处理状态封装了很多种,我已截图展现 以上状态也是在http协议中包含的状态. http函数: path模块:
- 缓存依赖中cachedependency对象
缓存依赖主要提供以下功能:1.SQL 缓存依赖项可用于应用程序缓存和页输出缓存.2.可在 SQL Server 7.0 及更高版本中使用 SQL 缓存依赖项.3.可以在网络园(一台服务器上存在多个处理 ...
- Leetcode jump Game II
Given an array of non-negative integers, you are initially positioned at the first index of the arra ...
- php查找字符串首次出现的位置 判断字符串是否在另一个字符串中
strpos - 查找字符串首次出现的位置 说明 int strpos ( string $haystack , mixed $needle [, int $offset = 0 ] ) 返回 nee ...
- java分享第六天（冒泡排序）
冒泡排序 基本思想: 在要排序的一组数中,对当前还未排好序的范围内的全部数,自上而下对相邻的两个数依次进行比较和调整,让较大的数往下沉,较小的往上冒.即:每当两相邻的数比较后发现它们 的排序与排序要求 ...
- CSS实现元素水平/垂直居中的方法
首先,我们来了解水平居中,它有很多种方法,我们暂时先来了解其中的几种: 1. 在实现方案中,我们最熟悉的莫过于给元素定义一个宽度,然后使用margin: 1 2 3 4 body{ wi ...
- Linux:使用nohup让进程在后台可靠运行
学习之余我最大的乐趣是找一部不错的电影慢慢品味,这也是我缓解压力的最好方式之一,由于我常去的字幕组网站需要签到才可以下载字幕,像这种娱乐网站谁有时间天天记得去签到呢,but作为一个准程序猿应该有更好的 ...