Echarts仪表盘实现半球带圆点

效果图:
在这里插入图片描述
代码如下:

<template>
  <div>
    <!-- 图表 -->
    <div class="echart-box" id="main"></div>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";

//声明周期函数,自动执行初始化
onMounted(() => {
  init();
});
//初始化函数
function init() {
  // 基于准备好的dom,初始化echarts实例
  let Chart = echarts.init(document.getElementById("main"));
  // 绘制图表
  let options = {
    tooltip: {
      formatter: "{a} <br/>{b} : {c}%",
    },
    color: {
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: "#116fd6", // 0% 处的颜色
        },
        {
          offset: 0.5,
          color: "#1aa9e3", // 0% 处的颜色
        },
        {
          offset: 1,
          color: "#1ecaea", // 100% 处的颜色
        },
      ],
      global: false, // 缺省为 false
    },
    itemStyle: {
      borderWidth: 50,
    },
    legend: {},
    series: [
      {
        name: "灰色背景",
        type: "gauge",
        radius: "79%",
        pointer: {
          // 仪表盘指针。
          show: false,
        },
        splitLine: {
          // 仪表盘轴线(轮廓线)相关配置。
          show: false,
        },
        axisTick: {
          show: false,
        },
        // 仪表盘轴线(轮廓线)相关配置。
        axisLine: {
          show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
          roundCap: true,
          lineStyle: {
            opacity: 1, //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
            width: 40, //轴线宽度,默认 30。
          },
        },

        axisLabel: {
          // 刻度标签。
          show: false,
        },
      },
      {
        name: "进度条展示",
        type: "gauge",
        progress: {
          show: true,
          width: 20,
          roundCap: true,
        },
        // startAngle: 170, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度,正上方为90度,正左手侧为180度。
        // endAngle: -45, // 仪表盘结束角度,默认 -45
        // clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
        // min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
        // max: 100, // 最大的数据值,默认 100 。映射到 maxAngle。
        // splitNumber: 10, // 仪表盘刻度的分割段数,默认 10。
        itemStyle: {
          // 仪表盘指针样式。
          // color: "auto", // 指针颜色,默认(auto)取数值所在的区间的颜色
          // opacity: 1, // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
          // borderWidth: 5, // 描边线宽,默认 0。为 0 时无描边。
          // borderType: "solid", // 柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'。
          // borderColor: "#ebf3fc", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color,不支持回调函数。
          // shadowBlur: 0, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
          // shadowColor: "#ebf3fc", // 阴影颜色。支持的格式同color。
        },
        // 仪表盘指针。
        pointer: {
          show: false,
        },
        splitLine: {
          // 仪表盘轴线(轮廓线)相关配置。
          show: false,
        },
        axisTick: {
          show: false,
        },
        // 仪表盘轴线(轮廓线)相关配置。
        axisLine: {
          show: false,
        },

        axisLabel: {
          // 刻度标签。
          show: false,
        },
        title: {
          fontSize: 30,
          offsetCenter: [0, "55%"],
          color: "#15294c",
        },
        detail: {
          valueAnimation: true,
          fontSize: 65,
          fontWeight: "bolder",
          formatter: "{value} km",
          offsetCenter: [0, "-5%"],
          color: "#066fd6",
        },
        data: [
          {
            value: 50,
            name: "数据(自己看吧)",
          },
        ],
      },
      {
        name: "圆点",
        type: "gauge",
        progress: {
          show: false,
        },
        pointer: {
          // 仪表盘指针。
          icon: "circle",
          width: 25,
          offsetCenter: [0, -120],
          itemStyle: {
            color: "#116fd6",
            borderColor: "#3d92ed",
            borderWidth: 5,
          },
        },
        splitLine: {
          // 仪表盘轴线(轮廓线)相关配置。
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          // 刻度标签。
          show: false,
        },
        data: [
          {
            value: 50,
          },
        ],
        detail: {
          show: false,
        },
        zlevel: 100,
      },
    ],
  };

  // 渲染图表
  Chart.setOption(options);
}
</script>

<style scoped>
.echart-box {
  width: 500px;
  height: 500px;
  color: #6d54c6;
}
</style>

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

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

相关文章

