echarts利用graphic属性给饼图添加内圈图片及外圈图片(可自适应宽度位于饼图中心)

最终效果图:
在这里插入图片描述

目录

  • 前言
  • 资源
  • 主要部分
    • graphic介绍
    • style介绍
    • 代码
  • 加载饼图方法(option所有的配置)

前言

思路是看到这个博客启发的:点击跳转查看博客,然后在graphic属性里改了我的实际需求,譬如图片的宽高、图片位置等。

资源

外围图片、内维图片可以自己定义。这里主要用到了两个图片:
在这里插入图片描述

主要部分

graphic介绍

在图表的option配置里,给graphic添加图片以及图片设置。left和top均设置为"center",可根据屏幕分辨率自动判断中心位置。

graphic 用于添加自定义图形或文本元素到图表中的配置项,可添加文本、图形、图片等自定义元素,
这个属性通常用于创建一些特殊的标注或装饰,比如在特定位置添加一个文本标签、绘制一个自定义形状,或者放置一个图像等

常用的是添加文字和图片,下面是给图表通过graphic添加自定义文字的方法:

data.linebalance = 66.123;
option.graphic.push(
          {
            type: "text",
            right: 155,
            top: 28,
            style: {
              text: "人工站线平衡率:",
              fill: "#fff", // 文字颜色
              fontSize: 14, // 文字大小
            },
          },
          {
            type: "text",
            right: 100,
            top: 28,
            style: {
              text: (data.linebalance * 100).toFixed(1) + "%",
              fill: "#fc8c1c", // 文字颜色
              fontSize: 14, // 文字大小
            },
          }
        );
}

style介绍

style 是其中一个常用的属性,用于设置图形元素的样式

image:指定图形元素所使用的图片资源,可以是图片的 URL 或者 dataURI。
width:指定图形元素的宽度。可以是整数值(像素),也可以是百分比值。如果需要自适应图表宽度,可以使用百分比值,但需要注意,有些情况下百分比值可能导致图片不显示,这可能是因为容器大小未正确设置或者其他原因。
height:指定图形元素的高度。同样可以是整数值(像素)或者百分比值。
opacity:指定图形元素的不透明度,取值范围为 0(完全透明)到 1(完全不透明)之间。

代码

通过graphic添加自定义图片的方法:

graphic: [
          {
            type: "image",
            id: "logo",//唯一值,不可与其他graphic里的id一致
            left: "center", //调整图片位置
            top: "center", //调整图片位置
            z: -10,//确保图片在饼图下方
            //设置图片样式
            style: {
              image: centerImg,
              //   width: 80,
              //   height: 80,
              width: ciclrImgChart.getWidth() - 105,
              height: ciclrImgChart.getWidth() - 105,
              opacity: 1,
            },
          },
          {
            type: "image",
            id: "logo2",//唯一值,不可与其他graphic里的id一致
            left: "center",
            top: "center",
            z: -10,
            //设置图片样式 width、height只能用整型值,不可用百分比(会导致图片不显示)
            style: {
              image: outCircleImg,
              //   width: 200,
              //   height: 200,
              width: ciclrImgChart.getWidth() + 5,
              height: ciclrImgChart.getWidth() + 5,
              opacity: 1,
            },
          },
        ],

加载饼图方法(option所有的配置)

