Echats-自定义图表2

news2024/11/16 17:30:10

效果图:

 代码:

<!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: 237px;
            height: 250px;
        }
    </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',
                    radius: '100%', // 圆盘大小
                    splitNumber: 10, // 刻度线单位
                    center: ['50%', '50%'], // 主体位置
                    startAngle: 216,
                    endAngle: -36,
                    z: 1,//y轴
                    min: 0,
                    max: 1,
                    itemStyle: {
                        color: '#2f9bff'
                    },
                    progress: {
                        show: true,
                        width: 12
                    },
                    axisLine: {
                        lineStyle: {
                            width: 12
                        }
                    },
                    // 中心圆点
                    anchor: {
                        show: false
                    },
                    pointer: {
                        show: false
                    },
                    // 小刻度线
                    axisTick: {
                        distance: 6,
                        length: 2,
                        lineStyle: {
                            color: '#666',
                            width: 1
                        }
                    },
                    splitLine: {
                        show: false // 不展示
                    },
                    axisLabel: {
                        show: false // 不展示
                    },
                    title: {
                        offsetCenter: [0, '85%'],
                        fontSize: 15,
                        color: 'rgba(37,35,58,0.4)'
                    },
                    detail: {
                        fontSize: 34,
                        offsetCenter: [0, '62%'],
                        valueAnimation: true,
                        formatter(value) {
                            return `${(value * 100).toFixed(2)}%`; // 计算百分率
                        },
                        color: '#2F9BFF'
                    },
                    data: [
                        {
                            value: 0.7,
                            name: '累计执行率'
                        }
                    ]
                },
                {
                    type: 'gauge',
                    radius: '50%', // 圆盘大小
                    splitNumber: 5, // 刻度线单位
                    center: ['50%', '50%'], // 主体位置
                    startAngle: 216,
                    endAngle: -36,
                    min: 0,
                    max: 1,
                    // itemStyle: {
                    //   color: '#ccc'
                    // },
                    // progress: {
                    //   show: true,
                    //   width: 12
                    // },
                    axisLine: {
                        lineStyle: {
                            width: 18,
                            color: [[1, '#DCE4FE']]
                        }
                    },
                    // 中心圆点
                    anchor: {
                        show: true,
                        size: 6,
                        showAbove: true, // 固定点是否显示在指针上面
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 8
                        }
                    },
                    pointer: {
                        width: 2,
                        offsetCenter: [0, '24%'],
                        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',
                        length: '220%',
                        itemStyle: {
                            color: '#1FA4FC'
                        }
                    },
                    // 小刻度线
                    axisTick: {
                        distance: -78,
                        length: 13,
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.6)',
                            width: 3
                        }
                    },
                    splitLine: {
                        show: false // 不展示
                    },
                    axisLabel: {
                        show: false // 不展示
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [
                        {
                            value: 0.7,
                            name: '累计执行率'
                        }
                    ]
                }
            ]
        };

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

</html>

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

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

相关文章

iptables的四表五链以及一些应用小场景

一、前言 本文主要学习iptables的一些学习&#xff0c;讲解一些四表五链的基本概念&#xff0c;同时通过iptables实现一下场景&#xff0c;比如反向代理端口、禁用域名、限制IP和端口访问。 二、基本概念 2.1 什么是iptables iptables是Linux的防火墙管理工具而已&#xff0c…

昂利康-002940 三季报分析(20231030)

昂利康-002940 基本面分析 基本情况 公司名称&#xff1a;浙江昂利康制药股份有限公司 A股简称&#xff1a;昂利康 成立日期&#xff1a;2001-12-30 上市日期&#xff1a;2018-10-23 所属行业&#xff1a;医药制造业 周期性&#xff1a;0 主营业务&#xff1a;化学原料药及制剂…

hack_me_please靶机攻略

hack_me_please 扫描 探查无果&#xff0c;扫描js的时候有结果 访问可以看到 该页面可以看到是SeedDMS搭的 应该和CMS类似 渗透 漏洞库查找一下有没有该漏洞 使用whatweb扫描一下刚才的页面 whatweb http://10.4.7.154/seeddms51x/seeddms-5.1.22/ 这个版本高于漏洞库的&a…

软考系统架构师知识点集锦八:嵌入式系统

一、考情分析 二、考点精讲 2.1嵌入式系统概述 2.1.1基本概念 (1)嵌入式系统是以应用为中心、以计算机技术为基础,并将可配置与可裁剪的软、硬件集成于一体的专用计算机系统&#xff0c;需要满足应用对功能、可靠性、成本、体积和功耗等方面的严格要求。 (2)从计算机角度看,嵌…

0039Java程序设计-基于java校园闲置物交易系统论文

文章目录 摘 要目 录系统设计开发环境 摘 要 本文的研究方向是设计和实现学生闲置物网上交易平台。目前&#xff0c;各大高校每年都要举办热热闹闹的“跳蚤”市场&#xff0c;就是给师生的一个闲置物品交易的场所&#xff0c;由此可以看出&#xff0c;大学生对闲置物品交易掉的…

数据结构:算法(特性,时间复杂度,空间复杂度)

