echarts 仪表盘统计图

news2024/9/22 15:28:25
 <!--仪表盘统计图-->
 <div class="ybptx" ref="btryzb"></div>

mounted(){
            this.getBtData();
        }



getBtData() {
        let chart = this.$echarts.init(this.$refs.btryzb);
        let data_czzf = this.cznlzhpj.czzfs;
        let option = {
          series: [{
            name: '内层数据刻度',
            type: 'gauge',
            radius: '80%',
            min: 0,
            max: 100,
            center: ['50%', '50%'],
            pointer: {
              show: false //是否显示指针
            },
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [data_czzf / 100, new this.$echarts.graphic.LinearGradient(
                    0, 1, 0, 0,
                    [{
                      offset: 0,
                      color: '#5185e5'
                    }, {
                      offset: 1,
                      color: '#90b6fa'
                    }]
                  )],
                  [1, '#FFFFFF']
                ],
              }
            },
            splitLine: {
              show: false,
              length: 15,
              lineStyle: {
                width: 2,
                color: '#ffffff'
              }
            },
            axisTick: {
              show: false,
              lineStyle: {
                width: 1,
                color: '#ffffff'
              }
            },
            axisLabel: {
              show: false,
              color: '#0089fa',
              distance: 20,
              fontSize: 12,
            },
            detail: {
              show: true,
              offsetCenter: ['0', '0'],
              color: '#3469d1',
              fontSize: 52,
              fontWeight: 'bold',
              formatter: function(value) {
                return value.toFixed(2);
              },
            },
            itemStyle: {
              normal: {
                color: 'rgb(0,191,255)'
              }
            },
            data: [{
              value: data_czzf,
              name: "成长总分数"
            }],
            silent: false,
            title: {
              offsetCenter: [0, '75%'], //设置在线率位置
              color: '#333333',
              fontSize: 20,
              fontWeight: 'bold'
            }
          }, ]
        };
        // 绘制图表
        chart.setOption(option);
      },

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

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

相关文章

水表能实时监测哪些参数?

你是否曾经想过&#xff0c;你家的水表是如何工作的?它不仅能够记录你的用水量&#xff0c;还能实时监测一些重要的参数&#xff0c;比如水压、水温、水质等。这些参数对于保证用水安全和节约用水资源都有着重要的作用。接下来&#xff0c;小编就来为大家详细的介绍下水表能实…

java中的数据源

为什么要使用数据源 jdbc是什么 JDBC 就是使用Java语言操作关系型数据库的一套API&#xff0c;我们开发的同一套Java代码是无法操作不同的关系型数据库&#xff0c;因为每一个关系型数据库的底层实现细节都不一样。如果这样&#xff0c;问题就很大了&#xff0c;在公司中可以在…

虚拟机Ubuntu - 环境配置

文章目录 安装虚拟机安装必要工具修改IP地址修改主机名安装Java方法一&#xff1a;apt 安装方法二&#xff1a;使用PPA仓库&#xff08;适用于Ubuntu 18.04以上版本&#xff09; 远程连接另一台宿主机的虚拟机方法一&#xff1a;NAT连接方法二&#xff1a;桥连接&#xff08;推…

selenium判断元素可点击、可见、可选

1、判断元素是否可以点击 判断元素是否可以点击&#xff0c;WebElement对象调用is_enabled() is_enabled()方法返回一个布尔值&#xff0c;若可点击返回&#xff1a;True。若不可点击则返回&#xff1a;False from selenium import webdriver import time from selenium.web…

LeetCode 热题 100 - 第1题:两数之和

LeetCode 热题 100 - 第1题:两数之和 原题题目理解普通的解题思路---遍历查找进阶的解题思路---哈希查找 原题 给定一个整数数组 nums和一个整数目标值target&#xff0c;请你在该数组中找出 和为目标值 target的那两个整数&#xff0c;并返回它们的数组下标。 你可以假设每种…

Docker 镜像常用命令总结

目录 1. Docker镜像相关命令(重点掌握) 1.1 docker pull 镜像名称 [:tag] 拉取镜像 1.2 docker search 镜向名称 (查询某个镜像) 1.3 docker images 列出当前主机上所有镜像 1.4 docker rmi 镜像ID 删除镜像 1.5 docker system df 查看所有镜像容器所占空间 2. Docker …

每日一练——快速合并2个有序数组

每日一练来喽~~~ 今天up主为大家分享一个&#xff0c;快速合并2个有序数组的法子&#xff0c;注意听哟&#xff01; 题目&#xff1a; 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数…

2、TB6600驱动器介绍【51单片机控制步进电机-TB6600系列】

