echarts绘制饼图,部分数据隐藏指示线和文本,hover时隐藏指示线和文本的类别也不显示tooltip提示

news2024/10/6 0:30:51
option = {
  tooltip: {
    trigger: 'item',
    formatter: (p) => {
      if (p.name) {
        return `${p.name}:${p.value}个`;
      }
    },
    backgroundColor: '#ffffff',
    textStyle: { color: '#666666' } // 提示标签字体颜色
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['23%', '30%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#ffffff50',
        borderWidth: 2
      },
      label: {
        show: true
      },
      labelLine: {
        show: true,
        length: 10,
        length2: 110,
        lineStyle: {
          color: '#ffffff50',
          width: 1
        }
      },
      data: [
        {
          value: 1048,
          name: '',
          label: {
            // name为空 不显示文本
            show: false
          },
          labelLine: {
            // name为空 不显示指示线
            show: false
          }
        },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    },
    {
      // 内层圆环
      name: '',
      type: 'gauge',
      splitNumber: 180, // 刻度数量
      radius: '20%', // 图表尺寸
      center: ['50%', '50%'],
      startAngle: 0,
      endAngle: -270,
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          shadowBlur: 0,
          color: [[1, '#ffffff50']]
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    {
      // 外层圆环
      name: '',
      type: 'gauge',
      splitNumber: 240, // 刻度数量
      radius: '33%', // 图表尺寸
      center: ['50%', '50%'],
      startAngle: 90,
      endAngle: -270,
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          shadowBlur: 0,
          color: [[1, '#ffffff50']]
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    }
  ]
};

效果如下:

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

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

相关文章

第三方控价服务商怎么选

用对了方法,事半功倍,品牌控价也是如此,品牌方在治理工作中,如果选择自建团队进行处理,需要包含对数据技术的抓取团队,还要有对治理规则熟悉的操作团队,涉及人员和系统,费用成本相应…

TA百人计划学习笔记 3.1.1模板测试

资料 源视频 【技术美术百人计划】图形 3.1 深度与模板测试 传送门效果示例_哔哩哔哩_bilibili ppt 3100-模板测试与深度测试(1) 参考 Unity Shader: 理解Stencil buffer并将它用于一些实战案例(描边,多边形填充,反射区域限定,阴影…

EXECL 单元格字符串链接 CONCAT :应用:将一行数据转为json

源: 目标 函数表示 CONCAT("data", CHAR(10), "{", CHAR(10), " ", "ulAlarmId : ", A5, CHAR(10), " ", "ulAlarmLevel : ", D5, CHAR(10)," ", "bBo…

远程桌面--虚拟机与主机的文件传输

注意: 确保VMware开头的服务全部在运行进入虚拟机打开文件管理器点击计算机右键选择属性在选择远程管理选择允许 1.winR 输入mstsc 2.输入虚拟机的ip地址 2.输入虚拟机的密码 上面的Administrator是虚拟机的用户名,有时会需要我们手动输入 3.验证…

【华为 ICT HCIA eNSP 习题汇总】——题目集7

1、一台 PC 的 MAC 地址是 5489-98FB-65D8 ,管理员希望该 PC 从 DHCP 服务器获得指定的 IP 地址为192.168.1.11/24,以下命令配置正确的是()。 A、dhcp static-bind ip-address 192.168.1.11 24 mac- address 5489-98FB-65D8 B、dh…

java(渣哇)------输入与输出语句(详解) (๑•̌.•๑)

目录 一.java的输出语句: System.out.println() -----输出并换行 System.out.print() -----输出但不换行 System.out.printf() -----类似C语言的printf()输出语句,按格式进行输出 二.java的输入语句: 2.1-----Scanner的基础用法: 2.2…

【江科大】STM32:外部中断(Extern Interrupt)

文章目录 EXTI(Extern Interrupt)外部中断EXIT的基本结构EXIT框图 旋转编码器简介库函数:对射式红外传感器计次:代码展示:旋转编码器计次注意: EXTI(Extern Interrupt)外部中断 功能…

vue2中CesiumV1.113.0加载离线地形数据

离线地形数据可以放在vue项目下的public/data/sjzTerrain文件下 由于地形离线数据数量太大,在vue项目编译时会报如下错误: ERROR in EMFILE: too many open files, open D:\test_project\vue_cesium_demo\public\data\sjzTerrain\.tmp\14\26787\11669.h…

macos pip3 install pycryptodome导入from Crypto.Cipher import AES报错

问题: 已经使用pip3 install pycryptodome安装成功了,但是导入from Crypto.Cipher import AES还是提示Unresolved reference Crypto 原因: 一句话:安装文件大小写问题(这只是我遇到的一种情况)。 修改&am…

牛客周赛 Round 18 解题报告 | 珂学家 | 分类讨论计数 + 状态DP

前言 整体评价 前三题蛮简单的,T4是一个带状态的DP,这题如果用背包思路去解,不知道如何搞,感觉有点头痛。所以最后还是选择状态DP来求解。 欢迎关注 珂朵莉 牛客周赛专栏 珂朵莉 牛客小白月赛专栏 A. 游游的整数翻转 这题最好…

03.Elasticsearch应用(三)

Elasticsearch应用(三) 1.核心概念介绍 注意:类型(Type) 6.0之前的版本有Type概念,type相当于关系型数据库的表,ES官方将在ES9版本中彻底删除Type。7里面Type为ES默认的类型_doc 2.Cat API 介…

面试经典 150 题 - 多数元素

多数元素 给定一个大小为 n 的数组 nums ,返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。 你可以假设数组是非空的,并且给定的数组总是存在多数元素。 示例 1: 输入:nums [3,2,3] 输出&#xff1…

Ubutu下的Shell操作

前言 在学习Ubuntu系统时,Shell操作是必不可少的知识。本篇文章是记录我学习Linux系统时,Ubutu下的Shell操作,希望我的分享对大家有所帮助! 目录 前言 一、什么时是Shell 二、Shell的基本操作 三、常用的Shell命令 1、目录信…

C++提高编程——STL:string容器、vector容器

本专栏记录C学习过程包括C基础以及数据结构和算法,其中第一部分计划时间一个月,主要跟着黑马视频教程,学习路线如下,不定时更新,欢迎关注。 当前章节处于: ---------第1阶段-C基础入门 ---------第2阶段实战…

机器学习:什么是监督学习和无监督学习

目录 一、监督学习 (一)回归 (二)分类 二、无监督学习 聚类 一、监督学习 介绍:监督学习是指学习输入到输出(x->y)映射的机器学习算法,监督即理解为:已知正确答案…

React三大属性

我是南城余!阿里云开发者平台专家博士证书获得者! 欢迎关注我的博客!一同成长! 一名从事运维开发的worker,记录分享学习。 专注于AI,运维开发,windows Linux 系统领域的分享! 知…

【C++修行之道】STL(初识pair、vector)

目录 一、pair 1.1pair的定义和结构 1.2pair的嵌套 1.3pair自带排序规则 1.4代码示例 二、vector 2.1vector的定义和特性 2.2vector的初始化 一维初始化: 2.3vector的常用函数 2.4vector排序去重 排序: 去重: 示例: 一、pair …

Redis(六)

1、Redis的缓存淘汰策略 1.1、内存配置 首先查看Redis最大的占用内存,打开redis配置文件,设置maxmemory参数,maxmemory是bytes字节类型,注意转换。 打开配置文件发现没有配置,那么默认是多少的内存,是这样…

[pytorch入门] 3. torchvision中的transforms

torchvision中的transforms 是transforms.py工具箱,含有totensor、resize等工具 用于将特定格式的图片转换为想要的图片的结果,即用于图片变换 用法 在transforms中选择一个类创建对象,使用这个对象选择相应方法进行处理 能够选择的类 列…

MAXWELL

MAXWELL 一、maxwell是什么 maxwell 官网地址:http://maxwells-daemon.io/ 因为官网是纯英文的,倒是不难懂,但总觉得写的略粗糙(也可能笔者英文水平确实拉胯,有待提高)。所以还是自己百度了一下。 当my…