echarts环形图中间放图标和文字

在这里插入图片描述

   // 中心标题
        graphic: [
          {
            type: 'image',
            style: {
              image: require('@/assets/image/people-icon.png'), // 你的图片地址
              width: 42,
              height: 46,
              color: '#fff'
            },
            left: 'center',
            top: '40%'
          },

          {
            type: 'text',
            left: 'center',
            top: '55%',
            style: {
              text: '疫情监测',
              fill: '#fff',
              width: 30,
              height: 30,
              fontSize: 20
            }
          }
        ],
### 实现带有SVG元素的环形中心区域定制 为了实现在ECharts环形中间自定义SVG元素的效果,可以利用ECharts提供的`graphic`组件来绘制任意形并置在指定位置。下面是一个具体的实现方法: #### 创建基本环形配置项 首先构建一个简单的环形实例作为基础,在此之上再进行进一步的操作。 ```javascript let option = { series: [ { name: '访问来源', type: 'pie', // 设置表类型为饼 radius: ['50%', '70%'], // 定义内外半径比例形成圆环效果 avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, label: { show: true, position: 'outside' }, emphasis: { label: { show: true, fontSize: '20', fontWeight: 'bold' } }, data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'} ] } ] }; ``` #### 添SVG到环形中央 通过`graphic`属性向表内部嵌入SVG像或路径数据,并调整其样式使之居中显示于环形内侧空白处[^1]。 ```javascript option.graphic = [{ elements: [{ type: 'circle',// 或者使用path等其他形状 shape: { cx: 0, cy: 0, r: 20 }, style: { fill: '#ff0'// 填充颜色 }, left: 'center',// 居中定位 top: 'middle' }] }]; ``` 对于更复杂的SVG内容,则可以通过字符串形式传入完整的SVG标记代码至`type: 'group'`下的子元素列表里;也可以预先载外部SVG文件转成Base64编码后设置给`src`字段用于片类型的元素。 以上就是关于如何在ECharts环形中间自定义SVG元素的方法介绍。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值