Echarts水球图(liquidFill)添加文字

news2024/11/13 15:12:38

效果

在这里插入图片描述

代码

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1911510.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

混合贪心算法求解地铁线路调度

一、问题描述 城市轨道交通的繁荣发展,带来了车辆资源需求的日益增加。如何兼顾运营服务水平和运营成本,以最少的车底优质地完成运输任务成为一大严峻问题。本题在后续的描述中将由多辆动车和拖车组合而成的车组称为车底。在日常的运营组织中&#xff0…

算力狂飙|WAIC 2024上的服务器

7月7日,2024世界人工智能大会暨人工智能全球治理高级别会议(WAIC 2024)在上海落下帷幕。这场备受瞩目的AI盛宴与热辣夏日碰撞,吸引了全球科技、产业及学术界的广泛关注,线下参观人数突破30万人次,线上流量突…

DOM(文档对象模型)生命周期事件

前言 DOM 生命周期事件涉及到从创建、更新到销毁 DOM 元素的不同阶段。 ● 我们来看下当HTML文档加载完再执行JavaScript代码 document.addEventListener(DOMContentLoaded, function (e) {console.log(HTML parsed adn DOM tree built!, e); })● 除此之外,浏览…

Linux | 安装lb-toolkits 1.2.4库

Linux | 安装 lb-toolkits 最近又需要下载葵花的数据,之前分享过一次代码。今天发现之前的环境不小心被我删了,而运行相关的代码需要安装lb-toolkits这个库,今天正好记录了一下安装lb-toolkits的过程。 这里安装的版本是1.2.4,别…

【前端从入门到精通:第十二课: JS运算符及分支结构】

JavaScript运算符 算数运算符 关于自增自减运算 自增或者自减运算就是在本身的基础上进行1或者-1的操作 自增或者自减运算符可以在变量前也可以在变量后,但是意义不同 自增自减运算符如果在变量前,是先进行自增或者自减运算,在将变量给别人用…

基于springboot+vue实现的厨艺交流平台(文末源码+Lw)093

93基于SpringBootVue的实现的厨艺交流平台(源码数据库万字Lun文流程图ER图结构图演示视频软件包) 系统功能: 这次开发的厨艺交流平台功能有个人中心,食材分类管理,用户管理,菜品分类管理,菜谱信…

力扣第一题

1. 两数之和 提示 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那 两个 整数,并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案里不能重复出现。 你可…

CSS技巧专栏:一日一例 2.纯CSS实现 多彩边框按钮特效

大家好,今天是 CSS技巧一日一例 专栏的第二篇《纯CSS实现多彩边框按钮特效》 先看图: 开工前的准备工作 正如昨日所讲,为了案例的表现,也处于书写的习惯,在今天的案例开工前,先把昨天的准备工作重做一遍。 清除浏览器的默认样式定义页面基本颜色设定body的样式清除butt…

深入理解 Qt 的 `moveToThread`:提升多线程应用性能的关键

😎 作者介绍:欢迎来到我的主页👈,我是程序员行者孙,一个热爱分享技术的制能工人。计算机本硕,人工制能研究生。公众号:AI Sun(领取大厂面经等资料),欢迎加我的…

选择排序(C语言版)

选择排序是一种简单直观的排序算法 算法实现 首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置。 再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的末尾。 重复第二步&…

CTF php RCE (一)

0x01 引言 首先进入题目 应该是大部分都是一段白盒PHP审计,然后我们为了命令执行,绕过或者是钻空子等等操作,来拿到flag 0x02 基础 0x01 传参方式 这里有两个工具,hackbar和burpsuite,这两个工具非常实用 大家可以自己Googl…

Linux 利用命名空间创建一个自己的“容器“

Linux 利用命名空间创建一个自己的"容器" 前置条件 创建一个目录存放容器mkdir /myapp准备静态编译busybox,操作系统自带的往往是依赖动态库的(本文使用的debian apt install busybox-static) 开始 使用unshare起一个独立命名空间.# 进入后/myapp目录…

办公助手推荐✨

办公助手来啦!✨ 办公助手来啦!✨🌟 主要亮点📝 全新PDF编辑器🎨 丰富的幻灯片版式🌍 改进的从右至左显示🌐 新增本地化选项 📊 应用场景在线办公套件📱 多平台支持&…

【YOLO8系列】(二)YOLOv8环境配置,手把手嘴对嘴保姆教学

目录 一. 准备环境 1.Anaconda下载 2.创建yolov8虚拟环境 3.pytorch安装 4.CUDA下载 5.CUDNN下载 二、yolov8模型下载 1.clone模型 2.pycharm配置 ①解释器配置 ②终端配置 3.安装必要库 4.下载训练模型 三、 环境验证 四、总结 YOLOv8 是 YOLO 系列最新的目标…

Springboot各个版本维护时间

Springboot各个版本维护时间

大话光学原理:1.“实体泛光说”、反射与折射

一、实体泛光说 在古希腊,那些喜好沉思的智者们中,曾流传着一个奇妙的设想:他们认为,我们的眼睛仿佛伸出无数触手般的光线,这些光线能向四面八方延伸,紧紧抓住周围的每一个物体。于是,当我们凝视…

Linux:进程间通信(二.共享内存详细讲解以及小项目使用和相关指令、消息队列、信号量)

Linux:进程间通信(二.共享内存详细讲解以及小项目使用和相关指令、消息队列、信号量) 上次结束了进程间通信一:Linux:进程间通信(一.初识进程间通信、匿名管道与命名管道、共享内存) 文章目录 …

分布式IO模块软件配置

组态接口模块 1、打开网络视图 2、拖拽出ET200SP 3、双击ET200SP的图片,进入从站配置 总线适配器的组态更换 关于IO地址分配,需要建立好子网通信后,在主机上配置。 可以看到IP 和设备名 设备与控制器的Profinet连接 先找到设备名称再找…

H桥驱动器芯片详解

H桥驱动器芯片详解 上一篇文章讲解了H桥驱动器的控制原理,本文以汽车行业广泛应用的DRV8245芯片为例,详细讲解基于集成电路的H桥驱动器芯片。 1.概述 DRV824x-Q1系列器件是德州仪器(TI)的一款专为汽车应用设计的全集成H桥驱动器…

Linux——开发工具

1.yum yum是centos中的一个软件下载安装管理客户端,可以下载需要的软件或者解决依赖关系问题(如动态库)。程序都是来源于一段源代码,为了方便下载,源代码被提前在不同的环境下编译好生成对应的yum软件包,存…