// 初始化圈形图
    initCircleImgFun() {
      var centerImg = require("./images/你的内圈图片路径.png");
      var outCircleImg = require("./images/你的外圈图片路径.png");

      if (ciclrImgChart != null && ciclrImgChart != "" && ciclrImgChart != undefined) {
        ciclrImgChart.dispose();
      }
      ciclrImgChart = echarts.init(document.getElementById("circleImgChart"));
      var option;
      option = {
        // 用于添加自定义图形或文本元素到图表中的配置项,可添加文本、图形、图片等自定义元素
        graphic: [
          {
            type: "image",
            id: "logo",
            left: "center", //调整图片位置
            top: "center", //调整图片位置
            z: -10,
            //设置图片样式
            style: {
              image: centerImg,
              //   width: 80,
              //   height: 80,
              width: ciclrImgChart.getWidth() - 105,
              height: ciclrImgChart.getWidth() - 105,
              opacity: 1,
            },
          },
          {
            type: "image",
            id: "logo2",//唯一值,不可与其他graphic里的id一致
            left: "center",
            top: "center",
            z: -10,
            //设置图片样式 width、height只能用整型值,不可用百分比(会导致图片不显示)
            style: {
              image: outCircleImg,
              //   width: 200,
              //   height: 200,
              width: ciclrImgChart.getWidth() + 5,
              height: ciclrImgChart.getWidth() + 5,
              opacity: 1,
            },
          },
        ],
        series: [
          {
            type: "pie",
            radius: ["85%", "65%"],
            data: [
              { value: 60, name: "4H未上架", percent: "30%" },
              { value: 60, name: "0~2H未上架", percent: "30%" },
              { value: 10, name: "2~4H未上架", percent: "10%" },
              { value: 60, name: "正在检验", percent: "30%" },
            ],
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
              },
            },
            color: ["#ff8d1a", "#29c4e3", "#2a82e4", "#43cf7c"],
          },
        ],
      };

      option && ciclrImgChart.setOption(option);
    },

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

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

相关文章

【笔试强训】除2!

登录—专业IT笔试面试备考平台_牛客网牛客网是互联网求职神器,C、Java、前端、产品、运营技能学习/备考/求职题库,在线进行百度阿里腾讯网易等互联网名企笔试面试模拟考试练习,和牛人一起讨论经典试题,全面提升你的技术能力https://ac.nowcoder.com/acm/…

如何安装sbt(sbt在ubuntu上的安装与配置)(有详细安装网站和图解)

sbt下载官网 选择对应的版本和安装程序 Download | sbt (scala-sbt.org) 安装 解压 将sbt-1.9.0.tgz上传到xshell,并解压 解压: tar -zxvf sbt-1.9.0.tgz 配置 1、在/home/hadoop/sbt中创建sbt脚本 /home/hadoop/sbt 注意要改成自己的地址 cd …

16 JavaScript学习: 类型转换

JavaScript 类型转换 Number() 转换为数字, String() 转换为字符串, Boolean() 转换为布尔值。 JavaScript 数据类型 在 JavaScript 中有 6 种不同的数据类型: stringnumberbooleanobjectfunctionsymbol 3 种对象类型: Obje…

Springboot多数据源及事务实现方案

Springboot多数据源及事务实现方案 文章目录 Springboot多数据源及事务实现方案背景问题分析实现原理1. 数据源抽象与动态路由2. 线程本地存储(ThreadLocal)3. 面向切面编程(AOP)4. 自定义注解 实现流程1. 设置数据源标识2. 开始数…

Godot3D学习笔记1——界面布局简介

创建完成项目之后可以看到如下界面: Godot引擎也是场景式编程,这里的一个场景相当于一个关卡。 这里我们点击左侧“3D场景”按钮创建一个3D场景,现在在中间的画面中会出现一个球。在左侧节点视图中选中“Node3D”,右键创建子节点…

医院手术室麻醉信息管理系统源码 自动生成麻醉的各种医疗文书(手术风险评估表、手术安全核查表)

目录 手术风险评估表 一、患者基本信息 二、既往病史 三、手术相关信息 四、风险评估因素 五、风险评估结果 手术安全核查表 一、患者身份与手术信息核对 二、术前准备核查 三、手术团队与职责确认 四、手术物品与设备核查 五、术中关键步骤核查 六、术后核查 七…

STM32中断实现旋转编码器计数

系列文章目录 STM32单片机系列专栏 C语言理论和实践总结专栏 文章目录 1. 旋转编码器 2. 中断代码编写 2.1 Interrupt.c 2.2 Interrupt.h 2.3 完整工程文件 1. 旋转编码器 旋转编码器主要用于测量轴的旋转位置、速度或者是角度的变化,它能够将转动的角度或者…

新兴游戏引擎Godot vs. 主流游戏引擎Unity和虚幻引擎,以及版本控制工具Perforce Helix Core如何与其高效集成

游戏行业出现一个新生事物——Godot,一个免费且开源的2D和3D游戏引擎。曾经由Unity和虚幻引擎(Unreal Engine)等巨头主导的领域如今迎来了竞争对手。随着最近“独特”定价模式的变化,越来越多的独立开发者和小型开发团队倾向于选择…

