let angle = 0; //角度，用来做简单的动画效果的
let value = 80;
var timerId;
option = {
backgroundColor: ‘#000E1A’,
title: {
text: ‘{a|’ + value + ‘}{c|%}’,
x: ‘center’,
y: ‘center’,
textStyle: {
rich: {
a: {
fontSize: 48,
color: ‘#29EEF3’
},
c: {<br /> fontSize: 20,<br /> color: '#ffffff',<br /> // padding: [5,0]<br /> }<br /> }<br /> }<br /> },series: [<br /> // 紫色<br /> {<br /> name: "ring5",<br /> type: 'custom',<br /> coordinateSystem: "none",<br /> renderItem: function(params, api) {<br /> return {<br /> type: 'arc',<br /> shape: {<br /> cx: api.getWidth() / 2,<br /> cy: api.getHeight() / 2,<br /> r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,<br /> startAngle: (0 + angle) * Math.PI / 180,<br /> endAngle: (90 + angle) * Math.PI / 180<br /> },<br /> style: {<br /> stroke: "#8383FA",<br /> fill: "transparent",<br /> lineWidth: 1.5<br /> },<br /> silent: true<br /> };<br /> },<br /> data: [0]<br /> }, {<br /> name: "ring5", //紫点<br /> type: 'custom',<br /> coordinateSystem: "none",<br /> renderItem: function(params, api) {<br /> let x0 = api.getWidth() / 2;<br /> let y0 = api.getHeight() / 2;<br /> let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;<br /> let point = getCirlPoint(x0, y0, r, (90 + angle))<br /> return {<br /> type: 'circle',<br /> shape: {<br /> cx: point.x,<br /> cy: point.y,<br /> r: 4<br /> },<br /> style: {<br /> stroke: "#8450F9", //绿<br /> fill: "#8450F9"<br /> },<br /> silent: true<br /> };<br /> },<br /> data: [0]<br /> },<br /> // 蓝色{<br /> name: "ring5",<br /> type: 'custom',<br /> coordinateSystem: "none",<br /> renderItem: function(params, api) {<br /> return {<br /> type: 'arc',<br /> shape: {<br /> cx: api.getWidth() / 2,<br /> cy: api.getHeight() / 2,<br /> r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,<br /> startAngle: (180 + angle) * Math.PI / 180,<br /> endAngle: (270 + angle) * Math.PI / 180<br /> },<br /> style: {<br /> stroke: "#4386FA",<br /> fill: "transparent",<br /> lineWidth: 1.5<br /> },<br /> silent: true<br /> };<br /> },<br /> data: [0]<br /> },<br /> {<br /> name: "ring5", // 蓝色<br /> type: 'custom',<br /> coordinateSystem: "none",<br /> renderItem: function(params, api) {<br /> let x0 = api.getWidth() / 2;<br /> let y0 = api.getHeight() / 2;<br /> let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;<br /> let point = getCirlPoint(x0, y0, r, (180 + angle))<br /> return {<br /> type: 'circle',<br /> shape: {<br /> cx: point.x,<br /> cy: point.y,<br /> r: 4<br /> },<br /> style: {<br /> stroke: "#4386FA", //绿<br /> fill: "#4386FA"<br /> },<br /> silent: true<br /> };<br /> },<br /> data: [0]<br /> },{<br /> name: "ring5",<br /> type: 'custom',<br /> coordinateSystem: "none",<br /> renderItem: function(params, api) {<br /> return {<br /> type: 'arc',<br /> shape: {<br /> cx: api.getWidth() / 2,<br /> cy: api.getHeight() / 2,<br /> r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,<br /> startAngle: (270 + -angle) * Math.PI / 180,<br /> endAngle: (40 + -angle) * Math.PI / 180<br /> },<br /> style: {<br /> stroke: "#0CD3DB",<br /> fill: "transparent",<br /> lineWidth: 1.5<br /> },<br /> silent: true<br /> };<br /> },<br /> data: [0]<br /> },<br /> // 橘色{<br /> name: "ring5",<br /> type: 'custom',<br /> coordinateSystem: "none",<br /> renderItem: function(params, api) {<br /> return {<br /> type: 'arc',<br /> shape: {<br /> cx: api.getWidth() / 2,<br /> cy: api.getHeight() / 2,<br /> r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,<br /> startAngle: (90 + -angle) * Math.PI / 180,<br /> endAngle: (220 + -angle) * Math.PI / 180<br /> },<br /> style: {<br /> stroke: "#FF8E89",<br /> fill: "transparent",<br /> lineWidth: 1.5<br /> },<br /> silent: true<br /> };<br /> },<br /> data: [0]<br /> }, {<br /> name: "ring5",<br /> type: 'custom',<br /> coordinateSystem: "none",<br /> renderItem: function(params, api) {<br /> let x0 = api.getWidth() / 2;<br /> let y0 = api.getHeight() / 2;<br /> let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;<br /> let point = getCirlPoint(x0, y0, r, (90 + -angle))<br /> return {<br /> type: 'circle',<br /> shape: {<br /> cx: point.x,<br /> cy: point.y,<br /> r: 4<br /> },<br /> style: {<br /> stroke: "#FF8E89", //粉<br /> fill: "#FF8E89"<br /> },<br /> silent: true<br /> };<br /> },<br /> data: [0]<br /> }, {<br /> name: "ring5", //绿点<br /> type: 'custom',<br /> coordinateSystem: "none",<br /> renderItem: function(params, api) {<br /> let x0 = api.getWidth() / 2;<br /> let y0 = api.getHeight() / 2;<br /> let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;<br /> let point = getCirlPoint(x0, y0, r, (270 + -angle))<br /> return {<br /> type: 'circle',<br /> shape: {<br /> cx: point.x,<br /> cy: point.y,<br /> r: 4<br /> },<br /> style: {<br /> stroke: "#0CD3DB", //绿<br /> fill: "#0CD3DB"<br /> },<br /> silent: true<br /> };<br /> },<br /> data: [0]<br /> }, {<br /> name: '吃猪肉频率',<br /> type: 'pie',<br /> radius: ['52%', '40%'],<br /> silent: true,<br /> clockwise: true,<br /> startAngle: 90,<br /> z: 0,<br /> zlevel: 0,<br /> label: {<br /> normal: {<br /> position: "center",}<br /> },<br /> data: [{<br /> value: value,<br /> name: "",<br /> itemStyle: {<br /> normal: {<br /> color: { // 完成的圆环的颜色<br /> colorStops: [{<br /> offset: 0,<br /> color: '#A098FC' // 0% 处的颜色<br /> },<br /> {<br /> offset: 0.3,<br /> color: '#4386FA' // 0% 处的颜色<br /> },<br /> {<br /> offset: 0.6,<br /> color: '#4FADFD' // 0% 处的颜色<br /> },<br /> {<br /> offset: 0.8,<br /> color: '#0CD3DB' // 100% 处的颜色<br /> }, {<br /> offset: 1,<br /> color: '#646CF9' // 100% 处的颜色<br /> }<br /> ]<br /> },<br /> }<br /> }<br /> },<br /> {<br /> value: 100 - value,<br /> name: "",<br /> label: {<br /> normal: {<br /> show: false<br /> }<br /> },<br /> itemStyle: {<br /> normal: {<br /> color: "#173164"<br /> }<br /> }<br /> }<br /> ]<br /> },<br /> {<br /> name: '吃猪肉频率',<br /> type: 'pie',<br /> radius: ['32%', '35%'],<br /> silent: true,<br /> clockwise: true,<br /> startAngle: 270,<br /> z: 0,<br /> zlevel: 0,<br /> label: {<br /> normal: {<br /> position: "center",}<br /> },<br /> data: [{<br /> value: value,<br /> name: "",<br /> itemStyle: {<br /> normal: {<br /> color: { // 完成的圆环的颜色<br /> colorStops: [{<br /> offset: 0,<br /> color: '#00EDF3' // 0% 处的颜色<br /> }, {<br /> offset: 1,<br /> color: '#646CF9' // 100% 处的颜色<br /> }]<br /> },<br /> }<br /> }<br /> },<br /> {<br /> value: 100 - value,<br /> name: "",<br /> label: {<br /> normal: {<br /> show: false<br /> }<br /> },<br /> itemStyle: {<br /> normal: {<br /> color: "#173164"<br /> }<br /> }<br /> }<br /> ]<br /> },]<br /> };
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，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);
}
if (timerId) {
clearInterval(timerId);
}
timerId = setInterval(function() {
//用setInterval做动画感觉有问题
draw()
}, 100);
若有收获，就点个赞吧
0 人点赞
