zoukankan      html  css  js  c++  java
  • 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']],
                                            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%',
                                       4,
                                       color:"#000"
                                   },
                                   textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                                       //color: '#333'
                                   },
                                   splitLine: {           // 分隔线
                                   show: false,        // 默认显示,属性show控制显示与否
                                   length :20,         // 属性length控制线长
                                   lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式
                                      // color: '#eee',
                                        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',
                                       // 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',
                                            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>
  • 相关阅读:
    用pyinstaller打包一个exe程序
    Jmeter参数化(_csvread函数、CSV Data Set Config)
    mysql约束
    安全测试整理
    ultraedit 实际应用技巧
    python基础_mysql建表、编辑、删除、查询、更新
    UI测试用例设计,场景测试法
    场景法设计测试用例
    接口测试用例设计
    测试用例总结
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/7489842.html
Copyright © 2011-2022 走看看