echarts 圆环图 高亮事件 切换 中心文字

createEcharts() {
  let chartDom = this.$refs.echarts
  this.Echarts = echarts.init(chartDom)

  let option = {
    title: {
      text: '128', //主标题文本
      subtext: '总数', //副标题文本
      left: 'center',
      top: '32%',
      textStyle: {
        fontFamily: 'Montserrat-MediumItalic',
        fontSize: 30,
        color: '#fff',
        align: 'center',
      },
      subtextStyle: {
        fontFamily: 'Source Han Sans CN',
        fontSize: 16,
        color: '#AEAEB2',
      },
    },
    series: [
      {
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['50%', '60%'],
        label: {
          color: '#fff',
        },
        itemStyle: {
          borderColor: '#1b2b3c',
          borderWidth: 2,
        },
        data: [
          { value: 128, name: '正常', itemStyle: { color: '#92c7f7' } },
          { value: 24, name: '离线', itemStyle: { color: '#c0c5c9' } },
          { value: 6, name: '故障', itemStyle: { color: '#ff673b' } },
        ],
      },
    ],
  }
  
  this.Echarts.on('mouseover', (params) => {
    // 获取高亮的数据项的值
    let highlightedValue = params.data.value

    // 更新饼图标题
    this.Echarts.setOption({
      title: {
        text: highlightedValue,
      },
    })
  })

  option && this.Echarts.setOption(option)
},

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

构建全面预算体系,加强企业风险管理

全面预算管理体系是帮助企业实现其战略目标的重要手段。随着预算管理理念备受重视,这种新型的企业管理模式通过高效科学的方式和工具,在我国新时代背景下,逐渐成为了企业经营运作过程中针对挑战的有效措施。通常情况下,企业将全面…

Vue、fabricJS 画布实现自由绘制折线

作者GitHub:https://github.com/gitboyzcf 有兴趣可关注 Vue3代码,Vue2相似改吧改吧 前言 Fabric.js Fabric.js(英文官网)是一个强大而简单的 Javascript HTML5画布库(也就是针对canvas进行的封装操作,使…

Java设计模式-创建者模式-工厂模式

工厂模式 工厂模式简单工厂模式工厂方法模式抽象工厂模式 工厂模式 要求:由一个特定的工厂提供所需的对象,由工厂来完成对象的创建 工厂模式一般分为三种:简单工厂模式,工厂方法模式,抽象工厂模式 其中简单工厂模式不…

SSL证书优惠购买,HTTPS证书双11价格

SSL证书优惠购买哪里有?如何申请HTTPS证书?就看沃通2023“双十一限时特惠”活动,精选HTTPS证书、国密HTTPS证书年度优惠好价,单域名SSL证书、通配符SSL证书任您选择!沃通优惠价格、服务优势,访问沃通CA官网…

为什么说软文推广中了解用户是关键?

数字化时代下软文成为众多企业推广品牌的方式之一,所谓软文,就是指以向用户提供信息,并将产品隐含在信息中的柔性手段。 想要使软文效果明显,就必须深入了解用户,把握其需求、兴趣和行为特点,这也是今天媒…

白嫖阿里云服务器,速看!数量不多

白嫖阿里云服务器攻略来了,在阿里云免费试用中心可以申请免费服务器,但是阿里云百科不建议选择免费的,只有3个月使用时长,选择99元服务器不是更香,2核2G配置3M固定带宽,一年99元,重点是新老用户…

react 修改less文件后保存,内存溢出,项目崩溃问题解决

一、完整报错 一个很老的react项目,因为没有package-lock.json版本锁,导致拉下来的时候,安装的依赖版本冲突,好不容易启动起来,修改less文件后只要一保存,项目就会崩溃,需要重启,报…

如何优雅的开发?试试这个低代码项目

一、前言 众所周知,开发一个大型的企业级系统,公司往往需要大量的人力做支持后盾,如需要需求分析师、数据库管理员、前台美工、后台程序员、测试人员等。 在快速发展中的企业里,尤其是中小企业,都是一个萝卜多个坑&…

说说React的事件机制?

一、是什么 React基于浏览器的事件机制自身实现了一套事件机制,包括事件注册、事件的合成、事件冒泡、事件派发等 在React中这套事件机制被称之为合成事件 合成事件(SyntheticEvent) 合成事件是 React模拟原生 DOM事件所有能力的一个事件…

怎么写日语开发信?写外贸日语开发信技巧?