摘要&#xff1a;本节介绍TB6600驱动器界面及关键参数设置 一、驱动器功能界面 二、关键参数 输入电压&#xff1a;DC9-42V 输出电流&#xff1a;0.5-4A 最大功耗&#xff1a;160W 细分设置&#xff1a;1,2/A,2/B,4,8,16,32 工作温度&#xff1a;-10~45C 信号口驱动电流&…

用ST-LINK 出现连接失败【已解决】

出现的问题&#xff1a;not connect to target! 13:33:39 : Can not connect to target! Please select "Connect Under Reset" mode from Target->Settings menu and try again. If youre trying to connect to a low frequ…

【Java集合类面试二十七】、谈谈CopyOnWriteArrayList的原理

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;谈谈CopyOnWriteArrayLi…

FlutterUnit 周边 | 收录排序算法可视化

theme: cyanosis 1. FlutterUnit 更新&#xff1a;排序算法可视化 排序算法可视化是用视图层表现出算法执行过程中排序的过程&#xff0c;感谢 编程的平行世界 在 《十几种排序算法的可视化效果&#xff0c;快来看看&#xff01;&#x1f440;》》 一文中提供的算法支持。我进行…

【Proteus仿真】【Arduino单片机】继电器和按键

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器&#xff0c;使用蜂鸣器、按键、继电器、电机等。 主要功能&#xff1a; 系统运行后&#xff0c;K1键控制蜂鸣器发声&#xff0c;K2键控制LED开关&#xff0c;…

计算机图形学——二维变换

二维变换 概念 应用于对象几何描述并改变其位置、方向或者大小的变换叫做几何变换&#xff0c;有时候也被叫做建模变换。而本文仅讨论平面中的几何变换&#xff0c;即二维变换。 矩阵表示和齐次坐标 对于普通的2x2矩阵&#xff0c;我们总是要将平移项与其它变换对应的矩阵写…

MYSQL表的连接方式

mysql表连接方式可以分为 1、内连接 2、外连接 3、全连接 4、交叉连接 t1表 t2表 1、内连接&#xff0c;包括自然连接&#xff0c;等值连接&#xff0c;不等值连接 1.1、自然连接&#xff0c;根据相同字段进行连接匹配…

容联七陌百度营销通BCP解决方案,让营销更精准

百度营销通作为一个快速迭代、满足客户多元化营销需求的高效率营销工具成为众多企业的选择&#xff0c;通过百度营销通BCP对接&#xff0c;企业就可以在百度咨询页接入会话&#xff0c;收集百度来源的访客搜索关键词&#xff0c;通过百度推广获取更多的精准客户&#xff0c;从而…

基于JAVA的天猫商场系统设计与实现,springboot+jsp,MySQL数据库,前台用户+后台管理,完美运行,有一万五千字论文

目录 演示视频 基本介绍 论文目录 系统截图 演示视频 基本介绍 基于JAVA的天猫商场系统设计与实现&#xff0c;springbootjsp&#xff0c;MySQL数据库&#xff0c;前台用户后台管理&#xff0c;完美运行&#xff0c;有一万五千字论文。 本系统在HTML和CSS的基础上&#xf…

计算机起源(二)

一、前言 冯诺依曼奠定了计算机体系结构后&#xff0c;早期的计算机是没有操作系统的&#xff0c;还是需要大量的人为参与&#xff0c;比如纸卡打孔。通过纸卡上的方格&#xff0c;打孔来表示二进制数。那么如果能使计算机自动能够进行计算&#xff0c;就需要一个模拟人工的操…

Node学习笔记之使用Express框架开发接口

我们利用nodeexpressmysql开发接口&#xff0c;对数据库数据进行简单增、删、查改等操作。 工具 数据库可视化 接口测试工具Postman 1、初始化 我们这里利用nodeexpressmysql开发一个简单的书城商店API。后面会使用result API规范接口 1、创建项目 新建文件夹server 安装依…

记:2023香山杯-Ez加密器-题目复现和学习记录““

文章目录 前言题目分析and调试过程完整exp 前言 前段时间的比赛&#xff0c;那会刚入门o(╥﹏╥)o都不会写&#xff0c;现在复现一下。 题目分析and调试过程 查壳nie 进入IDA&#xff0c;shiftF12查找下字符串看看&#xff0c;定位过去 先用N重命名一下函数&#xff0c;方便…

GPDB7-新特性-角色创建

GPDB7-新特性-角色创建 9月GPDB7发布了release版本&#xff0c;新增了很多新特性及性能改进&#xff0c;对GPDB用户带来福音。业务在调研GPDB6升级到GPDB7的过程中&#xff0c;生产环境会创建用户&#xff0c;利用这些用户进行迁移。但是出现问题了&#xff0c;竟然会报&#x…