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
  }]
}

相关推荐

最近更新

  1. Github 2024-07-20 开源项目日报Top10

    2024-07-11 02:00:04       0 阅读
  2. Linux内核(3)-内核模块结构详解

    2024-07-11 02:00:04       0 阅读
  3. 数据库对比

    2024-07-11 02:00:04       0 阅读
  4. SQL-正则表达式

    2024-07-11 02:00:04       0 阅读
  5. 03Spring底层架构核心概念解析

    2024-07-11 02:00:04       0 阅读

热门阅读

  1. nginx部署vue项目

    2024-07-11 02:00:04       7 阅读
  2. 【网络】SCTP协议概念

    2024-07-11 02:00:04       5 阅读
  3. Git 完整的提交规范教程

    2024-07-11 02:00:04       5 阅读
  4. 【Zoom安全解析】深入Zoom的端到端加密机制

    2024-07-11 02:00:04       6 阅读
  5. Qt QSettings 使用详解:跨平台的配置管理

    2024-07-11 02:00:04       6 阅读
  6. Docker Dockerfile:构建与优化

    2024-07-11 02:00:04       5 阅读
  7. 面试题07-09

    2024-07-11 02:00:04       7 阅读
  8. docker里日志分割的方法

    2024-07-11 02:00:04       6 阅读
  9. C#面:解释startup class的configure方法有什么作用?

    2024-07-11 02:00:04       8 阅读
  10. 甲方安全员应该持有什么心态

    2024-07-11 02:00:04       8 阅读
  11. Memcached介绍和详解

    2024-07-11 02:00:04       9 阅读