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，路径不一样

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8.  
  9. <div id="main" style="width: 600px;height:400px;"></div>
  10. </body>
  11. <script type="text/javascript" src="js/echarts.js"></script>
  12. <script type="text/javascript">
  13. var option = { 
  14.  
  15. tooltip: {
  16. //触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'
  17. trigger: 'axis'
  18. },
  19. //图例，每个图表最多仅有一个图例
  20. legend: {
  21. //显示策略，可选为：true（显示） | false（隐藏），默认值为true
  22. show: true,
  23. //水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
  24. x: 'center',
  25. //垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
  26. y: 'top',
  27. //legend的data: 用于设置图例，data内的字符串数组需要与sereis数组内每一个series的name值对应
  28. data: ['蒸发量','降水量']
  29. },
  30. //工具箱，每个图表最多仅有一个工具箱
  31. toolbox: {
  32. //显示策略，可选为：true（显示） | false（隐藏），默认值为false
  33. show: true,
  34. //启用功能，目前支持feature，工具箱自定义功能回调处理
  35. feature: {
  36. //辅助线标志
  37. mark: {show: true}, 
  38.  
  39. //数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能
  40. dataView: {show: true, readOnly: true},
  41. //magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换
  42. magicType: {show: true, type: ['line', 'bar']},
  43. //restore，还原，复位原始图表
  44. restore: {show: true},
  45. //saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'
  46. saveAsImage: {show: true}
  47. }
  48. },
  49. xAxis: [
  50. {
  51. //显示策略，可选为：true（显示） | false（隐藏），默认值为true
  52. show: true,
  53. //坐标轴类型，横轴默认为类目型'category'
  54. type: 'category', 
  55.  
  56. //类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行
  57. data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] 
  58.  
  59. }
  60. ],
  61. dataZoom: [
  62. { type:"slider", /*类型*/
  63. xAxisIndex:0, /*对应的轴*/
  64. bottom:"10", /*位置，定位*/
  65. zoomLock:100, /*是否锁住，不能缩放*/
  66. start:0, /*开始*/
  67. end:40, /*结束*/
  68. handleIcon:"M0,0 v9.7h5 v-9.7h-5 Z", /*手柄的形状
  69. M = moveto
  70. L = lineto
  71. H = horizontal lineto
  72. V = vertical lineto
  73. C = curveto
  74. S = smooth curveto
  75. Q = quadratic Belzier curve
  76. T = smooth quadratic Belzier curveto
  77. A = elliptical Arc
  78. Z = closepath
  79. 以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
  80. * */
  81. handleStyle:{ /*手柄的样式*/
  82. color:"#294b97",
  83. borderColor:"#5476c2"
  84. },
  85. backgroundColor:"#f7f7f7", /*背景 */
  86. dataBackground:{ /*数据背景*/
  87. lineStyle:{
  88. color:"#dfdfdf"
  89. },
  90. areaStyle:{
  91. color:"#dfdfdf"
  92. }
  93. },
  94. fillerColor:"rgba(220,210,230,0.6)", /*被start和end遮住的背景*/
  95. labelFormatter:function (value,params) { /*拖动时两端的文字提示*/
  96. var str = "";
  97. if(params.length > 4){
  98. str = params.substring(0,4)+"…";
  99. }else {
  100. str = params;
  101. }
  102. return str;
  103. }
  104. }
  105. ],
  106. //直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值
  107. //纵轴通常为数值型，但条形图时则纵轴为类目型
  108. yAxis: [
  109. {
  110. //显示策略，可选为：true（显示） | false（隐藏），默认值为true
  111. show: true,
  112. //坐标轴类型，纵轴默认为数值型'value'
  113. type: 'value',
  114. //分隔区域，默认不显示 ,,,栅格阴影效果
  115. splitArea: {show: true}
  116. }
  117. ], 
  118.  
  119. //sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构；对象内包含对象
  120. series: [
  121. {
  122. //系列名称，如果启用legend，该值将被legend.data索引相关
  123. name: '蒸发量',
  124. //图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
  125. type: 'bar',
  126. //系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值
  127. 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],
  128. //系列中的数据标注内容
  129. markPoint: {
  130. data: [
  131. {type: 'max', name: '最大值'},
  132. {type: 'min', name: '最小值'}
  133. ]
  134. },
  135. //系列中的数据标线内容
  136. markLine: {
  137. data: [
  138. {type: 'average', name: '平均值'}
  139. ]
  140. }
  141. },
  142. {
  143. //系列名称，如果启用legend，该值将被legend.data索引相关
  144. name: '降水量',
  145. //图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
  146. type: 'bar',
  147. //系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值
  148. 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],
  149. //系列中的数据标注内容
  150. markPoint: {
  151. data: [
  152. {type: 'max', name: '最大值'},
  153. {type: 'min', name: '最小值'}
  154. ]
  155. },
  156. //系列中的数据标线内容
  157. markLine: {
  158. data: [
  159. {type: 'average', name: '平均值'}
  160. ]
  161. }
  162. }
  163. ]
  164. }; 
  165.  
  166. var myChart = echarts.init(document.getElementById('main'));
  167. myChart.setOption(option);
  168.  
  169. myChart.on("click",function(params){
  170. console.log(params);
  171. });
  172.  
  173. </script>
  174. </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. 【leetcode】Permutations

    题目描述: Given a collection of numbers, return all possible permutations. For example, [1,2,3] have the ...

  2. [转载]config文件的一个很好的实现

    以下是转载于网上的一个很好的config文件的实现,留存以备案 //Config.h #pragma once #include <string> #include <map> ...

  3. BestCoder Round #86

    A题 Price List 巨水..........水的不敢相信. #include <cstdio> typedef long long LL; int main() { int T; ...

  4. 浏览器-07 chromium 渲染1

    Chromium 软件渲染 软件渲染就是利用CPU,根据一定的算法来计算生成网页的内容; Chromium都是用软件渲染的技术来完成页面的绘制工作(除非强行打开硬件加速绘制); 软件渲染基础和架构 R ...

  5. BZOJ 2844 albus就是要第一个出场 ——高斯消元 线性基

    [题目分析] 高斯消元求线性基. 题目本身不难,但是两种维护线性基的方法引起了我的思考. void gauss(){ k=n; F(i,1,n){ F(j,i+1,n) if (a[j]>a[i ...

  6. Java基础知识梳理《一》

    一.Java数据类型(简单称之为“四类八种”) java 基本的数据类型长度都是固定的,好处是在实现跨平台时就统一了. 1.整型 byte short int long (分别是1,2,4,8个字节) ...

  7. iOS 应用内的系统复制粘贴菜单显示的语言非中文

    在应用的 Info.plist 文件中添加以下代码: <key>CFBundleLocalizations</key> <array> <string> ...

  8. BZOJ2471 : Count

    考虑KMP,设$f[i][j][S]$表示还剩最低$i$位没有确定,目前KMP匹配到了$j$这个位置,前缀匹配情况是$S$,最终会匹配到哪里,中途匹配成功几次. 其中$S[i]$是一个pair< ...

  9. CAS登录时不仅仅需要用户名来确认身份的情况

    最近在帮别人搞CAS,积累点经验 问题一:登录需要用户名和部门名称唯一确定一个用户,并将userid作为唯一标示. 在UsernamePasswordCredentials中添加userid 修改Qu ...

  10. CSS常用属性

    //边界线 border: 1px solid #E4E4E4; //绝对 定位 position: absolute; //相对定位 position: relative; //超出部分隐藏 ove ...