股墓山庄

专注于AS3,JavaScript 每天一点进步,坚持...
  博客园  :: 首页  :: 新随笔  :: 联系 :: 管理

echarts 仪表盘参数

Posted on 2020-06-04 17:19  股墓山庄庄主  阅读(503)  评论(0编辑  收藏  举报
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'], */
                                           ],
                                       width: 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%',
                                   width: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',
                                       width: 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',
                                   //width: 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"]
                                          ],
                                       width: this.$formatter.nowSize(5),
                                       type: 'solid'
                                   }
                               }

                           }
                        ]
                }