文章目录

特点

主要用于在进度把控以及数据范围的检测
可以更直观的表现某个指标的进度或实际情况

使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仪表盘</title>
    <script src="Echarts_kaifa.js"></script>
</head>
<body>
    <div>
        <h4>type:gauge 仪表盘 </h4>
        <div id="gauge" style="width: 600px;height:400px;"></div>
    </div>
    <hr>
    <script>
        let myEchart = echarts.init(document.querySelector("#gauge"))
        let option = {
            series:[
                {   
                    type:'gauge', // 仪表盘
                    data:[
                        {value:82}, // 每个对象都代表一个指针
                    ]
                }
            ]
        }
        myEchart.setOption(option)
    </script>  
</body>
</html>

在这里插入图片描述

常用配置

数值范围 min max
series:[
	{   
	     type:'gauge', // 仪表盘
	     data:[
	         {value:82}, // 每个对象都代表一个指针
	     ],
	     // 取值范围
	     min:20,
	     max: 150
	 }
]

在这里插入图片描述

多个指针

data配置多个数据

 data:[
    {value:82}, // 每个对象都代表一个指针
    {value:52},
 ],

在这里插入图片描述

多个指针差异
series:[
    {   
        type:'gauge', // 仪表盘
        data:[
            { // 每个对象都代表一个指针
                value:82,
                itemStyle:{
                    color:'red'
                }
            }, 
            {
                value:52,
                itemStyle:{
                    color:'green'
                }
            },
        ],
        // 取值范围
        min:20,
        max: 150
    }
]

在这里插入图片描述

Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

从零开始实现一个C++高性能服务器框架----序列化模块

序列化类。封装一个内存块，使用链表将内存块连接，实现动态扩容代码语言：javascriptAI代码解释//构造指定大小的内存块Node();~Node();char* ptr;//内存块地址指针Node* next;//下一个内存块地址//内存块大小主要支持以下方法代码语言：javascriptAI代码解释// 写入固定长度int8_t类型的数据// 写入固定长度uint8_t类型的数据// ..

avatar 2048 AI社区

从概念开始开始C++管道编程

管道是UNIX和类UNIX系统中最古老、最基础的进程间通信（IPC）机制之一。你可以将它想象成现实世界中的水管：数据像水流一样从一个进程"流"向另一个进程。核心特征半双工通信：数据只能单向流动（要么从A到B，要么从B到A）字节流导向：没有消息边界，数据是连续的字节流基于文件描述符：使用与文件操作相同的接口内核缓冲区：数据在内核缓冲区中暂存理解基本原理：文件描述符、缓冲区、阻塞行为掌握核心API学会

avatar 2048 AI社区

C++进阶技巧：如何在同一对象中存储左值或右值

要定义const访问，需要使变量内部的三种可能类型中的每一种都产生一个const引用。为了访问变量中的数据，将使用std::visit和规范的overload模式，这可以在c++ 17中实现：代码语言：C++自动换行AI代码解释要获得const引用，只需为每种variant创建一个：展开代码语言：C++自动换行AI代码解释非const引用的创建使用相同的技术，除了variant是之外，它不能产生非

avatar 2048 AI社区