Toggle navigation
环形饼图
By
t***d
2020-09-23 09:46:30
脚本
16
21
作品使用的第三方脚本
数据管理
上传数据
支持小于 5M 任意格式（csv, xlsx, json, xml, ...）的数据文件
上传后可以通过生成的文件链接异步获取托管的数据。
历史数据
0 条
无历史数据
代码修改记录
信息提示
保存作品
对当前截图不满意？你还可以
上传本地截图
重新截图
作品名称
作品描述
标签
geo
grid
legend
markLine
markPoint
bar
effectScatter
line
lines
map
timeline
title
toolbox
tooltip
visualMap
作品默认版本
最新
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
20:11:45
图表已生成
整理代码
刷新
代码
var auditDataArr = [42, 48, 79, 52, 0] var color = ['#6a6edc', '#ac64cf', '#3cb7fd', '#13cdc7', '#f2a230']; var dataStyle = { normal: { label: { show: false, }, labelLine: { show: false, }, shadowBlur: 40, borderWidth: 10, // borderWidth: 40, shadowColor: 'rgba(0, 0, 0, 0)', //边框阴影 }, }; var placeHolderStyle = { normal: { // color: 'transparent', //补充圆圈颜色 color: '#eff3ff', label: { show: false, }, labelLine: { show: false, }, }, emphasis: { color: '#eee', }, }; var placeHolderStyle1 = { normal: { color: 'transparent', label: { show: false, }, labelLine: { show: false, }, }, emphasis: { color: '#eee', }, }; var option = { backgroundColor: '#fff', title: { show: false, text: '匹配度', x: 'center', y: 'center', textStyle: { fontWeight: 'normal', fontSize: 24, color: '#fff', }, }, tooltip: { trigger: 'item', show: true, formatter: '{b} : <br/>{d}%', backgroundColor: 'rgba(0, 0, 0, 0.5)', // hover圆环展示比例背景 padding: [8, 10], //内边距 extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.1);', //添加阴影 }, series: [ // A业务 { name: 'Line 1', type: 'pie', clockWise: false, radius: [113, 123], center: ['50%', '50%'], itemStyle: dataStyle, hoverAnimation: false, startAngle: 90, label: { borderRadius: '10', }, data: [{ value: auditDataArr[0], name: '不完整', itemStyle: { normal: { color: color[0], }, }, }, { value: 100 - auditDataArr[0], name: '', tooltip: { show: false, }, itemStyle: placeHolderStyle1, }, ], }, { name: 'Line 1', type: 'pie', clockWise: false, radius: [113, 123], center: ['50%', '50%'], itemStyle: dataStyle, hoverAnimation: false, startAngle: 90, label: { borderRadius: '10', }, data: [{ value: auditDataArr[0], name: '不完整', itemStyle: { normal: { color: color[0], }, }, }, { value: 100 - auditDataArr[0], name: '', tooltip: { show: false, }, itemStyle: placeHolderStyle, }, ], }, // B业务 { name: 'Line 2', type: 'pie', clockWise: false, radius: [90, 100], center: ['50%', '50%'], itemStyle: dataStyle, hoverAnimation: false, startAngle: 90, data: [{ value: auditDataArr[1], name: '不规范', itemStyle: { normal: { color: color[1], }, }, }, { value: 100 - auditDataArr[1], name: '', tooltip: { show: false, }, itemStyle: placeHolderStyle1, }, ], }, { name: 'Line 2', type: 'pie', clockWise: false, radius: [90, 100], center: ['50%', '50%'], itemStyle: dataStyle, hoverAnimation: false, startAngle: 90, data: [{ value: auditDataArr[1], name: '不规范', itemStyle: { normal: { color: color[1], }, }, }, { value: 100 - auditDataArr[1], name: '', tooltip: { show: false, }, itemStyle: placeHolderStyle, }, ], }, // C业务 { name: 'Line 3', type: 'pie', clockWise: false, radius: [70, 79], center: ['50%', '50%'], itemStyle: dataStyle, hoverAnimation: false, startAngle: 90, data: [{ value: auditDataArr[2], name: '无上级关联', itemStyle: { normal: { color: color[2], }, }, }, { value: 100 - auditDataArr[2], name: '', tooltip: { show: false, }, itemStyle: placeHolderStyle1, }, ], }, { name: 'Line 3', type: 'pie', clockWise: false, radius: [70, 79], center: ['50%', '50%'], itemStyle: dataStyle, hoverAnimation: false, startAngle: 90, data: [{ value: auditDataArr[2], name: '无上级关联', itemStyle: { normal: { color: color[2], }, }, }, { value: 100 - auditDataArr[2], name: '', tooltip: { show: false, }, itemStyle: placeHolderStyle, }, ], }, //D业务 { name: 'Line 3', type: 'pie', clockWise: false, radius: [52, 59], center: ['50%', '50%'], itemStyle: dataStyle, hoverAnimation: false, startAngle: 90, data: [{ value: auditDataArr[3], name: '无下级关联', itemStyle: { normal: { color: color[3], }, }, }, { value: 100 - auditDataArr[3], name: '', tooltip: { show: false, }, itemStyle: placeHolderStyle1, }, ], }, { name: 'Line 3', type: 'pie', clockWise: false, radius: [52, 59], center: ['50%', '50%'], itemStyle: dataStyle, hoverAnimation: false, startAngle: 90, data: [{ value: auditDataArr[3], name: '无下级关联', itemStyle: { normal: { color: color[3], }, }, }, { value: 100 - auditDataArr[3], name: '', tooltip: { show: false, }, itemStyle: placeHolderStyle, }, ], }, //E业务 { name: 'Line 3', type: 'pie', clockWise: false, radius: [31, 37], center: ['50%', '50%'], //圆环位置参数 itemStyle: dataStyle, hoverAnimation: false, startAngle: 90, data: [{ value: auditDataArr[4], name: '正常', itemStyle: { normal: { color: color[4], }, }, }, { value: 100 - auditDataArr[4], name: '', tooltip: { show: false, }, itemStyle: placeHolderStyle1, }, ], }, { name: 'Line 3', type: 'pie', clockWise: false, // radius: [26, 40], radius: [31, 37], center: ['50%', '50%'], itemStyle: dataStyle, hoverAnimation: false, startAngle: 90, data: [{ value: auditDataArr[4], name: '正常', itemStyle: { normal: { color: color[4], }, }, }, { value: 100 - auditDataArr[4], name: '', tooltip: { show: false, }, itemStyle: placeHolderStyle, }, ], }, ], };