CSP认证刷题笔记(3)最大矩形(13年CSP认证第三题)

文章目录 题目描述基本思路求解代码 题目描述 在横轴上放了n个相邻的矩形&#xff0c;每个矩形的宽度是1&#xff0c;而第i&#xff08;1≤i≤n&#xff09;个矩形的高度是 hi。这n个矩形构成了一个直方图。例如&#xff0c;下图中六个矩形的高度就分别是3,1,6,5,2,3。 请找出…

【面试干货】一个数组的倒序

【面试干货】一个数组的倒序 1、实现思想2、代码实现 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 1、实现思想 创建一个新的数组&#xff0c;然后将原数组的元素按相反的顺序复制到新数组中。 2、代码实现 package csdn;public class…

Go语言不再难!跟随ChatGPT轻松攻克编程难关

开发人员&#xff08;包括我在内&#xff09;通常偏好边学习边实践的方式。这不仅仅是我与LLM协作的核心准则之一&#xff0c;也是最关键的准则&#xff1a;因为你是在任务导向的学习过程中积累知识&#xff0c;这种学习方式不是预先的——它基于实时的、可感知的情境。 当资深…

管道光电液位传感器有哪些特点

管道光电液位传感器具有多项独特特点&#xff0c;使其在水管缺水检测领域广受欢迎。管道光电液位传感器采用光学感应原理&#xff0c;利用光线在水与空气中的折射率不同来感知水位的变化。这种原理使得传感器无需任何机械运动&#xff0c;大大延长了其寿命&#xff0c;并且不易…

连绕下线和掏把下线

这里的连绕下线和掏把下线讲的是线不剪断的接法&#xff01; 这里还是以一路串联为例子&#xff0c;一相4组线圈 &#xff0c;4组线圈就需要3根套管&#xff0c;3相就需要9根套管 如下图 绕这一相4组线圈的时候&#xff0c;就已经放好一定大小的3根套管&#xff01; 这个只试…

计算机网络学习记录 数据链路层 Day3 (上)

计算机网络学习记录 数据链路层 Day3&#xff08;上&#xff09; 你好,我是Qiuner. 为记录自己编程学习过程和帮助别人少走弯路而写博客 这是我的 github https://github.com/Qiuner gitee https://gitee.com/Qiuner 如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 &#x1…

【手势识别-UISwipeGestureRecognizer轻扫 Objective-C语言】

一、接下来,我们来说这个,轻扫的手势, 1.轻扫,比如说,就是从右往左滑一下,从左往右滑一下,这个叫轻扫,不是清洁的清啊,是轻轻的轻,不是那个清扫垃圾的清啊,好,这是轻扫啊,swipe, 好,然后呢,在这个里边呢,首先,3步,也是一样的, 1)创建手势对象 2)为哪一…

香港身份|香港优才计划2024申请条件是什么?一文梳理流程、打分、政策、续签指南!

香港优才计划2024申请条件是什么&#xff1f;一文梳理流程、打分、政策、续签指南&#xff01; 一个香港身份可以为申请人家庭带来教育、税务、医疗、通行自由等一系列优势。但申请香港优才并不轻松&#xff0c;因此总结了过来人经验分享这篇攻略&#xff0c;讲讲香港优才申请…

基于DEXPI标准的xml转成svg图片的测试

通过对java代码的一顿反编译&#xff0c;这个功能逐渐实现了。也打了日志&#xff0c;通过编码实现了svg的视图的裁剪大小。选择xml文件然后选择文件夹&#xff0c;程序自动进行转换&#xff0c;最后生成svg文件。 最后的xml转换后的成品如下图&#xff1a; 通过与达美盛的工具…

PWM 什么是PWM?

1. 什么是PWM&#xff1f; PWM是Pulse Width Modulation的缩写&#xff0c;中文是脉冲宽度调制。 是利用微处理器的数字输出来对模拟电路进行控制的一种技术。 2. 面积等效原理 2.1. 什么是面积等效原理&#xff1f; 冲量相等而形状不同的窄脉冲施加在惯性环节上时&#xf…

Qwen学习笔记4:Qwen 7B模型调用天气API实现天气的即时查询

