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 设置的更多相关文章

  1. Echarts柱形图颜色设置

    ECharts图为每个数据项配置颜色 (2014-11-12 15:52:53) 转载▼ 标签: 时尚 分类: 开发学习 其实给每个数据项配置很简单 只需要在series里面给data数组的每个元素设 ...

  2. echarts仪表盘如何设置图例(legend)

    echarts 图表中经常需要对不同的颜色设置图例标识不同的意义,而仪表盘的指针只存在一个值,如何表示不同颜色的意义,官网配置项并未给出该功能: 不同段的颜色是通过axisLine->lineS ...

  3. echarts - 条形图grid设置距离绘图区域的距离

    在一些数据量过大的情况下,在一个固定的区域绘图往往需要对图表绘制区域的大小进行动态改变.这时候设置条形图距离绘图区域上下左右的距离可使用如下方式:表示条形图的柱子距离绘图区左边30%,距离右边40%, ...

  4. Echarts 基础知识浅析

    1. 引入Echarts Echarts是基于canvas的数据可视化产品,由百度公司推出 参考官方文档,引入教程示例即可,注意有两种引入方式: (1)直接引入 (2)模块化引入 2. 基本API使用 ...

  5. echarts相关属性设置（1）折线图篇

    option = { tooltip: { trigger: 'axis', // axisPointer: { // type: 'cross', // label: { // background ...

  6. echarts圆饼图设置默认选中项并在中间显示文字

    效果: 代码: var myChart = echarts.init(document.getElementById('quanshi-echarts-two')); option = { grid: ...

  7. python基础-PyCharm设置作者信息模板_修改解释器_设置软件UTF-8编码

    一.PyCharm 设置作者信息模板 1.File---Settings---在搜索框中搜索:File and Code Templates---Python scripts #!/usr/bin/e ...

  8. winform基础窗体设置及基础控件

    WinForm - 也叫做C/S  客户端 另:B/S是 网页端 客户端应用程序 - 是需要安装在用户电脑上才可以使用的程序 特点: 不需要联网也可以打开使用部分功能,但是现在的情况是许多功能依然需要 ...

  9. MySQL基础 - 编码设置

    刚开始工作的时候,在工作中遇到的与数据库相关的问题,多半跟编码有关,总结一下数据库编码的设置. 字符集 查看数据库支持的字符集: mysql> SHOW CHARACTER SET; 从图中可以 ...

随机推荐

  1. spring-表达式语言-SpEL【转】

    Spring表达式语言(Spring Expression Language)简称:SpEL 课程概要: Spring表达式语言的入门介绍 Spring表达式语言的操作范围 Spring表达式语言的运 ...

  2. Node.js-Socket.IO【1】-身份验证

    Websocket身份验证失败的时候,希望向前台传输错误信息,但是Socket.IO目前最新版本1.4.6在后台使用 next(new Error('unauthorization')); 前端的代码 ...

  3. Python中的高级特性

    1.切片.使用“[”和“]”即可,类似Matlab,可以切list,tuple,字符串等. 2.迭代.Python内置的enumerate函数可以把一个list变成索引-元素对. 3.列表生成式.列表 ...

  4. 【Redis】简介与安装

    Linux 安装 [root@redis ~]# wget http://download.redis.io/releases/redis-2.8.19.tar.gz 解压缩redis[root@ha ...

  5. 解决使用osgModeling的Loft生成管子时的bug

    最近在使用osgModeling的Loft生成管子的时候, 发现这个类还是有点bug的. 具体的表现就是在某些情况下, 生成管子的某些节点会是扁的, 而且有时管子会莫名的变粗.   在网上各种求助无果 ...

  6. [代码]label增加删除线

    UILabel *lable = [[UILabel alloc] initWithFrame:CGRectMake(20, 60, 100, 30)];    [self.view addSubvi ...

  7. vim 长句子中的上下移动

    当一个句子很长的时候,屏幕显示不下,就会分为多行,这个时候,你又想找到中间几行某部分的字母,怎么办?这个时候,先按下一个 g ,在按下 j / k ,就可以实现长句子的上下移动了.

  8. bzoj 3438: 小M的作物

    Description 背景 小M还是个特么喜欢玩MC的孩纸... 描述 小M在MC里开辟了两块巨大的耕地A和B(你可以认为容量是无穷),现在,小P有n中作物的种子,每种作物的种子有1个(就是可以种一 ...

  9. O(n) 筛法求素数

    var tot,i,j,k,m,n:longint; prime:array[0..100000] of boolean; p:array[0..100000] of longint;begin re ...

  10. Java实现MySQL数据库导入

    距离上班还有一段时间.现在总结一下如何使用Java语言实现MySQL数据库导入: 首先新建名为test的数据库: 其次执行下面Java代码: import java.io.File; import j ...