• echarts 仪表盘参数


    option: {
                        /* min: 0,
                                max: 300, */
                        tooltip: {
                           // formatter: '{a} <br/>{b} : {c}%'
                        },
                            toolbox: {
                                /* feature: {
                                    restore: {},
                                    saveAsImage: {}
                                } */
                            },
                            series: [
                                 {
                                   name:'',//仪表盘名字
                                   type:'gauge',//类型是仪表盘
                                   radius: '90%',
                                   data:[{value:90, name: ''}],//仪表盘的值为85,鼠标经过时显示的框名字为“得分”
                                   center : ['50%', '55%'],//仪表盘的位置 第一个值为x轴,第二个值为y轴
                                  // startAngle:180,//开始角度
                                  // endAngle:0,//结束角度
                                   splitNumber: 8,//刻度的值,如果设置为0,在IE8中,左上角有多一块内容,不需要显示就设置为none,需要显示就设置具体数值,如10
                                   axisLine: {            // 坐标轴线,也就是圆圈的边框线
                                       show: true,        // 默认显示,属性show控制显示与否
                                       lineStyle: {       // 属性lineStyle控制线条样式
                                           color: [
                                               [0.125, "#00ffff"],
                                                               [0.25, "#00ffff"],
                                                               [0.375, "#00ffff"],
                                                               [0.5, "#00ffff"],
                                                               [0.625, "#0c2b7d"],
                                                               [0.75, "#0c2b7d"],
                                                               [0.875, "#0c2b7d"],
                                                               [1, "#0c2b7d"],
                                                               
                                              /* [0.2, '#00ffff'],[0.4, '#00ffff'],[0.8, '#0c2b7d'],[1, '#0c2b7d'], */
                                               ],
                                            0
                                       }
                                   },
                                   pointer: {//point为设置指针箭头的效果
                                       //这个show属性好像有问题,因为在这次开发中,需要去掉指正,我设置false的时候,还是显示指针,估计是BUG吧,我用的echarts-3.2.3;希望改进。最终,我把width属性设置为0,成功搞定!
                            //当鼠标经过时会显示 箭头中间会显示一条白色的区域,这个区域可以通过css调整  如#map canvas[data-zr-dom-id=_zrender_hover_]{display: none!important;}
                                       show: false,
                                       //指针长度
                                       length:'60%',
                                       4,
                                       color:"#000"
                                   },
                                   textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                                       //color: '#333'
                                   },
                                   axisLabel: {
                                               show: false,
                                               fontSize: this.$formatter.nowSize(10)
                                             },
                                   splitLine: {           // 分隔线
                                       show: true,        // 默认显示,属性show控制显示与否
                                       length :this.$formatter.nowSize(10),         // 属性length控制线长
                                       lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式
                                           color: 'auto',
                                            this.$formatter.nowSize(5),
                                           type: 'solid'
                                       }
                                   },
                                   title : {
                                       show : true,
                                       offsetCenter: ['-5%', this.$formatter.nowSize(10)],       // x, y,单位px
                                       textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                                           color: '#ffffff',
                                           fontSize : this.$formatter.nowSize(10)
                                       }
                                   },
                                   detail : {//最下边数值的设置
                                       show : true,
                                       //backgroundColor: 'rgba(0,0,0,0)',
                                      // borderWidth: 0,
                                      // borderColor: '#ccc',
                                       // 100,
                                       //height: 40,
                                       offsetCenter: ['0', this.$formatter.nowSize(-20)],       // x, y,单位px
                                       formatter:'{value}',
                                       textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                                          color: '#ffffff',
                                           fontSize : this.$formatter.nowSize(50),//中间大数值
                                           fontFamily:'FZ',
                                       }
                                   },
                                   axisTick: {            // 坐标轴小标记
                                       show: true,        // 属性show控制显示与否,默认不显示
                                       splitNumber: 3,    // 每份split细分多少段
                                       length :this.$formatter.nowSize(10),         // 属性length控制线长
                                       lineStyle: {       // 属性lineStyle控制线条样式
                                           color: [
                                                [0.125, "#86b65b"],
                                                [0.25, "#afcb52"],
                                                [0.375, "#f0eb6c"],
                                                [0.5, "#f89424"],
                                                [0.625, "#ee4924"],
                                                [0.75, "#d62628"],
                                                [0.875, "#93242a"],
                                                [1, "#700e17"]
                                              ],
                                            this.$formatter.nowSize(5),
                                           type: 'solid'
                                       }
                                   }
    
                               }
                            ]
                    }
  • 相关阅读:
    iOS-开发日志-UIButton
    苹果API常用英语名词
    iOS-开发日志-UIimageView
    IOS-开发日志-UILabel相关
    iOS-开发日志-UIPageControl
    Maven-生成可执行的Jar包
    RabbitMQ不讲武德,发个消息也这么多花招
    Azure Service Bus(三)在 .NET Core Web 应用程序发送ServiceBus Queue
    windows server 2012 R2里IIS配置.net core2.1遇到的坑
    VScode中配置C++运行环境
  • 原文地址:https://www.cnblogs.com/wqing/p/13044799.html
Copyright © 2020-2023  润新知