var color = ['#549BF1', '#AA8A6E', '#8F54F1', '#5A70BC', '#BCBF5C', '#BC5A76', '#67B4D4', '#B4C9EF', '#676AD4', '#A86EAA', '#5CBF7F', '#EFB4B4'];
var legend = ['店外经营', '机动车违停', '乱堆物料', '非法户外广告', '占道经营', '暴露垃圾', '垃圾箱溢满',
'非机动车乱停放', '道路破损', '沿街晾晒', '打包垃圾', '路面积水'];
var seriesData = [
{ name: '店外经营', value: 60 },
{ name: '机动车违停', value: 10 },
{ name: '乱堆物料', value: 15 },
{ name: '非法户外广告', value: 23 },
{ name: '占道经营', value: 10 },
{ name: '暴露垃圾', value: 12 },
{ name: '垃圾箱溢满', value: 12 },
{ name: '非机动车乱停放', value: 12 },
{ name: '道路破损', value: 12 },
{ name: '沿街晾晒', value: 12 },
{ name: '打包垃圾', value: 12 },
{ name: '路面积水', value: 12 },
];
var option = {
backgroundColor: '#050e31',
color: color,
title: [{
text: '识别类型',
top: '43%',
left: '20%',
padding: [-15, 0, 0, -15],
textStyle: {
color: '#A8C3E6',
fontSize: 28,
fontWeight: 'bold',
textAlign: 'center'
},
}, {
text: '2,845',
top: '48%',
left: '21%',
padding: [15, 0, 0, -20],
textStyle: {
color: '#DBE7F6',
fontSize: 40,
fontWeight: '400',
textAlign: 'center'
},
}],
polar: {
center: ['25%', '50%'],
}, //环线
angleAxis: {},
radiusAxis: {
min: 20,
max: 60,
interval: 15,
axisLine: {
show: false,
lineStyle: {
color: '#0B3E5E',
width: 1,
type: 'solid',
},
},
axisLabel: {
// 环线的数字
formatter: '{value} %',
show: false,
padding: [0, 0, 20, 0],
color: '#0B3E5E',
fontSize: 16,
},
splitLine: {
// 环线样式
lineStyle: {
color: '#0B3E5E',
width: 2,
type: 'solid',
},
},
},
legend: {
itemHeight: 14,
itemWidth: 14,
icon: "rect",
orient: 'vertical',
top: 'center',
right: 0,
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];
return `{name|${name}：}{value| ${item.value}} {rate| ${item.value}%}`;
}
},
},
series: [
{
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() * 0.25,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2,
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.25,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2,
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.25,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2,
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.25,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2,
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.25,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2,
startAngle: (280 + angle) * Math.PI / 180,
endAngle: (350 + 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.25,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.92,
startAngle: 0,
endAngle: 360
},
style: {
stroke: "#4680e0",
fill: "transparent",
lineWidth: 2
},
silent: true
};
},
data: [0]
},
{
name: '占比',
type: 'pie',
center: ['25%', '50%'],
radius: ['40%', '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()
}, 100);