微信图片_20220628172200.png

let option = {
    backgroundColor: 'transparent',
    title: [
      {
        text: '本月用水',
        x: '17%',
        y: '83%',
        textStyle: {
          fontSize: 14,
          color: 'rgba(222, 223, 224, 1)',
          lineHeight: 16,
          textAlign: 'center',
        },
      },
      {
        text: '本月用电',
        x: '68%',
        y: '83%',
        textStyle: {
          fontSize: 14,
          color: 'rgba(222, 223, 224, 1)',
          lineHeight: 16,
          textAlign: 'center',
        },
      },
    ],
    series: [
      {
        type: 'liquidFill',
        radius: '50%',
        center: ['25%', '35%'],
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(29, 160, 205, .5)',
              },
              {
                offset: 1,
                color: 'rgba(29, 160, 205, .5)',
              },
            ],
            globalCoord: false,
          },
        ],
        data: [value.precent, value.precent], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 0,
          color: 'transparent',
        },
        label: {
          position: ['50%', '30%'],
          formatter: function () {
            return '{a|' + value.value + '}{b|m²}';
          },
          rich: {
            a: {
              fontSize: 30,
              fontFamily: 'D-DIN',
              fontWeight: 'bold',
              color: '#DEDFE0',
            },
            b: {
              fontSize: 14,
              fontFamily: 'D-DIN',
              color: '#DEDFE0',
              padding: [-10, 0, 0, 2],
            },
          },
        },
        outline: {
          show: true,
          borderDistance: 0,
          itemStyle: {
            borderWidth: 0,
          },
        },
      },
      {
        type: 'liquidFill',
        radius: '50%',
        center: ['75%', '35%'],
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(67, 197, 165,.5)',
              },
              {
                offset: 1,
                color: 'rgba(67, 197, 165,.5)',
              },
            ],
            globalCoord: false,
          },
        ],
        data: [value1.precent, value1.precent], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 0,
          color: 'transparent',
        },
        label: {
          position: ['50%', '30%'],
          formatter: function () {
            return '{a|' + value1.value + '}{b|kw/h}';
          },
          rich: {
            a: {
              fontSize: 30,
              fontFamily: 'D-DIN',
              fontWeight: 'bold',
              color: '#DEDFE0',
            },
            b: {
              fontSize: 14,
              fontFamily: 'D-DIN',
              color: '#DEDFE0',
              padding: [-10, 0, 0, 2],
            },
          },
        },
        outline: {
          show: true,
          borderDistance: 0,
          itemStyle: {
            borderWidth: 0,
          },
        },
      },
    ],
  };