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

news2024/11/27 6:12:51

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)
},

 

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

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

相关文章

百度搜索深度学习模型业务及优化实践

作者 | Xin 导读 百度搜索架构部模型架构组,致力于将最新的人工智能技术以更低的成本被百度数亿用户体验到。这个过程中会面临非常多的系统、工程层面的问题,甚至在深度学习模型领域,我们看到越来越多的工作并不拘泥于工程本身。 本文主要分享…

Jython可以运行在java中的python

什么是Jython Jython是一种Python语言在Java平台上的实现。它旨在让Python程序员能够在Java平台上编写Python程序,同时还可以利用Java类库中的所有功能。 与传统的Python相比,Jython具有以下几个特点: 可以直接访问Java类库:因为…

C++结构体定义 创建 赋值 结构体数组

结构体是什么&#xff1f; struct是自定义数据类型&#xff0c;是一些类型集合组成的一个类型。结构体的定义方式 #include<iostream> using namespace std;struct Student {string name;int age;int score; };创建结构体变量并赋值 方式一&#xff0c;先创建结构体变…

无线通信测量仪器-4945B/C 无线电通信综合测试仪

01 4945B/C 无线电通信综合测试仪 产品综述&#xff1a; 4945B/4945C无线电通信综合测试仪是多功能、便携式无线电综合测试类仪器&#xff0c;基于软件无线电架构&#xff0c;集成了跳频信号发生与分析、矢量信号发生与解调分析、模拟调制信号发生与解调分析、音频信号发生与…

SAP 20策略测试简介

20策略相信也有很多小伙伴使用过,与50最大的不同之处就在于20策略是不能做计划独立需求的。 我看一下系统中20 策略的配置图,可以看到独立需求这里的配置都是空的。 1、我们开始测试准备物料 成品物料AB4 原材料:100197 2、创建BOM—CS01 3、创建主配方—c201 ,离散制造…

Perl语言用多线程爬取商品信息并做可视化处理

首先&#xff0c;我们需要使用Perl的LWP::UserAgent模块来发送HTTP请求。然后&#xff0c;我们可以使用HTML::TreeBuilder模块来解析HTML文档。在这个例子中&#xff0c;我们将使用BeautifulSoup模块来解析HTML文档。 #!/usr/bin/perl use strict; use warnings; use LWP::User…

如何结合内网穿透实现公网远程访问Linux AMH服务器管理面板

文章目录 1. Linux 安装AMH 面板2. 本地访问AMH 面板3. Linux安装Cpolar4. 配置AMH面板公网地址5. 远程访问AMH面板6. 固定AMH面板公网地址 AMH 是一款基于 Linux 系统的服务器管理面板&#xff0c;它提供了一系列的功能&#xff0c;包括网站管理、FTP 管理、数据库管理、DNS 管…

机器学习---多分类SVM、支持向量机分类

1. 多分类SVM 1.1 基本思想 Grammer-singer多分类支持向量机的出发点是直接用超平面把样本空间划分成M个区域&#xff0c;其 中每个区域对应一个类别的输入。如下例&#xff0c;用从原点出发的M条射线把平面分成M个区域&#xff0c;下图画 出了M3的情形&#xff1a; 1.2 问题…

银行卡转账记录p图软件,建设邮政工商招商农业,易语言回执单生成开发!

花了好长时间设计出来了这么一个软件&#xff0c;当然各个功能我都做了防范处理界面还有生成的图片都有对应的水印提示&#xff0c;做不了啥坏事&#xff0c;这里就是分享下原理和代码还有运行逻辑&#xff0c;仅此而已&#xff0c;软件加了一个画板&#xff0c;画面上面的图片…

OushuDB 专家认证第四期报名开始啦!

OushuDB 专家认证培训第四期今日正式启动&#xff01;本次培训为偶数科技面向生态合作伙伴与客户公开举办的线上培训&#xff0c;旨在共同发展 OushuDB 生态。 报名时间&#xff1a;2023年11月9日9:00—11月30日12:00 报名方式&#xff1a;偶数科技官网&#xff08;点击下方阅…

4 Paimon数据湖之Hive Catalog的使用

更多Paimon数据湖内容请关注&#xff1a;https://edu.51cto.com/course/35051.html Paimon提供了两种类型的Catalog&#xff1a;Filesystem Catalog和Hive Catalog。 Filesystem Catalog&#xff1a;会把元数据信息存储到文件系统里面。Hive Catalog&#xff1a;则会把元数据…

基于SSM的学生二手书籍交易平台的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

规划文献阅读——Obstacle Avoidance, Path Planning and Control for Autonomous Vehicles

摘要 自动驾驶汽车避障需要三个主要层面&#xff0c;即感知、路径规划和制导控制。在本文中&#xff0c;考虑到这三个层次之间的联系&#xff0c;提出了一个全局架构。在环境感知层面&#xff0c;采用基于证据占用网格的方法进行动态障碍物检测。因此&#xff0c;考虑物体的姿…

单源最短路的简单应用

1.dijkstra维护最长路 下面这个是讨论区的一个佬的理解&#xff0c;非常的nice 总结一句话&#xff0c;dijkstra的贪心保证了每次选定的点在之后都不会被其他点所更新了 同理维护最长路的时候我们发现&#xff0c;如果权值是0-1的话&#xff0c;选定的最大值在之后不会变的更大…

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

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

速锐得柴油发动机车辆数据的实时获取定位和运行状态监测设计思路

随着港口、油田、车队运输、物流及冷链等多种交通运输领域的兴起&#xff0c;保障性集团运输业务在这些领域凸显出重要的作用&#xff0c;数字化转型及平台系统性管理要求越来越高&#xff0c;针对柴油发动机车辆数据的实时获取定位和运行状态的检测方案配套平台系统&#xff0…

交叉编译 mysql-connector-c

下载 mysql-connector-c $ wget https://downloads.mysql.com/archives/get/p/19/file/mysql-connector-c-6.1.5-src.tar.gz 注意&#xff1a;mysql-connector 的页面有很多版本&#xff0c;在测试过程中发现很多默认编译有问题&#xff0c;其中上面的 6.1.5 的版本呢是经过测…

如何利用软文推广提升消费者“购买力”?

企业软文推广的目的大部分是为了将自己的产品卖出去&#xff0c;想要成功卖出去还得将重心放在消费者身上&#xff0c;今天媒介盒子就来分享&#xff0c;如何利用软文推广提升消费者的“购买力”。 一、 研究产品属性 产品是连接企业和消费者的桥梁&#xff0c;要想将产品卖出…

传输层中的TCP和UPD协议

一)应用层协议简介:根据需求明确要传输的信息&#xff0c;明确要传输的数据格式&#xff1b; 应用层协议:这个协议&#xff0c;实际上是和程序员打交道最多的协议了 1)其它四层都是操作系统&#xff0c;驱动&#xff0c;硬件实现好了的&#xff0c;咱们是不需要管 2)应用层:当我…