效果图:

在这里插入图片描述

配置项option:

option: {
        backgroundColor: 'transparent',
        color: ['#3060ff', '#44c6fe', '#ffc455', '#25dd96', '#25cedd', '#4AEAB0'],
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            const color = params.color
            const dotHtml =
              '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
              color +
              '"></span>'

            return dotHtml + params.name + ':' + params.value + ' 台'
          }
        },
        title: [
          {
            text: '{val|0}\n{name|异常总数}',
            top: 'center',
            left: 'center',
            textStyle: {
              rich: { //自定义样式
                name: {
                  fontSize: 12,
                  fontWeight: 'normal',
                  color: '#999'
                },
                val: {
                  fontSize: 38,
                  fontWeight: 'bold',
                  color: 'white'
                }
              }
            }
          }
        ],
        series: [
          { //主体圆环,带颜色部分
            type: 'pie',
            radius: ['47%', '72%'],
            center: ['50%', '50%'],
            data: [
		        {
		          name: '总体振动',
		          value: '4'
		        },
		        {
		          name: '噪声声压',
		          value: '4'
		        },
		        {
		          name: '表面温度',
		          value: '2'
		        },
		        {
		          name: '表面温升',
		          value: '2'
		        },
		        {
		          name: '其他',
		          value: '4'
		        }
            ],
            z: 666,
            hoverAnimation: true,
            itemStyle: { //圆环部分的样式
              normal: {
                borderColor: '#242e43',
                borderWidth: 2
              }
            },
            labelLine: { // 每段环延伸出去的线条
              length: 5, //第一段折线的长度
              length2: 40, //第二段折线的长度
              lineStyle: {
                type: 'dashed',
                cap: 'round'
              }
            },
            label: { // 每段圆环延伸出去的文字说明
              normal: {
                formatter: function(params) {
                  if (params.name !== '') {
                    return '{name|' + params.name + '}' + '\n' + '{value|' + params.percent + '%}'
                  } else {
                    return ''
                  }
                },
                rich: {
                  name: {
                    fontSize: 12,
                    color: '#999',
                    lineHeight: 20
                  },
                  value: {
                    fontSize: 12,
                    color: 'white'
                  }
                }
              }
            }
          },
          { //最外层圆环 装饰用,不用来统计数据
            type: 'pie',
            radius: ['83%', '100%'],
            hoverAnimation: false,
            name: '',
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: [
              {
                name: '',
                value: 0,
                itemStyle: {
                  normal: {
                    color: '#2f3e65'
                  }
                }
              }
            ],
            tooltip: {
              formatter: function(params) {
                return ''
              }
            }
          },
          { //最内层圆形,有渐变效果,用于图表装饰
            type: 'pie',
            radius: ['0%', '55%'],
            hoverAnimation: false,
            name: '',
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: [
              {
                name: '',
                value: 0,
                itemStyle: { // 给圆设置渐变色
                  color: {
                    type: 'radial', //径向渐变
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [{
                      offset: 0.5, color: 'rgba(40, 66, 133, 0)' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#284285' // 100% 处的颜色 #284285 rgba(255,255,255, 0)
                    }]
                  }
                }
              }
            ],
            tooltip: {
              formatter: function(params) {
                return ''
              }
            }
          }
        ]
}
Logo

前往低代码交流专区

更多推荐