echarts仪表盘vue

news2024/11/19 23:23:53
<div class="ybptx" ref="btryzb"></div>

 mounted() {
      this.getBtData();
     
    },



getBtData() {
        var chart = this.$echarts.init(this.$refs.btryzb);
        var data_czzf= 88;
        var 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(0);
                        },
                    },
                    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/1081568.html

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

相关文章

Selenium+Pytest自动化测试框架

前言 selenium自动化 pytest测试框架 本章你需要 一定的python基础——至少明白类与对象&#xff0c;封装继承 一定的selenium基础——本篇不讲selenium&#xff0c;不会的可以自己去看selenium中文翻译网 测试框架简介 测试框架有什么优点呢&#xff1a; 代码复用率高&…

【安全】linux audit审计使用入门

文章目录 1 audit简介2 auditctl的使用2 audit配置和规则3 工作原理4 audit接口调用4.1 获取和修改配置4.2 获取和修改规则4.3 获取审计日志 5 audit存在的问题5.1 内核版本5.2 审计日志过多造成的缓存队列和磁盘问题5.2 容器环境下同一个命令的日志存在差异 6 参考文档 1 audi…

【gmail注册教程】手把手教你注册Google邮箱账号

手把手教你注册Google邮箱账号 写在前面&#xff1a; 要注意&#xff0c;注册Google邮箱必须要确保自己能够 科学上网&#xff0c;如果暂时做不到&#xff0c;请先进行相关学习。使用的手机号是大陆&#xff08;86&#xff09;的。 在保证自己能够科学上网后&#xff0c;在浏…

[硬件基础]-双稳态多谐振荡器配置

双稳态多谐振荡器配置 文章目录 双稳态多谐振荡器配置1、概述2、双稳态多谐振荡器的内部运行原理 在上一篇文章中&#xff0c;我们深入了解了555定时器在单稳态模式下的内部工作原理。 如果您已经理解了上一篇文章&#xff0c;那么本文对您来说将会非常简单。 我们将研究 555 定…

C++ - 智能指针 - auto_ptr - unique_ptr - std::shared_ptr - weak_ptr

前言 C当中的内存管理机制需要我们自己来进行控制&#xff0c;比如 在堆上 new 了一块空间&#xff0c;那么当这块空间不需要再使用的时候。我们需要手动 delete 掉这块空间&#xff0c;我们不可能每一次都会记得&#xff0c;而且在很大的项目程序当中&#xff0c;造成内存泄漏…

【合集】Java进阶——Java深入学习的笔记汇总 JVM底层、多线程、类加载 ...

前言 spring作为主流的 Java Web 开发的开源框架&#xff0c;是Java 世界最为成功的框架&#xff0c;持续不断深入认识spring框架是Java程序员不变的追求&#xff1b;而spring的底层其实就是Java&#xff0c;因此&#xff0c;深入学习Spring和深入学习Java是硬币的正反面&…

[代码随想录]二叉树篇

文章目录 1. 二叉树之层序遍历1.1 144-二叉树的前序遍历1.2 94-二叉树的中序遍历1.3 145-二叉树的后序遍历1.4 102-二叉树的层序遍历1.5 107-二叉树的层序遍历II1.6 199-二叉树的右视图1.7* 637-二叉树的层平均值1.8* 429-N叉树的层序遍历1.9 515-在每个树行中找最大值1.10* 11…

【算法挨揍日记】day14——724. 寻找数组的中心下标、238. 除自身以外数组的乘积

724. 寻找数组的中心下标 724. 寻找数组的中心下标 题目描述&#xff1a; 给你一个整数数组 nums &#xff0c;请计算数组的 中心下标 。 数组 中心下标 是数组的一个下标&#xff0c;其左侧所有元素相加的和等于右侧所有元素相加的和。 如果中心下标位于数组最左端&#…

客户成功体系如何构建?请看这7步

⭐简单说两句⭐ 作者&#xff1a;后端小知识 CSDN个人主页&#xff1a;后端小知识 &#x1f50e;GZH&#xff1a;后端小知识 &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; 客户成功体系如何构建&#xff1f;请看这7步 在中国企业服务领域的…

js获取当前月第一天最后一天

