var color = ['#549BF1', '#AA8A6E', '#8F54F1', '#24DBDA', '#BCBF5C', '#BC5A76', '#67B4D4', '#B4C9EF', '#676AD4', '#A86EAA', '#5CBF7F', '#EFB4B4'];
var seriesData = [
{ name: '新疆', value: 188 },
{ name: '湖南', value: 82 },
{ name: '山东', value: 53 },
{ name: '广西', value: 25 },
{ name: '甘肃', value: 18 },
{ name: '四川', value: 12 },
{ name: '江苏', value: 11 },
{ name: '云南', value: 11 },
];
var legend = [];
let sum = seriesData.reduce((cur, pre) => {
return cur + pre.value;
}, 0);
seriesData.forEach((item) => {
legend.push(item.name)
})
var option = {
backgroundColor: '#050e31',
color: color,
title: [{
text: '项目总数',
top: '45%',
left: '34%',
textStyle: {
color: '#16ffff',
fontSize: 24,
fontWeight: 'bold',
textAlign: 'center'
},
}, {
text: sum + "个",
top: '51.5%',
left: '35.4%',
textStyle: {
color: '#16ffff',
fontSize: 28,
fontWeight: '400',
textAlign: 'center'
},
}],
polar: {
center: ['40%', '50%'],
radius: ['26%', '60%'],
}, //环线
angleAxis: {},
radiusAxis: {
min: 50,
max: 70,
interval: 20,
// splitNumber: 3,
axisLine: {
show: false,
lineStyle: {
color: '#0B3E5E',
width: 1,
type: 'solid',
},
},
axisLabel: {
formatter: '{value} %',
show: false,
padding: [0, 0, 0, 0],
color: '#0B3E5E',
fontSize: 16,
},
splitLine: {
lineStyle: {
color: '#0B3E5E',
width: 2,
type: 'solid',
},
},
},
legend: {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
orient: 'vertical',
top: 'center',
right: '5%',
itemGap: 20,
textStyle: {
align: 'left',
verticalAlign: 'middle',
rich: {
name: {
color: 'rgba(255,255,255,0.5)',
fontSize: 14,
},
value: {
color: 'rgba(255,255,255,0.5)',
fontSize: 14,
},
rate: {
color: 'rgba(255,255,255,0.9)',
fontSize: 14,
},
},
},
data: legend,
formatter: (name) => {
if (seriesData.length) {
const item = seriesData.filter((item) => item.name === name)[0];
let percent = ((item.value / sum) * 100).toFixed(2)
if (percent < 10) {
return `{name|${name}} {rate| ${percent}%}`;
} else {
return `{name|${name}} {rate| ${percent}%}`;
}
}
},
},
series: [
{
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() * 0.4,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2.4,
startAngle: (0 + angle) * Math.PI / 180,
endAngle: (80 + angle) * Math.PI / 180
},
style: {
stroke: "#4680e0",
fill: "transparent",
lineWidth: 2
},
silent: true
};
},
data: [0]
},
{
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() * 0.4,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2.4,
startAngle: (85 + angle) * Math.PI / 180,
endAngle: (165 + angle) * Math.PI / 180
},
style: {
stroke: "#4680e0",
fill: "transparent",
lineWidth: 2
},
silent: true
};
},
data: [0]
},
{
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() * 0.4,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2.4,
startAngle: (170 + angle) * Math.PI / 180,
endAngle: (250 + angle) * Math.PI / 180
},
style: {
stroke: "#4680e0",
fill: "transparent",
lineWidth: 2
},
silent: true
};
},
data: [0]
},
{
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() * 0.4,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2.4,
startAngle: (255 + angle) * Math.PI / 180,
endAngle: (335 + angle) * Math.PI / 180
},
style: {
stroke: "#4680e0",
fill: "transparent",
lineWidth: 2
},
silent: true
};
},
data: [0]
},
{
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() * 0.4,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2.4,
startAngle: (340 + angle) * Math.PI / 180,
endAngle: (355 + angle) * Math.PI / 180
},
style: {
stroke: "#4680e0",
fill: "transparent",
lineWidth: 2
},
silent: true
};
},
data: [0]
},
{
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() * 0.4,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2.8,
startAngle: (0 + angle) * Math.PI / 180,
endAngle: (60 + angle) * Math.PI / 180
},
style: {
stroke: "#4680e0",
fill: "transparent",
lineWidth: 2
},
silent: true
};
},
data: [0]
},
{
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() * 0.4,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2.8,
startAngle: (70 + angle) * Math.PI / 180,
endAngle: (130 + angle) * Math.PI / 180
},
style: {
stroke: "#4680e0",
fill: "transparent",
lineWidth: 2
},
silent: true
};
},
data: [0]
},
{
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() * 0.4,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2.8,
startAngle: (140 + angle) * Math.PI / 180,
endAngle: (200 + angle) * Math.PI / 180
},
style: {
stroke: "#4680e0",
fill: "transparent",
lineWidth: 2
},
silent: true
};
},
data: [0]
},
{
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() * 0.4,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2.8,
startAngle: (210 + angle) * Math.PI / 180,
endAngle: (270 + angle) * Math.PI / 180
},
style: {
stroke: "#4680e0",
fill: "transparent",
lineWidth: 2
},
silent: true
};
},
data: [0]
},
{
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() * 0.4,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2.8,
startAngle: (280 + angle) * Math.PI / 180,
endAngle: (350 + angle) * Math.PI / 180
},
style: {
stroke: "#4680e0",
fill: "transparent",
lineWidth: 2
},
silent: true
};
},
data: [0]
},
{
name: '占比',
type: 'pie',
center: ['40%', '50%'],
radius: ['30%', '50%'],
label: {
normal: {
show: false,
position: 'center',
formatter: '{value|{c}}\n{label|{b}}',
rich: {
//中间文字
value: {
padding: 5,
align: 'center',
verticalAlign: 'middle',
fontSize: 20,
},
label: {
align: 'center',
verticalAlign: 'middle',
fontSize: 16,
},
},
},
},
labelLine: {
show: false,
length: 0,
length2: 0,
},
itemStyle: {//间隔
normal: {
borderWidth: 3,
borderColor: '#050e31',
},
},
data: seriesData,
}
],
};
let angle = 0;//角度，用来做简单的动画效果的
function draw() {
angle = angle + 3
option && myChart.setOption(option, true);
}
setInterval(function () {
//用setInterval做动画感觉有问题
draw()
}, 500);