echarts + gauge + 半圆效果

news2024/10/6 6:46:54

在这里插入图片描述
请注意以下配置需要echarts 5.0.0以上版本,4是不行的

option = {
    series: [
        {
          center: ['50%', '80%'],
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 150,
            axisTick: {show: false},
            splitLine: {show: false},
            detail: {
              color: '#3096fe',
              offsetCenter: [0, -10],
              formatter : (val) => {
                console.log(val);
                return val;
              }
            },
            axisLabel: {
                color: '#464646',
                fontSize: 20,
                distance: -50,
                rotate: 0,
                formatter: function (value) {
                    if (value === 0) {
                        return 'D';
                    } else if (value === 30) {
                        return 'C';
                    } else if (value === 60) {
                        return 'B-';
                    } else if (value === 90) {
                        return 'B';
                    } else if (value === 120) {
                        return 'B+';
                    } else if (value === 150) {
                        return 'A';
                    }
                    return '';
                }
            },
            pointer: {show: false},
            axisLine: {
                lineStyle: {
                    width: 50
                }
            },
            progress: {
                show: true,
                width: 50,
                roundCap: true,
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0, color: '#58D9F9' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#1890ff' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            },
            data: [{ value: 150}]
        }
    ]
};

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

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

相关文章

Docker部署Stable-Diffusion-webui

前排提示:如果不想折腾,可直接跳到最后获取封装好的容器,一键运行 :D 前言 乘上AI生成的快车,一同看看沿途的风景。 启一个miniconda容器 docker run -itd -v 宿主机内SD项目路径:/tmp --gpus all --ipc host -p 7860:7860 con…

echarts柱状图添加白色柱状图背景+滚动+柱状顶部添加横线

echarts柱状图添加白色柱状图背景滚动 <template><div class"stream-water-wrapper"><div id"biologybgchart" class"bck-chart"></div><div id"biologychart" class"biology-chart"></…

【JS基础】定时器的使用、事件监听

文章目录 前言一、定时器1.1定时器是什么1.2 setInterval函数1.3 关闭定时器clearInterval 二、事件监听2.1 事件监听是什么2.2 事件监听的使用基本语法点击事件鼠标事件焦点事件键盘事件 2.3 事件对象event 总结 前言 JavaScript 中的定时器和事件监听是 Web 开发中至关重要的…

如何在今日头条广告中轻松唤起微信?这个方法你一定不能错过

要在今日头条的广告中调起微信&#xff0c;实现加好友的功能&#xff0c;可以参考以下步骤&#xff1a; 首先&#xff0c;通过搜索引擎找到“数灵通”外链工具的官网&#xff0c;并进入其后台。在后台填写相关参数&#xff0c;生成一条能够跳转到微信的链接。这个链接的作用是…

云手机哪一款好用?

随着海外市场的不断发展&#xff0c;云手机市场也呈现蓬勃的态势&#xff0c;众多云设备软件纷纷涌现。企业在选择云手机软件时&#xff0c;如何找到性能卓越的软件成为一项关键任务。在众多选择中&#xff0c;OgPhone云手机凭借其卓越的性能和独特功能脱颖而出。以下是OgPhone…

机器学习分类模型评价指标总结(准确率、精确率、召回率、Fmax、TPR、FPR、ROC曲线、PR曲线,AUC,AUPR)

为了看懂论文&#xff0c;不得不先学一些预备知识&#xff08;&#xff08;55555 主要概念 解释见图 TP、FP、TN、FN 准确率、精确率&#xff08;查准率&#xff09;、召回率&#xff08;查全率&#xff09; 真阳性率TPR、伪阳性率FPR F1-score2TP/(2*TPFPFN) 最大响应分…

【python】爬取豆瓣影评保存到Excel文件中【附源码】

欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 【往期相关文章】 爬取豆瓣电影排行榜Top250存储到Excel文件中 爬取豆瓣电影排行榜TOP250存储到CSV文件中 爬取知乎热榜Top50保存到Excel文件中 爬取百度热搜排行榜Top50可视化 爬取斗鱼直播照片保存到本地目录 爬…

司铭宇老师:汽车销售培训:汽车销售员培训:汽车销售技巧培训:汽车销售技巧和话术

汽车销售培训&#xff1a;汽车销售员培训&#xff1a;汽车销售技巧培训&#xff1a;汽车销售技巧和话术 汽车销售是一项充满挑战性的工作&#xff0c;它需要销售人员具备良好的沟通技巧、谈判技巧以及产品讲解能力。在这篇文章中&#xff0c;我们将详细探讨汽车销售中的技巧和话…

无状态应用管理Deployment

无状态应用管理Deployment 1、Deployment介绍 Deployment一般用于部署公司的无状态服务。 格式&#xff1a; apiVersion: apps/v1 kind: Deployment metadata: name: nginx-deployment labels: app: nginx spec: replicas: 3 selector: matchLabels: app: nginx …

openlayers+vue实现缓冲区

文章目录 前言一、准备二、初始化地图1、创建一个地图容器2、引入必须的类库3、地图初始化4、给地图增加底图 三、创建缓冲区1、引入需要的工具类库2、绘制方法 四、完整代码总结 前言 缓冲区是地理空间目标的一种影响范围或服务范围,是对选中的一组或一类地图要素(点、线或面…

2024年最新MacBook苹果电脑安装JDK8、JDK11教程,配置环境变量 + 快速切换JDK版本

本帖发布日期&#xff1a;2024年01月26日&#xff0c;全网最新教程整理。 1、概述 本文主要为在MacBook苹果电脑系统下安装JDK及环境变量配置。 教程并非原创&#xff0c;摘抄自互联网&#xff0c;本人作为更新整理亲测。&#xff08;也算给自己记录一贴&#xff09; 本帖分…

python之异常的捕获、模块、包

目录 1.了解异常 2.异常的捕获 3.异常的传递性 4.模块的概念和导入 5.自定义模块并导入 6.自定义python包 7.安装第三方包 1.了解异常 2.异常的捕获 直接报错了&#xff0c;说明我们捕获的就是名字的异常而没有捕获除0的异常。 这样就可以打印出异常 捕获全部的异常可以使…

HTML-表单

表单 概念&#xff1a;一个包含交互的区域&#xff0c;用于收集用户提供的数据。 1.基本结构 示例代码&#xff1a; <form action"https://www.baidu.com/s" target"_blank" method"get"><input type"text" name"wd&q…

使用代码取大量2*2像素图片各通道均值,存于Exel文件中。

任务是取下图RGB各个通道的均值及标签&#xff08;R, G&#xff0c;B&#xff0c;Label&#xff09;,其中标签由图片存放的文件夹标识。由于2*2像素图片较多&#xff0c;所以将结果放置于Exel表格中&#xff0c;之后使用SVM对他们进行分类。

20.云原生之GitLab集成Runner

云原生专栏大纲 文章目录 GitLab RunnerGitLab Runner 介绍GitLab Runner分类GitLab Runner工作流程 Gitlab集成Gitlab RunnerGitLab Runner 版本选择Runner在CitLab中位置专用Runner在gitlab中位置群组Runner在gitlab中位置共享Runner在gitlab中位置 GitLab部署Gitlab Runner…

Pandas ------ 向 Excel 文件中写入含有 multi-index 和 Multi-column 表头的数据

Pandas ------ 向 Excel 文件中写入含有 multi-index 和 Multi-column 表头的数据 引言正文 引言 之前在 《pandas向已经拥有数据的Excel文件中添加新数据》 一文中我们介绍了如何通过 pandas 向 Excel 文件中写入数据。那么对于含有多表头的数据&#xff0c;我们该如何将它们…

Linux管道学习(无名管道)

目录 1、概述 2、管道的创建 3、管道读写行为 3.1、管道读 3.2、管道写 4、管道用于兄弟进程之间的通讯 在linux中管道有两种&#xff0c;一是无名管道&#xff08;匿名管道&#xff09;&#xff0c;第二种是有名管道&#xff1b;无名管道主要用于有血缘关系的父子进程间…

八、Kotlin 反射

1. 什么是反射 反射是允许在运行时期访问 程序结构 的一类特性&#xff08;程序结构包括&#xff1a;类、接口、方法、属性等&#xff09;。 2. 反射的依赖库 Kotlin 中不仅自己实现了一套 Kotlin 反射的 API&#xff0c;还可以使用 Java 反射的 API。 Kotlin 反射的 API 是…

day33WEB 攻防-通用漏洞文件上传中间件解析漏洞编辑器安全

目录 一&#xff0c;中间件文件解析漏洞-IIS&Apache&Nginx -IIS 6 7 文件名 目录名 -Apache 换行解析 配置不当 1、换行解析-CVE-2017-15715 2、配置不当-.htaccess 配置不当 -Nginx 文件名逻辑 解析漏洞 1、文件名逻辑-CVE-2013-4547 2、解析漏洞-nginx.conf …

ECharts 中 Legend自定义可以使用svg标签

效果图&#xff1a; legend图例加载svg标签 在ECharts中&#xff0c;图例(legend)组件的formatter属性允许你自定义图例文本的格式。但是&#xff0c;formatter属性不支持直接加载SVG标签或Html。它接受一个字符串或者一个函数作为输入&#xff0c;并不能解析或渲染SVG。 如果…