Echarts水球图（liquidFill）添加文字

效果

代码

  {
      type: 'liquidFill',
      shape: shapes[0].value,
      radius: '90%',
      data: [
        {
          name: '独立百货',
          value: 0
        }
      ],
      center: ['50%', '50%'],
      color: [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#446bf5'
            },
            {
              offset: 1,
              color: '#2ca3e2'
            }
          ],
          globalCoord: false
        }
      ],
      backgroundStyle: {
        borderWidth: 1,
        color: 'rgba(51, 66, 127, 0.7)'
      },
      label: {
        normal: {
          textStyle: {
            // fontSize: 50,
            color: '#fff'
          },
          formatter: '独立百货\n\n{c}',
          fontSize: 28,
        }
      },
      outline: {
        show: false,
        borderDistance: 10,
        itemStyle: {
          borderWidth: 2,
          borderColor: '#112165'
        }
      }
    }

设置水波纹下的文字颜色

 label: {
        normal: {
          textStyle: {
            // fontSize: 50,
            color: '#fff'
          },
          insideColor:'red', // 这行
          formatter: '独立百货\n\n{c}',
          fontSize: 28,
        }
      },

自定义文字

      label: {
        normal: {
          textStyle: {
            color: '#fff'
          },
          formatter: function (params){
            return '{title|'+params.name+'}' + '\n'+ '{value|' + params.value.toFixed(2)*100+'%' + '}';
          },
          fontSize: 28,
          rich: {
            title: {
              fontSize: '18px',
            },
            value:{
              fontSize: '42px',

            }
          },
        },
      },

测试数据

{
  "source":[{
    "name": "独立百货",
    "value": 0.5
  }]
}