require.config({ paths:{ echarts:"js/chart" } }); require([ 'echarts', 'echarts/chart/gauge' ],function(ec){ var option = { tooltip : { formatter: "{a} <br/>{b} : {c}分" }, toolbox: {//工具欄 如刷新、保存為圖片等 show : false, /*feature : { mark : {show: true}, restore : {show: true}, saveAsImage : {show: true} }*/ }, series : [ { name:'',//儀表盤名字 type:'gauge',//類型是儀表盤 radius: 70, data:[{value:85, name: '得分'}],//儀表盤的值為85,鼠標經過時顯示的框名字為“得分” center : ['50%', '78'],//儀表盤的位置 第一個值為x軸,第二個值為y軸 startAngle:180,//開始角度 endAngle:0,//結束角度 splitNumber: "none",//刻度的值,如果設置為0,在IE8中,左上角有多一塊內容,不需要顯示就設置為none,需要顯示就設置具體數值,如10 axisLine: { // 坐標軸線,也就是圓圈的邊框線 show: false, // 默認顯示,屬性show控制顯示與否 lineStyle: { // 屬性lineStyle控制線條樣式 //color: [[0.2, 'f9fafb'],[0.4, 'orange'],[0.8, 'skyblue'],[1, '#ff4500']], width: 10 } }, pointer: {//point為設置指針箭頭的效果 //這個show屬性好像有問題,因為在這次開發中,需要去掉指正,我設置false的時候,還是顯示指針,估計是BUG吧,我用的echarts-3.2.3;希望改進。最終,我把width屬性設置為0,成功搞定! //當鼠標經過時會顯示 箭頭中間會顯示一條白色的區域,這個區域可以通過css調整 如#map canvas[data-zr-dom-id=_zrender_hover_]{display: none!important;} show: true, //指針長度 length:'60%', width:4, color:"#000" }, textStyle: { // 其余屬性默認使用全局文本樣式,詳見TEXTSTYLE //color: '#333' }, splitLine: { // 分隔線 show: false, // 默認顯示,屬性show控制顯示與否 length :20, // 屬性length控制線長 lineStyle: { // 屬性lineStyle(詳見lineStyle)控制線條樣式 // color: '#eee', width: 2, type: 'solid' } }, title : { show : false, //offsetCenter: ['-65%', -10], // x, y,單位px textStyle: { // 其余屬性默認使用全局文本樣式,詳見TEXTSTYLE color: '#333', fontSize : 15 } }, detail : {//最下邊數值的設置 show : true, //backgroundColor: 'rgba(0,0,0,0)', // borderWidth: 0, // borderColor: '#ccc', //width: 100, //height: 40, offsetCenter: ['0', '10'], // x, y,單位px formatter:'{value}%', textStyle: { // 其余屬性默認使用全局文本樣式,詳見TEXTSTYLE color: '#3ebf27', fontSize : 18 } }, axisTick: { // 坐標軸小標記 show: false, // 屬性show控制顯示與否,默認不顯示 splitNumber: 5, // 每份split細分多少段 length :8, // 屬性length控制線長 lineStyle: { // 屬性lineStyle控制線條樣式 color: '#eee', width: 1, type: 'solid' } } } ] }; var authWay = ec.init(document.getElementById("map")); authWay.setOption(option); window.onresize = authWay.resize; });
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=1000"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/chart/echarts.js"></script> </head> <body> <div id="map"></div> </body> </html>
