Echarts 仪表盘实现平均值和实时值

news2025/2/4 6:55:25
const gaugeData = [
  {
    value: 20,
    name: '互动发起率实时值',
    title: {
      offsetCenter: ['-25%', '10%']
    },
    detail: {
      offsetCenter: ['-25%', '18%']
    }
  },
  {
    value: 40,
    name: '互动发起平均值',
    title: {
      offsetCenter: ['25%', '10%']
    },
    detail: {
      offsetCenter: ['25%', '18%']
    }
  },
  // {
  //   value: 60,
  //   name: 'Perfect',
  //   title: {
  //     offsetCenter: ['40%', '80%']
  //   },
  //   detail: {
  //     offsetCenter: ['40%', '95%']
  //   }
  // }
];
option = {
  series: [
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      center: ['50%', '50%'],
      radius: '90%',
      min: 0,
      max: 100,
      // 仪表盘轴线相关配置
      axisLine: {
        // roundCap: true,
        lineStyle: {
          width: 6, // 轴线宽度
          color: [ // 仪表盘的轴线可以被分成不同颜色的多段。每段的结束位置和颜色可以通过一个数组来表示
            [0.25, '#FF6E76'],
            [0.5, '#FDDD60'],
            [0.75, '#58D9F9'],
            [1, '#7CFFB2']
          ]
        }
      },
      // 表盘中指针的固定点
      anchor: {
        show: true,
        showAbove: true,
        size: 8,
        itemStyle: {
          color: '#FAC858'
        }
      },
      // 仪表盘指针
      pointer: {
        icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
        width: 4,
        length: '80%', // 指针长度,可以是绝对数值,也可以是相对于半径的半分比
        offsetCenter: ['0%', '0%']
        
        // icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
        // length: '12%',
        // width: 20,
        // offsetCenter: [0, '-60%'],
        // itemStyle: {
        //   color: 'auto'
        // }
      },
      // progress: {
      //   show: true,
      //   overlap: true,
      //   roundCap: true
      // },
      data: gaugeData,
      // 仪表盘标题
      title: {
        fontSize: 14
      },
      // 仪表盘详情,用于显示数据
      detail: {
        width: 40,
        height: 14,
        fontSize: 14,
        color: '#fff',
        backgroundColor: 'inherit',
        borderRadius: 3,
        formatter: '{value}%'
      }
    }
  ]
};
setInterval(function () {
  gaugeData[0].value = +(Math.random() * 100).toFixed(2);
  // gaugeData[1].value = +(Math.random() * 100).toFixed(2);
  // gaugeData[2].value = +(Math.random() * 100).toFixed(2);
  myChart.setOption({
    series: [
      {
        data: gaugeData
      }
    ]
  });
}, 2000);

效果图:
在这里插入图片描述

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

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

相关文章

Megatron模型并行研究

Megatron模型并行研究 1. 技术调研 a. Megatron-LM Megatron-LM针对的是特别大的语言模型,使用的是模型并行的训练方式。但和普通的模型并行不同,他采用的其实是张量并行的形式,具体来说就是将一个层切开放到不同的GPU上,属于层…

前端---后端 跨域?

