在echarts中,怎么在饼状图中间加一个图片,没遇到过这种,求解
2条回答 默认 最新
关注 事先做一个背景图片只有中心是你所需要的图片,其余部分均为透明白色,然后设置为饼图的图片就可以了
加了中心是白色花朵背景图后效果图如下:
var img = "https://img0.baidu.com/it/u=4260719975,1530958102&fm=253&fmt=auto&app=138&f=PNG?w=650&h=650", option = { graphic: { elements: [ { type: 'image', // z: 3, style: { image: img, width: 200, height: 200, }, left: 'center', top: 'center', }, ], }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { data: [ 'Direct', 'Marketing', 'Search Engine', 'Email', 'Union Ads', 'Video Ads', 'Baidu', 'Google', 'Bing', 'Others' ] }, series: [ { name: 'Access From', type: 'pie', radius: ['45%', '60%'], labelLine: { length: 30 }, label: { formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}:}{c} {per|{d}%} ', backgroundColor: '#F6F8FC', borderColor: '#8C8D8E', borderWidth: 1, borderRadius: 4, rich: { a: { color: '#6E7079', lineHeight: 22, align: 'center' }, hr: { borderColor: '#8C8D8E', width: '100%', borderWidth: 1, height: 0 }, b: { color: '#4C5058', fontSize: 14, fontWeight: 'bold', lineHeight: 33 }, per: { color: '#fff', backgroundColor: '#4C5058', padding: [3, 4], borderRadius: 4 } } }, data: [ { value: 1048, name: 'Baidu' }, { value: 335, name: 'Direct' }, { value: 310, name: 'Email' }, { value: 251, name: 'Google' }, { value: 234, name: 'Union Ads' }, { value: 147, name: 'Bing' }, { value: 135, name: 'Video Ads' }, { value: 102, name: 'Others' } ] } ] };
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 基于卷积神经网络的声纹识别
- ¥15 Python中的request,如何使用ssr节点,通过代理requests网页。本人在泰国,需要用大陆ip才能玩网页游戏,合法合规。
- ¥100 为什么这个恒流源电路不能恒流?
- ¥15 有偿求跨组件数据流路径图
- ¥15 写一个方法checkPerson,入参实体类Person,出参布尔值
- ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题,上传的坐标文件里是怎么对无序点进行编号的,以及xy坐标在处理的时候是进行整体模型分片处理的吗
- ¥15 CSAPPattacklab
- ¥15 一直显示正在等待HID—ISP
- ¥15 Python turtle 画图
- ¥15 stm32开发clion时遇到的编译问题