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>

 

转载于:https://www.cnblogs.com/dongxiaolei/p/7489842.html