目录 1.算法的概念2.算法的特性1.有穷性2.确定性3.可行性4.输入5.输出 3.好算法的特质1.正确性2.可读性3.健壮性4.高效率与低存储需求 4.算法的时间复杂度1.事后统计的问题2.复杂度表示的计算1.加法规则2.乘法规则3.常见函数数量级比较 5.算法的空间复杂度1.程序的内存需求2.例…

CAN总线通信协议

Reference video: 趋近于完美的通讯 CAN总线&#xff01;4分钟看懂&#xff01; CAN通信精华整理&#xff0c;汽车工程师必备技能&#xff0c;一个视频带你轻松掌握&#xff01; 写在前面&#xff1a;CAN通信就三个要点 - 波特率的配置 - 过滤寄存器的配置与理解&#xff08;…

Django 社区志愿者管理系统

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 社区志愿者服务管理系统&#xff0c;主要的模块包括查看首页、个人中心、通知公告管理、志愿者管理、普通管理员管理、志愿活动管理、活动宣…

计算机毕业设计选题推荐-超市售货微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

【C语言初学者周冲刺计划】1.1用筛选法求100之内的素数

目录 1解题思路&#xff1a; 2代码如下&#xff1a; 3运行代码如图所示&#xff1a; 4总结&#xff1a; (前言周冲刺计划:周一一个习题实操&#xff0c;依次类推加一&#xff0c;望各位读者可以独自实践敲代码) 1解题思路&#xff1a; 首先了解筛选法定义&#xff1a;先把…

免费的PPT模版--九五小庞

PPT模板&#xff1a; www.1ppt.com/moban/    行业PPT模板&#xff1a;www.1ppt.com/hangye/ 节日PPT模板&#xff1a;www.1ppt.com/jieri/    PPT素材&#xff1a; www.1ppt.com/sucai/PPT背景图片&#xff1a;www.1ppt.com/beijing/   PPT图表&#xff…

AssertionError: Torch not compiled with CUDA enabled

Pytorch和CUDA版本不兼容&#xff0c;运行python后&#xff08;终端输入python回车&#xff09;用以下代码测试 import torch print(torch.__version__) print(torch.cuda.is_available())返回False则说明目前的pytorch版本无法使用显卡&#xff0c;如下图所示 接着重装合适版…

新能源汽车电池包自动三维尺寸检测系统蓝光光学平面度测量仪-CASAIM

电池包是新能源汽车核心能量源&#xff0c;为整车提供驱动电能。作为新能源汽车的核心部件&#xff0c;其品质直接决定了整车性能。 由于电池包的生产工艺相对复杂&#xff0c;传统的测量工具不仅测量工序复杂、精度不足&#xff0c;还会或多或少接触到电池表面形成瑕疵&#…

[UDS] --- ECUReset 0x11

1 0x11功能描述 根据ISO14119-1标准中所述&#xff0c;诊断服务11主要用于Client向Server(ECU)请求重启行为。该重启行为将会导致Server复位回归到特定的初始状态&#xff0c;具体是什么初始状态取决于Client的请求行为。 2 0x11应用场景 一般而言&#xff0c;对于11诊断服务…

案例分析真题-系统建模

案例分析真题-系统建模 2009年真题 【问题1】 【问题2】 【问题3】 2012年真题 【问题1】 【问题2】 【问题3】 2014年真题 【问题1】 【问题2】 骚戴理解&#xff1a;这个题目以前经常考&#xff0c;不知道今年会不会考&#xff0c;判断的话就是看加工有没有缺少输入和输出&a…

Linux进程的概念

一&#xff1a;冯诺依曼体系结构 什么叫做体系结构&#xff1f;&#xff1f;&#xff1f; 计算机组成 / 芯片架构 输入单元&#xff1a;键盘、话筒、摄像头、usb、鼠标、磁盘&#xff08;ROM&#xff09;/ssd、网卡、显卡 存储器&#xff1a;内存&#xff08;RAM&#xff09…

apache seatunnel支持hive jdbc

上传hive jdbc包HiveJDBC42.jar到seatunel lib安装目录 原因是cloudera 实现了add batch方法 创建seatunnel任务文件mysql2hivejdbc.conf env {execution.parallelism = 2job.mode = "BATCH"checkpoint.interval = 10000 } source {Jdbc {url = "jdbc:mysql:/…

Kafka设计原理详解

Kafka核心总控制器Controller 在Kafka集群中会有一个或者多个broker&#xff0c;其中有一个broker会被选举为控制器&#xff08;Kafka Controller&#xff09;&#xff0c;它负责管理整个集群中所有分区和副本的状态。 当某个分区的leader副本出现故障时&#xff0c;由控制器…

UEditor编辑器导入自定义html模板,jeesite框架报json.parse()错误

文章目录 前言一、错误描述1. 选择模板错误2. 填入模板数据错误二、解决方案1. 选择模板错误解决2.填入数据错误解决总结前言 实现效果如下图: 添加模板 选择模板 填入模板及对应数据 一、错误描述 1. 选择模板错误

Java修仙传之Flink篇

大道三千:最近我修Flink 目前个人理解&#xff1a; 处理有界&#xff0c;无界流的工具 FLINK&#xff1a; FLINK定义&#xff1a; Flink特点 Flink分层API 流的定义 有界数据流&#xff08;批处理&#xff09;&#xff1a; 有界流&#xff1a;数据结束了&#xff0c;程序也…