Renderings:
//The essence of making a circular graph is radius: ['inner radius', 'outer radius'] inner radius!=0
//The principle of drawing gradient colors is: itemStyle can be set in data
let angle = 0; //Angle, used for simple animation effects
let timerId;
const legend = {
show: false,
};
const tooltip = {
show: false,
};
const colors = ['#00fcff', '#4386FA', '#4FADFD', '#0CD3DB', '#646CF9'];
const innerRingColor = {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [0,.3,.6,.8,1].map((offset,index)=>({offset,color:colors[index]})),
global: false, // default is false
};
var trafficWay = [
{
name: 'Class I',
value: 10,
},
{
name: 'Class II',
value: 20,
},
{
name: 'Class III',
value: 20,
},
{
name: 'Class IV',
value: 20,
},
];
var dataArr = [];
for (var i = 0; i < 4; i ++ ) {
if (i % 2 === 0) {
dataArr. push({
name: (i + 1).toString(),
value: 25,
itemStyle: {
normal: {
color: "#F1B35E",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
}, {
value: 4,
name: '',
itemStyle: {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0,
},
},
})
} else {
dataArr. push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: "#F1B35E",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
}, {
value: 4,
name: '',
itemStyle: {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0,
},
},
})
}
}
var data = [];
var color = ['#56FFD7', '#6DA7FF', '#2B64FF', '#68FF83', '#8792FF', '#F6FD6A'];
for (var i = 0; i < trafficWay. length; i ++ ) {
data. push(
{
value: trafficWay[i].value,
name: trafficWay[i].name,
itemStyle: {
normal: {
borderWidth: 5,
shadowBlur: 2,
borderColor: color[i],
shadowColor: color[i],
},
},
},
{
value: 2,
name: '',
itemStyle: {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0,
},
},
}
);
}
option = {
color: colors,
tooltip,
legend,
series: [
{
name: '',
type: 'pie',
clockWise: false,
radius: [119, 124],
hoverAnimation: false,
labelLine: {
normal: {
length: 10,
length2: 14,
}
},
label: {
show: false,
position: 'outer',
alignTo: 'labelLine',
// dots
backgroundColor: 'auto',
height: 0,
width: 0,
lineHeight: 0,
distanceToLabelLine: 0,
borderRadius: 2.5,
padding: [2.5, -2.5, 2.5, -2.5],
formatter: function (params) {
if (params.name !== '') {
return `{a|${params.name}:}{b|${params.value}}`;
} else {
return '';
}
},
rich: {
a: {
padding: [0, 0, 0, 10],
color: '#fff'
},
b: {
padding: [0, 10, 0, 0],
color: '#fff'
},
}
},
data: data,
},
{
type: 'pie',
clockWise: false, //load clockwise
hoverAnimation: false, //The mouse moves in and becomes bigger
center: ['50%', '50%'],
radius: ['30%', '30%'],
label: {
show: false
},
data: [{
value: 2,
name: '',
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#61bad3'
}
}
}]
},
/* {
name: '',
type: 'pie',
center: ['50%', '50%'], //The position of the center of the circle
radius: ['32%', '35%'], //The essence of the circular graph is here [Inner radius!=0, Outer radius] The larger the outer radius, the bigger the circle
avoidLabelOverlap: false, // used to make concentric circles
clockwise: false, //Arrange clockwise
startAngle: 90, //The starting angle has little effect
label: {
show: true, //false does not display the labels on the pie chart
position: 'center', //inside (displayed on the pie chart), outside (leading lines will appear by default) center
formatter: '{d}%',
fontSize: 50,
fontWeight: 'bold',
},
data: [
{ value: value, name: 'Complete', itemStyle: { color: innerRingColor, opacity: 1 } },
{ value: 100 - value, name: 'unfinished', itemStyle: { color: '#282c40' } },
].sort((a, b) => b.value - a.value), // sort the array from big to small
emphasis: {
scale: false,
},
}, */
/* {
name: '',
type: 'pie',
center: ['50%', '50%'], //The position of the center of the circle
radius: ['40%', '50%'], //The essence of the circular graph is here [inner radius!=0, outer radius] The larger the outer radius, the bigger the circle
avoidLabelOverlap: false, // used to make concentric circles
clockwise: false, //Arrange clockwise
startAngle: 90, //The starting angle has little effect
label: {
show: false, //false does not display the labels on the pie chart
},
data: [
{ value: value, name: 'Complete', itemStyle: { color: innerRingColor, opacity: 1 }},
{ value: 100 - value, name: 'unfinished', itemStyle: { color: '#282c40' } },
].sort((a, b) => b.value - a.value), // sort the array from big to small
emphasis: {
scale: false,
},
}, */
//colors[0]line
{
name: 'ring5',
type: 'custom',
coordinateSystem: 'none',
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api. getWidth() / 2,
cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
startAngle: ((0 + angle) * Math.PI) / 180,
endAngle: ((90 + angle) * Math.PI) / 180,
},
style: {
stroke: colors[0],
fill: 'transparent',
lineWidth: 1.5,
},
silent: true,
};
},
data: [0],
},
{
name: 'ring5', // //colors[0]dot
type: 'custom',
coordinateSystem: 'none',
renderItem: function (params, api) {
let x0 = api. getWidth() / 2;
let y0 = api. getHeight() / 2;
let r = (Math. min(api. getWidth(), api. getHeight()) / 2) * 0.6;
let point = getCirlPoint(x0, y0, r, 90 + angle);
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: 4,
},
style: {
stroke: colors[0],
fill: colors[0],
},
silent: true,
};
},
data: [0],
},
// blue
{
name: 'ring5',
type: 'custom',
coordinateSystem: 'none',
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api. getWidth() / 2,
cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
startAngle: ((180 + angle) * Math.PI) / 180,
endAngle: ((270 + angle) * Math.PI) / 180,
},
style: {
stroke: colors[1],
fill: 'transparent',
lineWidth: 1.5,
},
silent: true,
};
},
data: [0],
},
{
name: 'ring5', // blue
type: 'custom',
coordinateSystem: 'none',
renderItem: function (params, api) {
let x0 = api. getWidth() / 2;
let y0 = api. getHeight() / 2;
let r = (Math. min(api. getWidth(), api. getHeight()) / 2) * 0.6;
let point = getCirlPoint(x0, y0, r, 180 + angle);
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: 4,
},
style: {
stroke: colors[1], //green
fill: colors[1],
},
silent: true,
};
},
data: [0],
},
{
name: 'ring5',
type: 'custom',
coordinateSystem: 'none',
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api. getWidth() / 2,
cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
startAngle: ((270 + -angle) * Math.PI) / 180,
endAngle: ((40 + -angle) * Math.PI) / 180,
},
style: {
stroke: colors[2],
fill: 'transparent',
lineWidth: 1.5,
},
silent: true,
};
},
data: [0],
},
// orange
{
name: 'ring5',
type: 'custom',
coordinateSystem: 'none',
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api. getWidth() / 2,
cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
startAngle: ((90 + -angle) * Math.PI) / 180,
endAngle: ((220 + -angle) * Math.PI) / 180,
},
style: {
stroke: colors[2],
fill: 'transparent',
lineWidth: 1.5,
},
silent: true,
};
},
data: [0],
},
{
name: 'ring5',
type: 'custom',
coordinateSystem: 'none',
renderItem: function (params, api) {
let x0 = api. getWidth() / 2;
let y0 = api. getHeight() / 2;
let r = (Math. min(api. getWidth(), api. getHeight()) / 2) * 0.65;
let point = getCirlPoint(x0, y0, r, 90 + -angle);
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: 4,
},
style: {
stroke: colors[3], //pink
fill: colors[3],
},
silent: true,
};
},
data: [0],
},
{
name: 'ring5', //green dot
type: 'custom',
coordinateSystem: 'none',
renderItem: function (params, api) {
let x0 = api. getWidth() / 2;
let y0 = api. getHeight() / 2;
let r = (Math. min(api. getWidth(), api. getHeight()) / 2) * 0.65;
let point = getCirlPoint(x0, y0, r, 270 + -angle);
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: 4,
},
style: {
stroke: colors[3], //green
fill: colors[3],
},
silent: true,
};
},
data: [0],
},
],
};
//Get the coordinates of a point on the circle (x0, y0 represent coordinates, r radius, angle angle)
function getCirlPoint(x0, y0, r, angle) {
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
return {
x: x1,
y: y1,
};
}
function draw() {
angle = angle + 3;
myChart.setOption(option, true);
//window.requestAnimationFrame(draw);
}
draw();
setTimeout(function () {
if (timerId) {
clearInterval(timerId);
}
timerId = setInterval(function () {
// There is a problem with animation with setInterval
draw();
}, 100);
}, 500);