Echats-自定义图表1

效果图:

代码:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图表</title>
    <style>
        #main {
            width: 241.82px;
            height: 188px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="main"></div>
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            series: [
                {
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    center: ['50%', '60%'], // 主体位置
                    radius: '100%', // 圆盘大小
                    min: 0,
                    max: 1,
                    splitNumber: 8, // 刻度线单位
                    itemStyle: {
                        color: '#000'
                    },
                    // 表盘主体
                    axisLine: {
                        lineStyle: {
                            width: 14,
                            color: [
                                [0.5, '#58D9F9'],
                                [0.75, '#7CFFB2'],
                                [1, '#FDDD60']
                            ]
                        }
                    },
                    // 指针
                    pointer: {
                        icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                        length: '60%',
                        width: 10,
                        offsetCenter: ['-15%', '0%'],
                        itemStyle: {
                            color: '#ccc'
                        }
                    },
                    // 小刻度线
                    axisTick: {
                        distance: -30, // 位置
                        length: 4,
                        lineStyle: {
                            color: '#ccc',
                            width: 2
                        }
                    },
                    // 大刻度分界线
                    splitLine: {
                        show: false // 不展示
                    },
                    // 刻度线文字
                    axisLabel: {
                        color: '#ccc',
                        fontSize: 16,
                        distance: -20,
                        formatter: function (value) {
                            if (value === 1) {
                                return '100';
                            } else if (value === 0) {
                                return '0';
                            }
                            return '';
                        }
                    },
                    title: {
                        offsetCenter: [0, '65%'],
                        fontSize: 14
                    },
                    detail: {
                        fontSize: 30,
                        offsetCenter: [0, '35%'],
                        valueAnimation: true,
                        formatter: function (value) {
                            return `${value * 100}%`; // 计算百分率
                        },
                        color: 'inherit'
                    },
                    data: [
                        {
                            value: 0.765,
                            name: '累计执行率'
                        }
                    ]
                },
                {
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    center: ['50%', '60%'], // 主体位置
                    radius: '120%', // 圆盘大小
                    min: 0,
                    max: 1,
                    splitNumber: 8, // 刻度线单位
                    axisLine: {
                        lineStyle: {
                            color: [[1, '#ccc']],
                            width: 2
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    pointer: {
                        show: false
                    },
                    title: {
                        show: false
                    },
                    anchor: {
                        show: false
                    }
                },
                {
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    center: ['50%', '60%'], // 主体位置
                    radius: '65%', // 圆盘大小
                    min: 0,
                    max: 1,
                    splitNumber: 8, // 刻度线单位
                    axisLine: {
                        lineStyle: {
                            color: [[1, '#ccc']],
                            width: 0.6
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    pointer: {
                        show: false
                    },
                    title: {
                        show: false
                    },
                    anchor: {
                        show: false
                    }
                }
            ]
        };

        option && myChart.setOption(option);
    </script>
</body>

</html>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

手机知识:手机“飞行模式”你真的会用吗,看完你就懂了

目录 “飞行模式”的实用技能 关于手机的谣言 回想一下&#xff0c;当你第一次知道手机上的“飞行模式”时&#xff0c;你认为这是一个怎样的功能&#xff1f; 普通青年&#xff1a;在飞机上要使用的模式。 文艺青年&#xff1a;手机终日忙忙碌碌&#xff0c;偶尔也需要放飞…

Java入门篇 之 逻辑控制(练习题篇)

博主碎碎念: 练习题是需要大家自己打的请在自己尝试后再看答案哦&#xff1b; 个人认为&#xff0c;只要自己努力在将来的某一天一定会看到回报&#xff0c;在看这篇博客的你&#xff0c;不就是在努力吗&#xff0c;所以啊&#xff0c;不要放弃&#xff0c;路上必定坎坷&#x…

宏观角度认识递归之汉诺塔问题

宏观角度认识递归 听到递归&#xff0c;不少人都会对此充满些迷惑&#xff0c;今天我们就从不同的角度来认识递归&#xff0c;消除恐惧。 递归&#xff0c;简单来说&#xff0c;就是函数自己调用自己的情况&#xff0c;也就是在一个主问题中&#xff0c;我们会引申出一个相同的…

STM32-电源管理(实现低功耗)

电源管理 STM32 HAL库对电源管理提供了完善的函数和命令。 工作模式&#xff08;高功耗->低功耗&#xff09;&#xff1a;运行、睡眠、停止、待机。 若备份域电源正常供电&#xff0c;备份域内的RTC都可以正常运行&#xff0c;备份域内的寄存器的数据会被保存&#xff0c;不…

家用洗地机哪个牌子质量最好?家用洗地机推荐

洗地机也就是集吸尘器&#xff0c;拖地&#xff0c;洗地&#xff0c;功能于一体的家电&#xff0c;无论干湿垃圾都能清理的干干净净&#xff0c;而且还不用弯腰&#xff0c;有的只用换个头&#xff0c;就从拖地变成了吸尘器和除螨仪简直就是清洁家里卫生的打扫神器啦!那么面对市…

Spring-Spring 之底层架构核心概念解析

BeanDefinition BeanDefinition表示Bean定义&#xff0c;BeanDefinition中存在很多属性用来描述一个Bean的特点。比如&#xff1a; class&#xff0c;表示Bean类型scope&#xff0c;表示Bean作用域&#xff0c;单例或原型等lazyInit&#xff1a;表示Bean是否是懒加载initMeth…

chatgpt接口调用

在线接口文档&#xff1a; https://app.apifox.com/invite?tokensymrLP7sojF6N31kZqnpZ 接口地址 https://chat.xutongbao.top/api/light/chat/createChatCompletion 请求方式 POST 请求参数 token String, 必须 prompt Array, 必须 例子一&#xff1a; 包含上下文 [ { "…

行政处罚类型有哪些?哪里能够查到一家企业的行政处罚信息?

在查询企业信息的时候&#xff0c;处理企业基础的工商信息之外&#xff0c;我们还会注意到到的就是企业的处罚信息。毕竟处罚可以直观反应出一个企业的违法违规行为&#xff0c;帮助我们直接了解企业。 那么&#xff0c;企业的行政处罚包括哪些内容呢&#xff1f; 根据《中华…

【MATLAB源码-第66期】基于麻雀搜索算法(SSA)的栅格路径规划,输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 麻雀搜索算法&#xff08;Sparrow Search Algorithm, SSA&#xff09;是一种新颖的元启发式优化算法&#xff0c;它受到麻雀社会行为的启发。这种算法通过模拟麻雀的食物搜索行为和逃避天敌的策略来解决优化问题。SSA通过模拟…

Macroscope安全漏洞检测工具简介

学习目标&#xff1a; 本介绍旨在帮助感兴趣者尽快了解 Macroscope&#xff0c;这是一款用于安全测试自动化和漏洞管理的企业工具。 全覆盖应用程序安全测试&#xff1a; 如下图所示&#xff0c;如果使用多种互补工具&#xff08;SAST/DAST/SCA 等&#xff09;来检测应用程序…

网络取证-Tomcat-简单

题干&#xff1a; 我们的 SOC 团队在公司内部网的一台 Web 服务器上检测到可疑活动。为了更深入地了解情况&#xff0c;团队捕获了网络流量进行分析。此 pcap 文件可能包含一系列恶意活动&#xff0c;这些活动已导致 Apache Tomcat Web 服务器遭到破坏。我们需要进一步调查这一…

解决uniapp的video标签和transition属性使用时出现错位的问题

template&#xff1a;三个视频都每个占满屏幕&#xff0c;点击按钮滚动最外层bgBox元素&#xff0c; style: 想要加上动画过渡效果&#xff1a; 这是显示第一个视频&#xff1a; 点按钮向上滑动滚动到第二个视频时&#xff1a; 视频错位了 &#xff0c;因为视频消失又出现的时候…

这两天公司面了一个字节来的要求月薪23K,明显感觉他背了很多面试题...

最近有朋友去字节面试&#xff0c;面试前后进行了20天左右&#xff0c;包含4轮电话面试、1轮笔试、1轮主管视频面试、1轮hr视频面试。 据他所说&#xff0c;80%的人都会栽在第一轮面试&#xff0c;要不是他面试前做足准备&#xff0c;估计都坚持不完后面几轮面试。 其实&…

泡泡玛特首度跨界超跑品牌兰博基尼汽车,以潮流基因探索时空边界

近期&#xff0c;泡泡玛特携手兰博基尼汽车&#xff0c;于上海国际赛车场进行了一场玩味十足的赛道体验。25位兰博基尼车主&#xff0c;及多位汽车领域知名媒体人、kol到场参与。兰博基尼跑车巡游、专业车手驾驶的兰博基尼涂装赛车试乘、MEGA SPACE MOLLY 1000%/400%兰博基尼汽…

【Amazon】AWS实战 | 快速发布安全传输的静态页面

文章目录 一、实验架构图二、实验涉及的AWS服务三、实验操作步骤1. 创建S3存储桶&#xff0c;存放网站网页2. 使用ACM建立域名证书3. 设置Cloudfront&#xff0c;连接S3存储桶✴️4. 设置Route53&#xff0c;解析域名服务5. 通过CLI工具上传网页更新内容【可选】 四、实验总结 …

CentOS、linux安装squid搭建正向代理,window11配置正向代理

1.CentOS安装配置squid 1.1.安装 yum install -y squid1.2.修改配置文件 在配置文件添加以下2行代码 acl localnet src 0.0.0.0/0.0.0.0 # add by lishuoboy http_access allow all # add by lishuoboy1.3.启动squid systemctl restart squid2.win11…

node复制当前目录下的文件夹到另一层目录(包含多层文件夹嵌套)

前段时间在跟进node项目时有个node项目的需求&#xff0c;然后上线流程是把前端build后的文件夹放到后端仓库的静态资源目录下&#xff0c;再把后端代码发布上线。这样做的好处是在前端页面调用接口时&#xff0c;可以直接 /xxx来调用&#xff08;浏览器会自动把域名补全&#…

基于仿真的飞机ICD工具测试

机载电子系统是飞机完成飞行任务的核心保障之一。从1949年新中国建立至今70余年的发展过程中&#xff0c;随着我国在航空航天领域的投资逐年增多&#xff0c;机载电子系统大致经历了四个发展过程阶段&#xff0c;按照出现的先后顺序进行排序&#xff0c;分别为&#xff1a; 1、…

Springboot使用EasyExcel导入导出Excel文件

1&#xff0c;准备Excel文件和数据库表结果 2&#xff0c;导入代码 1&#xff0c;引入依赖 <!-- https://mvnrepository.com/artifact/com.alibaba/easyexcel --><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifac…

掌握微信批量添加好友技巧,让你的社交更高效

微信作为当今的热门通讯工具&#xff0c;在企业营销中扮演着越来越重要的角色。然而&#xff0c;微信并没有提供自动批量添加好友的功能&#xff0c;给运营者带来了不小的挑战。一个个手动添加不仅耗时&#xff0c;而且频繁操作还容易导致账号被封。本文将介绍几种手动批量添加…
最新文章