echarts饼图动态旋转效果

1.  
   <template>
2.  
   <div class="alarmTotal" id="alarmTotal"></div>
3.  
   </template>
4.  
    
5.  
   <script>
6.  
   let angle = 0; //角度，用来做简单的动画效果的
7.  
   let value = 80;
8.  
   var timerId;
9.  
   let myChart = "";
10.  
    var outerRidus1 = 0.8;
11.  
    var outerRidus2 = 0.85;
12.  
     
13.  
    //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
14.  
    function getCirlPoint(x0, y0, r, angle) {
15.  
    let x1 = x0 r * Math.cos((angle * Math.PI) / 180);
16.  
    let y1 = y0 r * Math.sin((angle * Math.PI) / 180);
17.  
    return {
18.  
    x: x1,
19.  
    y: y1,
20.  
    };
21.  
    }
22.  
    function draw() {
23.  
    angle = angle 3;
24.  
    }
25.  
    //指示器颜色
26.  
    let colorConstData = ["#FD1A0C", "#0064F9", "#FEDB65", "#7E55F3"];
27.  
    //环的颜色
28.  
    let colorStep = [
29.  
    [
30.  
    {
31.  
    offset: 0,
32.  
    color: "#FD1A0C", // 0% 处的颜色
33.  
    },
34.  
    {
35.  
    offset: 1,
36.  
    color: "#FF824D", // 100% 处的颜色
37.  
    },
38.  
    ],
39.  
    [
40.  
    {
41.  
    offset: 0,
42.  
    color: "#0060FF", // 0% 处的颜色
43.  
    },
44.  
    {
45.  
    offset: 1,
46.  
    color: "#00EFFE", // 100% 处的颜色
47.  
    },
48.  
    ],
49.  
    [
50.  
    {
51.  
    offset: 0,
52.  
    color: "#FFA600", // 0% 处的颜色
53.  
    },
54.  
    {
55.  
    offset: 1,
56.  
    color: "#FEDB65", // 100% 处的颜色
57.  
    },
58.  
    ],
59.  
     
60.  
    [
61.  
    {
62.  
    offset: 0,
63.  
    color: "#7E55F3", // 0% 处的颜色
64.  
    },
65.  
    {
66.  
    offset: 1,
67.  
    color: "#7E55F3", // 100% 处的颜色
68.  
    },
69.  
    ],
70.  
    ];