【版权所有&#xff0c;文章允许转载&#xff0c;但须以链接方式注明源地址&#xff0c;否则追究法律责任】【创作不易&#xff0c;点个赞就是对我最大的支持】 前言 仅作为学习笔记&#xff0c;供大家参考 总结的不错的话&#xff0c;记得点赞收藏关注哦&#xff01; 目录 …

C++ DAY 5

#include <iostream>using namespace std;class Sofa { private:string sit; public:Sofa(string s "-") :sit(s){cout << "sofa 构造函数" << endl;}void show (){cout << sit << endl;} }; class Bed { private:string sl…

Spring框架是什么Spring框架的体系结构

Spring框架是什么 Spring是为企业Java最流行的应用程序开发框架。数以百万计的世界各地的开发人员使用Spring框架来创建高性能&#xff0c;易于测试的&#xff0c;可重用的代码。 Spring框架是一个开源的Java平台&#xff0c;它最初是由Rod Johnson编写并在2003年6月在Apache2…

Logo设计教程:从入门到精通的全程指导

如果你想制作一个专业的Logo标识&#xff0c;但是又缺乏设计技能&#xff0c;那么乔拓云可以帮助你轻松完成这个任务。以下是通过乔拓云制作Logo标识的简单步骤&#xff1a; 1. 注册并登录乔拓云账号 访问乔拓云官网&#xff0c;注册并登录你的账号。登录后&#xff0c;你将进…

麒麟系统加密/麒麟系统防泄密

​深信达网络科技有限公司自主研发的深信达主机加固系统软件V2.0、深信达沙盒防泄密系统软件V5.0&#xff0c;与麒麟软件完成兼容认证&#xff0c;并被纳入麒麟软件安全生态联盟成员之一。 麒麟软件主要面向通用和专用领域打造安全创新操作系统产品和相应解决方案&#xff0c;以…

Linux 中如何安全地抹去磁盘数据?

哈喽大家好&#xff0c;我是咸鱼 离过职的小伙伴都知道&#xff0c;离职的时候需要上交公司电脑&#xff0c;但是电脑里面有许多我们的个人信息&#xff08;聊天记录、浏览记录等等&#xff09; 所以我们就需要先把这些信息都删除&#xff0c;确保无法恢复之后才上交 即有些…

Etsy店铺爆单的7个技巧

2023年跨境电商行业趋势愈发旺盛&#xff0c;目前正处于红利期&#xff0c;而作为近年来的电商网红“Etsy”&#xff0c;以其低成本低竞争高回报的优势吸引了大批的跨境电商玩家。但仅仅入驻照搬其他平台经验很难出单&#xff0c;如果你正烦恼这个问题&#xff0c;那么接下来的…

人工智能在教育上的应用2-基于大模型的未来数学教育的情况与实际应用

大家好&#xff0c;我是微学AI ,今天给大家介绍一下人工智能在教育上的应用2-基于大模型的未来数学教育的情况与实际应用&#xff0c;随着人工智能(AI)和深度学习技术的发展&#xff0c;大模型已经开始渗透到各个领域&#xff0c;包括数学教育。本文将详细介绍基于大模型在数学…

User Account Status 在CDB 和PDB不一致的情况 OPEN IN ROLLOVER

PDB&#xff1a; OPEN & IN ROLLOVER CDB&#xff1a; OPEN 解决办法 alter user C## expire password rollover period; select pdb.NAME, pdb.CREATION_TIME pdbcreated,du.username,du.account_status,du.LOCK_DATE,du.EXPIRY_DATE,du.CREATED,du.LAST_LOGIN,du.pro…

第十二章-系统调用

Ⅰ.Linux系统调用原理 Linux系统调用都通过中断号int 0x80完成&#xff0c;不同的系统调用函数对应eax中不同的子功能号&#xff0c;因此系统调用包括int 0x80; mov %sub_num,%%eax两个部分。 Linux系统调用包括两种方式&#xff1a;1.宏调用_syscall。2.库函数调用syscall。…

拼多多怎么引流商家?建议收藏的几个方法,拼多多引流脚本详细使用教学分享

大家好我是你们的小编一辞脚本&#xff0c;今天给大家分享新的知识&#xff0c;很开心可以在CSDN平台分享知识给大家,很多伙伴看不到代码我先录制一下视频 在给大家做代码&#xff0c;几个关于商家引流的知识今天给大家分享一下拼多多引流脚本的知识和视频演示 不懂的小伙伴可…