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

本文主要是介绍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);},

这篇关于echarts利用graphic属性给饼图添加内圈图片及外圈图片(可自适应宽度位于饼图中心)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/938444

相关文章

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

基于Python开发批量提取Excel图片的小工具

《基于Python开发批量提取Excel图片的小工具》这篇文章主要为大家详细介绍了如何使用Python中的openpyxl库开发一个小工具,可以实现批量提取Excel图片,有需要的小伙伴可以参考一下... 目前有一个需求,就是批量读取当前目录下所有文件夹里的Excel文件,去获取出Excel文件中的图片,并

Java实现数据库图片上传与存储功能

《Java实现数据库图片上传与存储功能》在现代的Web开发中,上传图片并将其存储在数据库中是常见的需求之一,本文将介绍如何通过Java实现图片上传,存储到数据库的完整过程,希望对大家有所帮助... 目录1. 项目结构2. 数据库表设计3. 实现图片上传功能3.1 文件上传控制器3.2 图片上传服务4. 实现

Spring Cloud之注册中心Nacos的使用详解

《SpringCloud之注册中心Nacos的使用详解》本文介绍SpringCloudAlibaba中的Nacos组件,对比了Nacos与Eureka的区别,展示了如何在项目中引入SpringClo... 目录Naacos服务注册/服务发现引⼊Spring Cloud Alibaba依赖引入Naco编程s依

Java实现数据库图片上传功能详解

《Java实现数据库图片上传功能详解》这篇文章主要为大家详细介绍了如何使用Java实现数据库图片上传功能,包含从数据库拿图片传递前端渲染,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、前言2、数据库搭建&nbsChina编程p; 3、后端实现将图片存储进数据库4、后端实现从数据库取出图片给前端5、前端拿到

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

Python中__new__()方法适应及注意事项详解

《Python中__new__()方法适应及注意事项详解》:本文主要介绍Python中__new__()方法适应及注意事项的相关资料,new()方法是Python中的一个特殊构造方法,用于在创建对... 目录前言基本用法返回值单例模式自定义对象创建注意事项总结前言new() 方法在 python 中是一个

Python使用PIL库将PNG图片转换为ICO图标的示例代码

《Python使用PIL库将PNG图片转换为ICO图标的示例代码》在软件开发和网站设计中,ICO图标是一种常用的图像格式,特别适用于应用程序图标、网页收藏夹图标等场景,本文将介绍如何使用Python的... 目录引言准备工作代码解析实践操作结果展示结语引言在软件开发和网站设计中,ICO图标是一种常用的图像

SpringBoot集成图片验证码框架easy-captcha的详细过程

《SpringBoot集成图片验证码框架easy-captcha的详细过程》本文介绍了如何将Easy-Captcha框架集成到SpringBoot项目中,实现图片验证码功能,Easy-Captcha是... 目录SpringBoot集成图片验证码框架easy-captcha一、引言二、依赖三、代码1. Ea