【数据结构】反转链表

给你单链表的头节点 head ,请你反转链表,并返回反转后的链表。 Definition for singly-linked list.struct ListNode {int val;struct ListNode *next;};typedef struct ListNode ListNode; struct ListNode* reverseList(struct ListNode* head) {i…

JavaEE初阶——文件操作和IO

T04BF 👋专栏: 算法|JAVA|MySQL|C语言 🫵 小比特 大梦想 此篇文章与大家分享文件操作及IO的内容 如果有不足的或者错误的请您指出! 目录 *1.解释IO**2.关于文件的基本知识*2.1路径2.1.1绝对路径2.1.2相对路径 2.2文件分类 *3.通过Java代码操作文件*3.1针…

Arcpy入门笔记(三):数据属性的读取

Arcpy入门笔记(三):数据属性的获取 文章目录 Arcpy入门笔记(三):数据属性的获取常用的属性Describe对象属性(部分)数据集属性(部分)表属性(部分&a…

python 脚本头(PyCharm+python头部信息、py头部信息、python头信息、py头信息、py文件头部)

文章目录 参考PyCharm设置脚本头头部信息 参考 https://developer.aliyun.com/article/1166544 https://blog.csdn.net/Dontla/article/details/131743495 https://blog.csdn.net/dongyouyuan/article/details/54408413 PyCharm设置脚本头 打开pycharm,点击file–…

5G赋能 扬帆未来|AGV无人仓成黑科技“顶流”

AGV 近年来,无人化这个概念逐渐被运用到了社会中的各个行业,而跟物流有关的就有无人分拣机器人、无人驾驶卡车、和无人叉车,越来越多的新装备也开始投入到实际运用中。 仓储管理在物流管理中占据着核心地位。传统的仓储管理中存在诸多的弊端…

怎样选购内衣洗衣机?2024年5款最新推荐机型种草

随着科技的不断发展,内衣洗衣机成为了家家户户必备的小家电之一,为我们的生活带来了极大的便利。但面对市场上众多的内衣洗衣机品牌,如何选择一款质量好的内衣洗衣机呢?本文将为您推荐5款最新的内衣洗衣机品牌,从而帮助…

一文解析golang中的协程与GMP模型

文章目录 前言1、线程实现模型1.1、用户级线程与内核级线程1.2、内核级线程模型1.3、用户级线程模型1.3、两级线程模型 2、GMP模型2.1、GMP模型概述2.1、GMP v1版本 - GM模型2.2、GMP v2版本 - GMP模型2.3、GMP相关源码2.4 调度流程2.5 设计思想 3.总结 前言 并发(并行&#x…

Babylon.js 程序化建模简明教程

Babylon.js 中的每个形状都是由三角形或小面的网格构建而成,如题图所示。 NSDT工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 - 3D模型语义搜索引擎 - Th…

(二十九)加油站:面向对象重难点深入讲解【重点是元类】

目录: 每篇前言:0. Python中的元类:1. 本文引子:2. Python中的mro机制:3. Python中类的魔法属性dict:注意事项: 拓展——内建函数dir() 4. 正式谈一谈元类(metaclass):&a…

IIR滤波器的设计与实现(内含设计IIR滤波器的高效方法)

写在前面:初学者学习这部分内容,要直接上手写代码可能会感到比较困难,我这里推荐一种高效快速的设计IIR,FIR滤波器的方法——MATLAB工具箱:filterDesigner。打开的方法很简单,就是在命令行键入:filterDesig…

virtio-wayland

CrosVM是Chrome操作系统中,用于创建虚拟机的应用。是一个Rust编写的轻量级的虚拟机。借助于CrosVM 用户可以很容易的在ChromeOS中运行Linux、Android以及Windows应用程序 概述 目前crosvm实现了virtio wayland协议,实现了对linux虚拟机wayland协议支持 …

动态规划——斐波那契数列模型:面试题08.01.三步问题

文章目录 题目描述算法原理1.状态表示2.状态转移方程3.初始化4.填表顺序5.返回值 代码实现CJava 题目描述 题目链接:面试题08.01.三步问题 如果n是0走法可能是1也可能是0,所以本题范围并不需要考虑直接从1开始即可 因为以3为结尾有直接从0到3的方式&a…