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

相关文章

Android使用ImageView.ScaleType实现图片的缩放与裁剪功能

《Android使用ImageView.ScaleType实现图片的缩放与裁剪功能》ImageView是最常用的控件之一,它用于展示各种类型的图片,为了能够根据需求调整图片的显示效果,Android提... 目录什么是 ImageView.ScaleType?FIT_XYFIT_STARTFIT_CENTE

关于MongoDB图片URL存储异常问题以及解决

《关于MongoDB图片URL存储异常问题以及解决》:本文主要介绍关于MongoDB图片URL存储异常问题以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录MongoDB图片URL存储异常问题项目场景问题描述原因分析解决方案预防措施js总结MongoDB图

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

C#实现将Excel表格转换为图片(JPG/ PNG)

《C#实现将Excel表格转换为图片(JPG/PNG)》Excel表格可能会因为不同设备或字体缺失等问题,导致格式错乱或数据显示异常,转换为图片后,能确保数据的排版等保持一致,下面我们看看如何使用C... 目录通过C# 转换Excel工作表到图片通过C# 转换指定单元格区域到图片知识扩展C# 将 Excel

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

基于Python实现高效PPT转图片工具

《基于Python实现高效PPT转图片工具》在日常工作中,PPT是我们常用的演示工具,但有时候我们需要将PPT的内容提取为图片格式以便于展示或保存,所以本文将用Python实现PPT转PNG工具,希望... 目录1. 概述2. 功能使用2.1 安装依赖2.2 使用步骤2.3 代码实现2.4 GUI界面3.效

Python实现AVIF图片与其他图片格式间的批量转换

《Python实现AVIF图片与其他图片格式间的批量转换》这篇文章主要为大家详细介绍了如何使用Pillow库实现AVIF与其他格式的相互转换,即将AVIF转换为常见的格式,比如JPG或PNG,需要的小... 目录环境配置1.将单个 AVIF 图片转换为 JPG 和 PNG2.批量转换目录下所有 AVIF 图