一、跨域 ? 跨域(Cross-Origin Resource Sharing,CORS)是浏览器的一项安全功能,它用于限制一个域名下的文档如何从另一个不同的域名、端口或协议请求资源。跨域资源共享(Cross-Origin Resource Sharing&am…

Protobuf 编码规则及c++使用详解

Protobuf 编码规则及c使用详解 Protobuf 介绍 Protocol Buffers (a.k.a., protobuf) are Google’s language-neutral, platform-neutral, extensible mechanism for serializing structured data Protocol Buffers(简称为protobuf)是谷歌的语言无关、…

邻接矩阵表示 深度遍历 广度遍历

邻接矩阵表示法是一种图的表示方法,其中每个顶点都有一个唯一的索引,而每条边则由两个顶点之间的连接确定。深度优先遍历(DFS)和广度优先遍历(BFS)是两种常用的图遍历算法。 1. 深度优先遍历(D…

【Python】matplotlib画图_饼状图

柱状图主要使用pie()函数,基本格式如下: plt.pie(x,explodeNone,labelsNone,colorsNone,autopctsNone,pctdistance0.6,shadowFalse,labeldistance1.1,staatangleNone,radiusNone,counterclockTrue,wedgepropsNone,textpropsNone,center(0,0),frameFalse…

【大数据存储与处理】第一次作业

hbase 启动步骤 1、启动 hadoop,master 虚拟机,切换 root 用户,输入终端命令:start-all.sh 2、启动 zookeeper,分别在 master、slave1、slave2 虚拟机终端命令执行:zkServer.sh start 3、启动 hbase&#x…

MySQL 分表真的能提高查询效率?

背景 首先我们以InnoDB引擎,BTree 3层为例。我们需要先了解几个知识点:页的概念、InnoDB数据的读取方式、什么是树搜索?、一次查询花费的I/O次数,跨页查询。 页的概念 索引树的页(page)是指存储索引数据…

Flutter本地化(国际化)之App名称

文章目录 Android国际化IOS国际化 Flutter开发的App,如果名称想要跟随着系统的语言自动改变,则必须同时配置Android和IOS原生。 Android国际化 打开android\app\src\main\res\values 创建strings.xml 在values上右键,选择New>Values Res…

【lesson21】MySQL复合查询(2)子查询

文章目录 子查询测试要用到的表测试要用到的数据单行子查询案例 多行子查询案例 多列子查询案例 在from子句中使用子查询案例 合并查询union案例union all案例 子查询 子查询是指嵌入在其他sql语句中的select语句,也叫嵌套查询 测试要用到的表 测试要用到的数据 单…

TOPCON拓普康BM-7A亮度色度计

用途: 其应用范围非常之广:各种电视/手机/电脑/复印机等的液晶显示屏LCD的亮度、色度、色温、对比度等项目测定;液晶领域内各部件(LED、CCFL、EL背光源,液晶模组,滤光片)的亮度、色度、配光特性…

Qt通用属性工具:随心定义,随时可见(二)

一、话接上篇 本片咱们话接上篇《Qt通用属性工具:随心定义,随时可见(一)》,讲讲自定义的对象属性如何绑定通用属性编辑工具。 二、破杯二两酒 1、一颗小花生 同样,我们先准备一个比较简单的demo&#x…

案例系列:营销模型_客户细分_无监督聚类

案例系列:营销模型_客户细分_无监督聚类 import numpy as np # 线性代数库 import pandas as pd # 数据处理库,CSV文件的输入输出(例如pd.read_csv)/kaggle/input/customer-personality-analysis/marketing_campaign.csv在这个项…

老师的责任和义务

作为一名老师,我们的责任和义务是重大的。在教育领域,我们扮演着至关重要的角色,肩负着培养下一代人才的重任。下面,我将以知乎的口吻,从几个方面谈谈老师的责任和义务。 确保学生获得高质量的教育。这包括制定合理的教…

企业级低代码平台:助力IT部门,释放业务创新力

随着低代码技术的升级,越来越多的企业开始采用低代码平台,如恒逸集团利用低代码平台快速搭建了综合业务管理平台,时间比传统开发缩短近一倍。云表低代码提供的数据、流程、权限、图表等引擎工具,完美适配企业数字化需求。根据Gart…

HarmonyOS应用事件打点开发指导

简介 传统的日志系统里汇聚了整个设备上所有程序运行的过程流水日志,难以识别其中的关键信息。因此,应用开发者需要一种数据打点机制,用来评估如访问数、日活、用户操作习惯以及影响用户使用的关键因素等关键信息。 HiAppEvent 是在系统层面…

《每天一分钟学习C语言·六》

1、 1字节(Byte)8位,1KB1024字节,1M1024KB,1G1024MB 2、 char ch A; printf(“ch %d\n”, ch);ch为65 这里是ASCII码转换 3、 scanf("%d", &i); //一般scanf直接加输入控制符 scanf("m%d&qu…

飞天使-k8s知识点4-验证安装好后功能

文章目录 接k8s知识点2之验证集群功能创建dashboard验证安装nginx 并访问tomcat 访问 接k8s知识点2之验证集群功能 [rootkubeadm-master2 tmp]# kubectl run net-test1 --imagealpine sleep 36000 pod/net-test1 created [rootkubeadm-master2 tmp]# kubectl get pod NAME …

SQLiteStudio安装指南

本博文源于笔者想要打开sqlite3的db文件,于是下载了SQLiteStudio,下载了它,sqlite3的文件随便查看,这里从零开始安装 文章目录 1、搜索官网网址2、开始下载3、开始安装4、开始使用5、总结 1、搜索官网网址 官网地址:…

说说 style gan 中的感知路径长度(Perceptual Path Length)

我在之前的博库中介绍了 style gan 的基本原理,原文中有提出感知路径长度(Perceptual Path Length)的概念。这是一种评价生成器质量的方式。 PPL基本思想:给出两个随机噪声 z 1 , z 2 ​ ,为求得两点的感知路径长度PPL…

【数据结构和算法】最大连续1的个数 III

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、题目描述 二、题解 2.1 方法一:滑动窗口 2.2 滑动窗口解题模板 三、代码 3.1 方法一:滑动窗口 四、…