前言 在学习Qwen模型的函数调用功能后&#xff0c;进一步尝试利用本地的Qwen模型访问OpenWeather API来获取实时的天气情况。 参考代码来源于视频教程&#xff1a; 简单粗暴&#xff0c;轻松配置Qwen模型查询实时数据功能_哔哩哔哩_bilibili 说明 该代码运行前&#xff0c…

蓝桥杯-线性动态规划问题背包问题进阶策略详解-青蛙吃虫

题目&#xff1a;蓝桥云课-青蛙吃虫 解题代码&#xff1a; #include <iostream> #include<cstring> #include<algorithm> using namespace std;const int N106;int f[N][N]; int a[N]; int t,l,r,k,n;int main() {cin>>t;while(t--){scanf("%d%…

入职java开发第一天,不会VUE竟然被.........

Vue2 技术栈 第 1 章&#xff1a;Vue 核心1.1. Vue 简介1.1.1. 官网1.1.2. 介绍与描述1.1.3. Vue 的特点1.1.4. 与其它 JS 框架的关联1.1.5. Vue 周边库 1.2. 初识 Vue1.3. 模板语法1.3.1. 效果1.3.2. 模板的理解1.3.3. 插值语法1.3.4. 指令语法 1.4. 数据绑定1.4.1. 效果1.4.2…

Java官网下载JDK17版本详细教程(下载、安装、环境变量配置)

第一步&#xff0c;去百度搜索甲骨文官网 第二步 第三步 第四步 第五步 第六步 第七步 第八步 第九步 第十步 然后在系统变量里面找到path-编辑-新建添加这个,点击确定就好了 %JAVA_HOME%\bin 就完成了&#xff0c;接下来测试是否成功。 测试&#xff1a; 第一步&a…

Vue3学习笔记 - 禹神YYDS

1. 教程介绍 https://www.bilibili.com/video/BV1Za4y1r7KE?p1 本篇vue3&#xff0c;内容比较新&#xff0c;比如有setup语法糖用法&#xff1b;只是他使用TS&#xff0c;并不是JS&#xff1b;不过JS也比较熟悉了&#xff0c;也可以学习下TS的语法&#xff0c;课程使用 TypeSc…

Clickhouse

概念 来源 ClickHouse背后的研发团队是俄罗斯的Yandex公司。Yandex是一家俄罗斯的搜索引擎公司&#xff0c;类似于我国的百度&#xff0c;Yandex于2011年在纳斯达克上市。 架构演变 特点 Clickhouse使用的是列式存储 图中第二个使用的列式存储在提取某一部分的全部数据时&a…

KING大咖直播 | KES RAC如何成为核心系统首选?

核心系统负载高 停机代价大 KES RAC来了 KingbaseES共享存储集群 不仅满足您对数据库 扩展性与可用性的严苛要求 更能在保障性能的同时 实现低成本、高效益 是企业核心系统的理想选择 5月16日19:30-20:30 锁定金仓数据库视频号 人大金仓高级研发工程师 深度揭秘如何实现 Kingba…

PXE+Kickstart无人值守安装操作系统

文章目录 什么是PXE&#xff1f;PXE工作原理示意图说明一、环境二、安装前准备三、DHCP服务器配置四、TFTP服务准备五、VSftpd服务准备六、PXE菜单七、重启服务八、创建虚拟机-自动安装系统 什么是PXE&#xff1f; PXE&#xff0c;全名Pre-boot Execution Environment&#xf…

接口自动化框架篇:接口框架中的常归断言封装!

在接口自动化测试中&#xff0c;断言&#xff08;Assertion&#xff09;是非常重要的一部分。通过对接口的返回结果进行断言&#xff0c;我们可以确认接口是否返回了正确的数据&#xff0c;从而验证接口的正确性。 为了提高代码的可读性和可维护性&#xff0c;我们通常会将常用…

前沿动态 | 关于AI大模型,你知道多少?

AI大模型含义 AI 大模型是人工智能预训练大模型的简称&#xff0c;包含了“预训练”和“大模型”两层含义&#xff0c;二者结合产生了新的人工智能模式&#xff0c;即模型在大规模数据集上完成预训练后&#xff0c;仅需少量数据的微调甚至无需微调&#xff0c;就能直接支撑各类…