echarts儀表盤配置參數


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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM