var value = 90;
var angledata = [
"p1", "p2", "p3", "p4", "p5", "p6", "p7", "p8", "p9", "p10", "p11", "p12",
"p13", "p12", "p15", "p16", "p17", "p18", "p19", "p20", "p21", "p22", "p23", "p24",
"p25", "p26", "p27", "p28", "p29", "p30", "p31", "p32", "p33", "p34", "p35", "p36",
];
var datas = [{
name: "中心",
des: "中心",
symbolSize: 0,
draggable: false,
itemStyle: {
normal: {
color: "#E75FC3",
borderColor: '#FFFFFF',
borderWidth: 0,
}
},
label: {
show: false
},
value: [0, 0],
label: {
normal: {
show: true,
backgroundColor: {
type: "pattern",
repeat: "no-repeat"
},
color: '#37CFEB',
formatter: function() {
return " ";
}
}
}
},
{
name: "组织一_7",
des: "组织一",
symbolSize: 30,
draggable: false,
itemStyle: {
normal: {
color: "#f00",
borderColor: '#FFFFFF',
borderWidth: 0,
}
},
label: {
show: false
},
value: [8, 'p33']
},
{
name: "组织一_8",
des: "组织一",
symbolSize: 30,
draggable: false,
itemStyle: {
normal: {
color: "#0f0",
borderColor: '#FFFFFF',
borderWidth: 0,
}
},
label: {
show: false
},
value: [3, 'p15']
},
]
var links = [
//从 中心点出发
{
source: "中心",
target: "组织一_7",
des: "指示线提示",
value: "",
lineStyle: {
curveness: 0,
color: '#f00',
width: 10
}
},
{
source: "中心",
target: "组织一_8",
des: "指示线提示",
value: "",
lineStyle: {
curveness: 0,
color: '#0f0',
width: 10
}
},
//第1块 // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
]
var charts = {
datas: datas,
links: links
}
option = {
xAxis: {
show:false,
},
yAxis: {
show:false,
},
polar: {
center: ["50%", "50%"],
"radius": "80%"
},
radiusAxis: {
// show: false,
type: 'value',
min: 0,
max: 12,
splitLine: {
show: true,
lineStyle: {
type:'dashed'
}
},
axisLine: {
show: false
},
axisTick:{
show:false
},
axisLabel:{
show:false
}
},
angleAxis: {
show: false,
type: 'category',
data: angledata,
boundaryGap: false,
},
series: [
// 进度圈
{
type: 'pie',
clockWise: true,
radius: ["87%", "80%"],
data: [{
value: value,
itemStyle: {
normal: {
color: '#00f',
label: {
show: true
},
labelLine: {
show: false
}
},
},
label: {
position: "center"
},
},
{
name: 'gap',
value: 100 - value,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0,
}
},
}
]
},
{
type: 'graph',
coordinateSystem: 'polar',
data: charts.datas,
links: charts.links,
}
]
};