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>