71.  
    export default {
72.  
    name: "alarmTotal",
73.  
    props: ["alarmLevelData", "allNum"],
74.  
    data() {
75.  
    return {
76.  
    option: {},
77.  
    };
78.  
    },
79.  
    watch: {
80.  
    alarmLevelData: function (val, old) {
81.  
    this.refreshOpt();
82.  
    },
83.  
    },
84.  
     
85.  
    mounted() {
86.  
    myChart = this.$echarts.init(document.getElementById("alarmTotal"));
87.  
    this.resizeFn = this.debounce(
88.  
    () => {
89.  
    this.refreshOpt();
90.  
    // 通过捕获系统的onresize事件触发需要执行的事件
91.  
    myChart.resize();
92.  
    },
93.  
    1000,
94.  
    this.option
95.  
    );
96.  
    window.addEventListener("resize", this.resizeFn);
97.  
    },
98.  
     
99.  
    methods: {
100.  
     debounce(fn, delay, option) {
101.  
     let timer = null; //借助闭包
102.  
     return function () {
103.  
     if (timer) {
104.  
     clearTimeout(timer); //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
105.  
     timer = setTimeout(fn, delay);
106.  
     } else {
107.  
     timer = setTimeout(fn, delay); // 进入该分支说明当前并没有在计时，那么就开始一个计时
108.  
     }
109.  
     };
110.  
     },
111.  
     refreshOpt() {
112.  
     let series = this.alarmLevelData.map((item, index) => {
113.  
     return {
114.  
     value: item.count,
115.  
     name: item.value,
116.  
     itemStyle: {
117.  
     normal: {
118.  
     color: {
119.  
     // 完成的圆环的颜色
120.  
     colorStops: colorStep[index],
121.  
     },
122.  
     label: {
123.  
     textStyle: {
124.  
     color: colorConstData[index],
125.  
     },
126.  
     },
127.  
     },
128.  
     },
129.  
     label: {
130.  
     show: true,
131.  
     position: "outside",
132.  
     formatter: `{b}:{c}个`,
133.  
     color: colorConstData[index],
134.  
     },
135.  
     };
136.  
     });
137.  
     let series2 = this.alarmLevelData.map((item, index) => {
138.  
     return {
139.  
     value: item.count,
140.  
     name: item.value,
141.  
     itemStyle: {
142.  
     normal: {
143.  
     color: {
144.  
     // 完成的圆环的颜色
145.  
     colorStops: colorStep[index],
146.  
     },
147.  
     opacity: 0.5,
148.  
     },
149.  
     },
150.  
     };
151.  
     });
152.  
      
153.  
     this.option = {
154.  
     legend: {
155.  
     orient: "vertical",
156.  
     show: true,
157.  
     right: "10",
158.  
     top: 30,
159.  
     y: "center",
160.  
     icon: "pin",
161.  
     itemGap: 30,
162.  
     textStyle: {
163.  
     fontSize: 12,
164.  
     lineHeight: 20,
165.  
     color: "#fft", //就是这个！超神奇
166.  
     },
167.  
     },
168.  
     tooltip: {
169.  
     show: true,
170.  
     valueFormatter: `{b}:{c}个`,
171.  
     },
172.  
     series: [
173.  
     // 最外层圆
174.  
     {
175.  
     type: "pie",
176.  
     radius: ["69%", "55%"],
177.  
     center: ["50%", "50%"],
178.  
     hoverAnimation: false,
179.  
     data: series,
180.  
      
181.  
     labelLine: {
182.  
     smooth: true,
183.  
     normal: {
184.  
     length: 35,
185.  
     lineStyle: {
186.  
     width: 1,
187.  
     },
188.  
     },
189.  
     },
190.  
     },
191.  
     // 内圆 中间文字
192.  
     {
193.  
     type: "pie",
194.  
     radius: ["60%", "40%"],
195.  
     center: ["50%", "50%"],
196.  
     hoverAnimation: false,
197.  
     z: 10,
198.  
     label: {
199.  
     position: "center",
200.  
     formatter: () => {
201.  
     return `告警总数\r\n{total|${this.allNum}} 个`;
202.  
     },
203.  
     rich: {
204.  
     total: {
205.  
     fontSize: 24,
206.  
     color: "#00ffcc",
207.  
     fontWeight: 600,
208.  
     },
209.  
     },
210.  
     color: "#FFFFFF",
211.  
     fontSize: 16,
212.  
     lineHeight: 30,
213.  
     fontWeight: 500,
214.  
     },
215.  
     data: series2,
216.  
     labelLine: {
217.  
     show: false,
218.  
     },
219.  
     },
220.  
      
221.  
     // 紫色线1 点
222.  
     {
223.  
     type: "custom",
224.  
     coordinateSystem: "none",
225.  
     renderItem: function (params, api) {
226.  
     return {
227.  
     type: "arc",
228.  
     shape: {
229.  
     cx: api.getWidth() / 2,
230.  
     cy: api.getHeight() / 2,
231.  
     r:
232.  
     (Math.min(api.getWidth(), api.getHeight()) / 2) *
233.  
     outerRidus1, // 180,
234.  
     startAngle: ((0 angle) * Math.PI) / 180,
235.  
     endAngle: ((90 angle) * Math.PI) / 180,
236.  
     },
237.  
     style: {
238.  
     stroke: "#8383FA",
239.  
     fill: "transparent",
240.  
     lineWidth: 1.5,
241.  
     },
242.  
     silent: true,
243.  
     };
244.  
     },
245.  
     data: [0],
246.  
     },
247.  
     // 紫色线1点
248.  
     {
249.  
     type: "custom",
250.  
     coordinateSystem: "none",
251.  
     renderItem: function (params, api) {
252.  
     let x0 = api.getWidth() / 2;
253.  
     let y0 = api.getHeight() / 2;
254.  
     let r =
255.  
     (Math.min(api.getWidth(), api.getHeight()) / 2) * outerRidus1;
256.  
     let point = getCirlPoint(x0, y0, r, 0 angle);
257.  
     return {
258.  
     type: "circle",
259.  
     shape: {
260.  
     cx: point.x,
261.  
     cy: point.y,
262.  
     r: 4,
263.  
     },
264.  
     style: {
265.  
     stroke: "#8450F9", //绿
266.  
     fill: "#8450F9",
267.  
     },
268.  
     silent: true,
269.  
     };
270.  
     },
271.  
     data: [0],
272.  
     },
273.  
     // 蓝色
274.  
     {
275.  
     type: "custom",
276.  
     coordinateSystem: "none",
277.  
     renderItem: function (params, api) {
278.  
     return {
279.  
     type: "arc",
280.  
     shape: {
281.  
     cx: api.getWidth() / 2,
282.  
     cy: api.getHeight() / 2,
283.  
     r:
284.  
     (Math.min(api.getWidth(), api.getHeight()) / 2) *
285.  
     outerRidus1, // 180,
286.  
     startAngle: ((180 angle) * Math.PI) / 180,
287.  
     endAngle: ((270 angle) * Math.PI) / 180,
288.  
     },
289.  
     style: {
290.  
     stroke: "#4386FA",
291.  
     fill: "transparent",
292.  
     lineWidth: 1.5,
293.  
     },
294.  
     silent: true,
295.  
     };
296.  
     },
297.  
     data: [0],
298.  
     },
299.  
     {
300.  
     type: "custom",
301.  
     coordinateSystem: "none",
302.  
     renderItem: function (params, api) {
303.  
     let x0 = api.getWidth() / 2;
304.  
     let y0 = api.getHeight() / 2;
305.  
     let r =
306.  
     (Math.min(api.getWidth(), api.getHeight()) / 2) * outerRidus1; // 180
307.  
     let point = getCirlPoint(x0, y0, r, 180 angle);
308.  
     return {
309.  
     type: "circle",
310.  
     shape: {
311.  
     cx: point.x,
312.  
     cy: point.y,
313.  
     r: 4,
314.  
     },
315.  
     style: {
316.  
     stroke: "#4386FA", //绿
317.  
     fill: "#4386FA",
318.  
     },
319.  
     silent: true,
320.  
     };
321.  
     },
322.  
     data: [0],
323.  
     },
324.  
     // 橘色
325.  
     {
326.  
     type: "custom",
327.  
     coordinateSystem: "none",
328.  
     renderItem: function (params, api) {
329.  
     return {
330.  
     type: "arc",
331.  
     shape: {
332.  
     cx: api.getWidth() / 2,
333.  
     cy: api.getHeight() / 2,
334.  
     r:
335.  
     (Math.min(api.getWidth(), api.getHeight()) / 2) *
336.  
     outerRidus2, // 200,
337.  
     startAngle: ((250 -angle) * Math.PI) / 180,
338.  
     endAngle: ((10 -angle) * Math.PI) / 180,
339.  
     },
340.  
     style: {
341.  
     stroke: "#0CD3DB",
342.  
     fill: "transparent",
343.  
     lineWidth: 1.5,
344.  
     },
345.  
     silent: true,
346.  
     };
347.  
     },
348.  
     data: [0],
349.  
     },
350.  
     {
351.  
     type: "custom",
352.  
     coordinateSystem: "none",
353.  
     renderItem: function (params, api) {
354.  
     let x0 = api.getWidth() / 2;
355.  
     let y0 = api.getHeight() / 2;
356.  
     let r =
357.  
     (Math.min(api.getWidth(), api.getHeight()) / 2) * outerRidus2; // 200;
358.  
     let point = getCirlPoint(x0, y0, r, 250 -angle);
359.  
     return {
360.  
     type: "circle",
361.  
     shape: {
362.  
     cx: point.x,
363.  
     cy: point.y,
364.  
     r: 4,
365.  
     },
366.  
     style: {
367.  
     stroke: "#0CD3DB", //绿
368.  
     fill: "#0CD3DB",
369.  
     },
370.  
     silent: true,
371.  
     };
372.  
     },
373.  
     data: [0],
374.  
     },
375.  
     // 粉色
376.  
     {
377.  
     type: "custom",
378.  
     coordinateSystem: "none",
379.  
     renderItem: function (params, api) {
380.  
     return {
381.  
     type: "arc",
382.  
     shape: {
383.  
     cx: api.getWidth() / 2,
384.  
     cy: api.getHeight() / 2,
385.  
     r:
386.  
     (Math.min(api.getWidth(), api.getHeight()) / 2) *
387.  
     outerRidus2, // 200,,
388.  
     startAngle: ((70 -angle) * Math.PI) / 180,
389.  
     endAngle: ((200 -angle) * Math.PI) / 180,
390.  
     },
391.  
     style: {
392.  
     stroke: "#FF8E89",
393.  
     fill: "transparent",
394.  
     lineWidth: 1.5,
395.  
     },
396.  
     silent: true,
397.  
     };
398.  
     },
399.  
     data: [0],
400.  
     },
401.  
     //粉色点
402.  
     {
403.  
     type: "custom",
404.  
     coordinateSystem: "none",
405.  
     renderItem: function (params, api) {
406.  
     let x0 = api.getWidth() / 2;
407.  
     let y0 = api.getHeight() / 2;
408.  
     let r =
409.  
     (Math.min(api.getWidth(), api.getHeight()) / 2) * outerRidus2; // 200,;
410.  
     let point = getCirlPoint(x0, y0, r, 70 -angle);
411.  
     return {
412.  
     type: "circle",
413.  
     shape: {
414.  
     cx: point.x,
415.  
     cy: point.y,
416.  
     r: 4,
417.  
     },
418.  
     style: {
419.  
     stroke: "#FF8E89", //粉
420.  
     fill: "#FF8E89",
421.  
     },
422.  
     silent: true,
423.  
     };
424.  
     },
425.  
     data: [0],
426.  
     },
427.  
     ],
428.  
     };
429.  
     if (timerId) {
430.  
     clearInterval(timerId);
431.  
     }
432.  
     timerId = setInterval(() => {
433.  
     //用setInterval做动画感觉有问题
434.  
     draw();
435.  
     myChart.setOption(this.option, true);
436.  
     }, 1000);
437.  
     },
438.  
     },
439.  
     };
440.  
     </script>
441.  
      
442.  
     <style lang="less" scoped>
443.  
     .alarmTotal {
444.  
     width: 100%;
445.  
     height: 230px;
446.  
     }
447.  
     </style>

这篇好文章是转载于：学新通技术网