自定义echarts仪表盘去掉指针

如图:
在这里插入图片描述

代码:

option = {
          //提示框组件。开发实际中去掉了指针,提示框可以不用设置。
          tooltip: {
            formatter: "{a} <br/>{b} : {c}%"
          },
          //工具栏。本次好像也没用到,刷新,下载,我觉得还是挺实用的,具体开需求!
          toolbox: {
            feature: {
              restore: {},
              saveAsImage: {}
            }
          },
          //下面属性才是仪表盘的核心!!反正我是这么认为的!!!
          series: [{
            //类型
            type: 'gauge',
            //半径
            radius: 150,
            //起始角度。圆心 正右手侧为0度,正上方为90度,正左手侧为180度。
            startAngle: 180,
            //结束角度。
            endAngle: 0,
            center: ['50%', '90%'],
            //仪表盘轴线相关配置。
            axisLine: {
              show: true,
              color: '#333',
              // 属性lineStyle控制线条样式
              lineStyle: {
                width: 20,
                color: [[50 / 100, '#31e4f4'], [1, '#166c7d']]

              }
            },
            //分隔线样式。
            splitLine: {
              show: false,
            },
            //刻度样式。
            axisTick: {
              show: false,
            },
            //刻度标签。
            axisLabel: {
              show: false,
            },
            //仪表盘指针。
            pointer: {
              //这个show属性好像有问题,因为在这次开发中,需要去掉指正,我设置false的时候,还是显示指针,估计是BUG吧,我用的echarts-3.2.3;希望改进。最终,我把width属性设置为0,成功搞定!
              show: false,
              //指针长度
              length: '90%',
              width: 0,
            },
            //仪表盘标题。
            title: {
              show: true,
              offsetCenter: [0, '-40%'], // x, y,单位px
              textStyle: {
                color: '#000',
                fontSize: 30
              }
            },
            //仪表盘详情,用于显示数据。
            detail: {
              show: true,
              offsetCenter: [0, '-10%'],
              formatter: 50 + '     {value}%',

              textStyle: {
                fontSize: 30,
                color: '#31e4f4'
              }
            },
            data: [{
              value: 50,
              name: '存储量'
            }]
          }]
        };
  • 5
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南北极之间

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值