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

最新推荐文章于 2025-06-09 16:36:47 发布

Ctrl Alt Shift

最新推荐文章于 2025-06-09 16:36:47 发布

阅读量5.1k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： echarts图表文章标签： echarts

本文链接：https://blog.csdn.net/weixin_42676530/article/details/138190591

本文介绍了如何在ECharts图表中利用graphic属性添加自定义图片和文本，包括图形样式设置、图片位置控制，以及如何通过`style`属性调整图片尺寸和不透明度。还提供了添加饼图时的完整option配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

前言

思路是看到这个博客启发的：点击跳转查看博客，然后在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, // 文字大小
            },
          }
        );
}