自定义echarts仪表盘去掉指针

骑猪看日落 2022-09-12 06:45 351阅读 0赞

如图：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp5LiL54aZ54aZ55qG5Li65Yip5p2l5ZWK_size_14_color_FFFFFF_t_70_g_se_x_16]

代码：

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: '存储量'
                }]
              }]
            };

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp5LiL54aZ54aZ55qG5Li65Yip5p2l5ZWK_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/bc9e891c4ad54f7aa18adbd4d75efee2.png