如何写好日语开发信?日语开发信格式是怎么样的? 无论您是初学者还是有经验的营销专家,都需要掌握一些关键技巧,以确保您的邮件在日本市场取得成功。蜂邮将向您介绍怎样写一封令人印象深刻的日语开发信,以吸引潜在客户…

埃隆·马斯克旗下xAI推出PromptIDE工具,加速提示工程和可解释性研究

🦉 AI新闻 🚀 埃隆马斯克旗下xAI推出PromptIDE工具,加速提示工程和可解释性研究 摘要:埃隆马斯克旗下人工智能初创公司xAI推出了PromptIDE工具,该工具是一个用于提示工程和可解释性研究的集成开发环境。通过该工具&a…

2024 年天津专升本招生实施办法(天津专升本文化报名考试时间)

2024 年天津市高职升本科招生实施办法 为做好2024年天津市高职升本科招生工作,天津市招生委员会高等学校招生办公室(以下简称“市高招办”)依据教育部、天津市有关规定,制定本实施办法。 一、招生章程 1.招生学校要制…

C语言求解:有n个人围成一圈,顺序排号。从第一个人开始报数(从1到3报数),凡报到3的人退出圈子,问最后留下的是原来第几号的那位(约瑟夫问题)

完整代码&#xff1a; /* 有n个人围成一圈&#xff0c;顺序排号。从第一个人开始报数&#xff08;从1到3报数&#xff09;&#xff0c;凡报到3的人 退出圈子&#xff0c;问最后留下的是原来第几号的那位*/ #include<stdio.h>//约瑟夫问题 //递推关系f(n)(f(n-1)2)\mod n…

Python---upper()--转大写///与lower() --转小写

upper()&#xff1a;把字符串全部转换为 大写形式 lower()&#xff1a;把字符串全部转换为 小写形式 upper 英 /ˈʌpə(r)/ adj. 上面的&#xff0c;上层的&#xff0c;较高的&#xff1b;顶部的&#xff0c;上部的&#xff1b;&#xff08;在机构、体系等中&#xff…

单链表(增删改查)【超详细】

目录 单链表 1.单链表的存储定义 2.结点的创建 3.链表尾插入结点 4.单链表尾删结点 5.单链表头插入结点 6.单链表头删结点 7.查找元素&#xff0c;返回结点 8.在pos结点前插入一个结点 ​编辑 9.在pos结点后插入一个结点 10.删除结点 11.删除pos后面的结点 12.修改…

科技改变农业:合成数据农业中的应用

介绍 农业在我们的生活中起着至关重要的作用&#xff0c;它为我们提供了生存的食物。如今&#xff0c;它遇到了各种困难&#xff0c;例如气候变化的影响、缺乏工人以及全球流行病造成的中断。这些困难影响了耕作用水和土地的供应&#xff0c;而这些水和土地正变得越来越稀缺。…

小红书广州探店达人对接流程,小红书达人话术有哪些?

很多时候&#xff0c;在刚开始接触这个行业时&#xff0c;许多人不知道如何对接达人&#xff0c;也不知道如何开口才能一下子打蛇打七寸&#xff0c;有事半功倍之效。今天我们为大家带来小红书广州探店达人对接流程&#xff0c;小红书达人话术有哪些&#xff1f; 1. 自我介绍和…

CAN总线记录诊断助手 CAN记录仪

随着CAN总线的应用市场越来越多&#xff0c;不仅局限于汽车行业&#xff0c;工程车、特种车、消防、医疗等多行业都是以CAN总线通讯为主。总线的调试诊断也成为技术日常工作&#xff0c;有个好的工具能有效帮助发现问题、解决问题。 来可电子的CANLog-VCI是一款即插即用的CAN数…

智汇云舟入选IDC《中国智慧园区解决方案2023年厂商评估》报告

近日&#xff0c;全球领先的市场研究和咨询公司IDC发布报告《中国智慧园区解决方案2023年厂商评估》。报告内&#xff0c;IDC对中国市场具有代表性、且符合评估入围门槛要求的智慧园区解决方案厂商进行了综合评估。智汇云舟凭借在产品、技术等方面的综合优势&#xff0c;与大华…

智汇云舟荣获2023轨道交通国际创新创业大赛“最具市场前景奖”

11月9日&#xff0c;由北京市科学技术委员会、中关村科技园区管理委员会、北京市经济和信息化局、北京市丰台区人民政府、中关村发展集团股份有限公司主办的2023中关村轨道交通国际创新创业大赛总决赛圆满收官。 智汇云舟提报的《视频孪生 改变视界》项目在数百个参赛项目中脱…