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. Ubuntu菜鸟入门（三）—— 无用软件卸载，wps等常用软件安装

    一  移除不需要的软件 sudo apt-get remove libreoffice-common sudo apt-get remove unity-webapps-common sudo apt ...

  2. RocketMQ与kafka对比（18项差异）-转自阿里中间件

    淘宝内部的交易系统使用了淘宝自主研发的Notify消息中间件,使用Mysql作为消息存储媒介,可完全水平扩容,为了进一步降低成本,我们认为存储部分可以进一步优化,2011年初,Linkin开源了Kaf ...

  3. 为什么kafka使用磁盘而不是内存

    Kafka最核心的思想是使用磁盘,而不是使用内存,可能所有人都会认为,内存的速度一定比磁盘快,我也不例外.在看了Kafka的设计思想,查阅了相应资料再加上自己的测试后,发现磁盘的顺序读写速度和内存持平 ...

  4. 弹性布局flex-兼容问题

    这里弹性布局的用法就不说了 用过的都知道很方便 虽然现在弹性布局已经实现标准了 但是还是存在一些兼容问题 旧版本 (一些低版本的浏览器) display:-webkit-box; 新版本(目前的标准版 ...

  5. 【MongoDB】4.MongoDB 原子修改器的 极速修改

    文档转自:http://blog.csdn.net/mcpang/article/details/7752736 对于文档的更新除替换外,针对某个或多个文档只需要部分更新可使用原子的更新修改器,能够高 ...

  6. Scrum项目8.0

    目标:我们开始做每个需要细致的界面,比方说登陆,注册,游戏界面,难度选择 内容:登陆界面:登陆名,登陆密码,登陆按钮,以及优美的底图. 注册页面:名称,密码,登陆按钮,以及优美的底图. 游戏界面:难度 ...

  7. NOI 题库 7218

    7218  献给阿尔吉侬的花束 描述 阿尔吉侬是一只聪明又慵懒的小白鼠,它最擅长的就是走各种各样的迷宫.今天它要挑战一个非常大的迷宫,研究员们为了鼓励阿尔吉侬尽快到达终点,就在终点放了一块阿尔吉侬最喜 ...

  8. 【DP】POJ 2385

    题意:又是Bessie 这头牛在折腾,这回他喜欢吃苹果,于是在两棵苹果树下等着接苹果,但苹果不能落地后再接,吃的时间不算,假设他能拿得下所有苹果,但是这头牛太懒了[POJ另一道题目说它是头勤奋的奶牛, ...

  9. javascript 减少回流

    减少回流(REFLOWS) 当浏览器重新渲染文档中的元素时需要 重新计算它们的位置和几何形状,我们称之为回流.回流会阻塞用户在浏览器中的操作,因此理解提升回流时间是非常有帮助的. 回流时间图表 你应该 ...

  10. <meta>指定浏览器模式(browser mode)或文档模式(document mode)无效

    这是前两天解决的一个故障,准确的说它不是一个SharePoint的问题,而是IE8浏览器或者说是HTML代码的问题,但我感觉还是挺有意思的,所以贴上来分享一下. 基础知识 简单的讲,就是IE浏览器中有 ...