echarts實現加載動畫效果，高亮旋轉

本文轉載自查看原文 2020-07-23 15:18 6119

先放效果圖.......................................................................................

廢話不多說

首先，兩個div，用來存放echarts

1 <div>
2     <div id="main" style="width: 600px; height:600px;"></div>
3     <div id="toprightviewLines" style="width: 600px; height:600px;"></div>
4 </div>

一、制作里面的動圖

我用的是echarts的餅圖，結合了鼠標滑入高亮的效果

  1   var myChart = echarts.init(document.getElementById('main'));
  2 
  3   var pieData = [{
  4       value: 22,
  5       name: 'name1',
  6       itemStyle: {
  7         normal: {
  8           // color: 'rgba(42,42,187,1)'
  9           color: { //圖形漸變顏色方法，四個數字分別代表，右，下，左，上，offset表示0%到100%
 10             type: 'linear',
 11             x: 0,
 12             y: 0,
 13             x2: 0, //從左到右 0-1
 14             y2: 1,
 15             colorStops: [{
 16               offset: 0,
 17               color: '#4b42f5' // 0% 處的顏色
 18             }, {
 19               offset: 1,
 20               color: '#3540bb' // 100% 處的顏色
 21             }],
 22             globalCoord: false // 缺省為 false
 23           }
 24         }, //正常顏色
 25         emphasis: {
 26           color: 'rgba(42,42,187,0.5)'
 27         }, //鼠標移入顏色
 28       },
 29     },
 30     {
 31       value: 22,
 32       name: 'name2',
 33       itemStyle: {
 34         normal: {
 35           color: {
 36             type: 'linear',
 37             x: 0,
 38             y: 0,
 39             x2: 0, //從左到右 0-1
 40             y2: 1,
 41             colorStops: [{
 42               offset: 0,
 43               color: '#3a48c1'
 44             }, {
 45               offset: 1,
 46               color: '#4c70c2'
 47             }],
 48             globalCoord: false
 49           }
 50         },
 51         emphasis: {
 52           color: 'rgba(66,90,193,0.5)'
 53         }, 
 54       },
 55     },
 56     {
 57       value: 22,
 58       name: 'name3',
 59       itemStyle: {
 60         normal: {
 61           color: 'rgba(85,132,151,1)'
 62         },
 63         emphasis: {
 64           color: 'rgba(85,132,151,0.5)'
 65         },
 66       },
 67     },
 68     {
 69       value: 22,
 70       name: 'name4',
 71       itemStyle: {
 72         normal: {
 73           color: 'rgba(87,179,180,1)'
 74         }, 
 75         emphasis: {
 76           color: 'rgba(87,179,180,0.5)'
 77         },
 78       },
 79     },
 80     {
 81       value: 22,
 82       name: 'name5',
 83       itemStyle: {
 84         normal: {
 85           color: 'rgba(58,177,184,1)'
 86         }, 
 87         emphasis: {
 88           color: 'rgba(58,177,184,0.5)'
 89         }, 
 90       },
 91     },
 92     {
 93       value: 22,
 94       name: 'name6',
 95       itemStyle: {
 96         normal: {
 97           color: 'rgba(29,173,194,1)'
 98         }, 
 99         emphasis: {
100           color: 'rgba(29,173,194,0.5)'
101         }, 
102       },
103     },
104     {
105       value: 22,
106       name: 'name7',
107       itemStyle: {
108         normal: {
109           color: 'rgba(4,171,203,1)'
110         }, 
111         emphasis: {
112           color: 'rgba(4,171,203,0.5)'
113         }, 
114       },
115     },
116     {
117       value: 22,
118       name: 'name8',
119       itemStyle: {
120         normal: {
121           color: 'rgba(3,177,203,1)'
122         }, 
123         emphasis: {
124           color: 'rgba(3,177,203,0.5)'
125         }, 
126       },
127     },
128     {
129       value: 22,
130       name: 'name9',
131       itemStyle: {
132         normal: {
133           color: 'rgba(3,134,205,1)'
134         }, 
135         emphasis: {
136           color: 'rgba(3,134,205,0.5)'
137         }, 
138       },
139     },
140     {
141       value: 22,
142       name: 'name10',
143       itemStyle: {
144         normal: {
145           color: 'rgba(3,102,205,1)'
146         }, 
147         emphasis: {
148           color: 'rgba(3,102,205,0.5)'
149         }, 
150       },
151     },
152     {
153       value: 22,
154       name: 'name11',
155       itemStyle: {
156         normal: {
157           color: 'rgba(89,105,180,1)'
158         }, 
159         emphasis: {
160           color: 'rgba(89,105,180,0.5)'
161         }, 
162       },
163     },
164     {
165       value: 22,
166       name: 'name12',
167       itemStyle: {
168         normal: {
169           color: 'rgba(68,65,198,1)'
170         }, 
171         emphasis: {
172           color: 'rgba(68,65,198,0.5)'
173         }, 
174       },
175     },
176   ]
177   option = {
178     series: [{
179         name: '動圖',
180         type: 'pie',
181         radius: ['60%', '70%'],
182         itemStyle: {
183           borderColor: '#0c092a', // 增加空隙，該顏色與背景色相同
184           borderWidth: 5, // 空隙大小
185         },
186         avoidLabelOverlap: false,
187         hoverAnimation: false, // 取消鼠標滑入放大的效果
188         animation: false, // 取消餅圖展開的效果
189         label: {
190           normal: {
191             show: false
192           },
193           emphasis: {
194             show: false
195           }
196         },
197         labelLine: {
198           normal: {
199             show: false
200           }
201         },
202         data: pieData
203       }
204     ]
205   };
206 
207   myChart.setOption(option);

現在的效果圖如下：

接下來，添加setTimeout，觸發dispatchAction

 1   var myChartPieIndex = 0;
 2 
 3   var a = setInterval(function () {
 4     var dataLen = option.series[0].data.length;
 5     // 取消之前高亮的圖形
 6     myChart.dispatchAction({
 7       type: 'downplay',
 8       seriesIndex: 0,
 9       dataIndex: myChartPieIndex
10     });
11     myChartPieIndex = (myChartPieIndex + 1) % dataLen;
12     // 高亮當前圖形
13     myChart.dispatchAction({
14       type: 'highlight',
15       seriesIndex: 0,
16       dataIndex: myChartPieIndex
17     });
18   }, 200);

現在你會發現，成功了！！！

二、制作外面的動畫

  1   showpieLinex();
  2 
  3   function showpieLinex() {
  4     var myChartLine = echarts.init(document.getElementById('toprightviewLines'));
  5 
  6     var tips = 0;
  7     var m = 0;
  8     var mm = 1;
  9 
 10     function loading() {
 11       return [{
 12           value: tips,
 13           itemStyle: {
 14             normal: {
 15               color: '#5c78a7', // 走過的顏色
 16             }
 17           }
 18         },
 19         {
 20           value: m,
 21           itemStyle: {
 22             normal: {
 23               borderWidth: 5,
 24               borderColor: {
 25                 type: 'linear',
 26                 x: 0,
 27                 y: 0,
 28                 x2: 0,
 29                 y2: 4,
 30                 colorStops: [{
 31                   offset: 0,
 32                   color: 'rgba(255,255,255,0.7)' // 0% 處的顏色
 33                 }, {
 34                   offset: 0.3,
 35                   color: 'rgba(255,255,255,1)' // 0% 處的顏色
 36                 }, {
 37                   offset: 0.6,
 38                   color: 'rgba(255,255,255,1)' // 0% 處的顏色
 39                 }, {
 40                   offset: 0.8,
 41                   color: 'rgba(255,255,255,1)' // 0% 處的顏色
 42                 }, {
 43                   offset: 1,
 44                   color: 'rgba(255,255,255,1)' // 100% 處的顏色
 45                 }],
 46                 globalCoord: false,
 47               },
 48               color: 'rgba(255,255,255,1)',
 49               shadowBlur: 30,
 50               shadowColor: 'rgba(255,255,255,1)'
 51             }
 52           }
 53         }, {
 54           value: 100 - tips,
 55           itemStyle: {
 56             normal: {
 57               color: '#344285', // 未走的線的顏色
 58             }
 59           }
 60         }
 61       ];
 62     }
 63 
 64     setInterval(function () {
 65       if (tips == 100) {
 66         tips = 0;
 67         m = 0;
 68       } else if (tips <= 10) {
 69         ++tips;
 70         ++m
 71       } else if (tips >= 90) {
 72         ++tips;
 73         --m
 74       } else {
 75         ++tips;
 76       }
 77 
 78       myChartLine.setOption({
 79         animation: false,
 80         animationThreshold: 100,
 81         animationDurationUpdate: function (idx) {
 82           // 越往后的數據延遲越大
 83           return idx * 1000;
 84         },
 85         series: [{
 86           name: 'loading',
 87           type: 'pie',
 88           radius: ['75%', '80%'],
 89           center: ['50%', '50%'],
 90           hoverAnimation: false,
 91           label: {
 92             normal: {
 93               show: false,
 94             }
 95           },
 96           data: loading()
 97         }]
 98       })
 99     }, 50);
100   }

注：外圈效果轉載自https://blog.csdn.net/zk_1325572803/article/details/102525045

三、現在，兩個echarts 分隔顯示，接下來需要將兩個圖顯示在一起，制作出動畫加載的效果。

1 <div style="display: flex; justify-content: space-around;">
2     <div id="main" style="width: 600px; height:600px;position: absolute;"></div>
3     <div id="toprightviewLines" style="width: 600px; height:600px; position: absolute;"></div>
4 </div>

我用的是定位，如果有更好的辦法，請給我留言！！！

注：echarts應使用高版本的

歡迎大家留言，指正。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 VUE-CSS圖片旋轉-實現加載中動畫效果 CSS 實現加載動畫之一-菊花旋轉 CSS 實現加載動畫之五-光盤旋轉 CSS 實現加載動畫之七-彩環旋轉 CSS 實現加載動畫之二-圓環旋轉 2d旋轉（css3實現過度效果和動畫效果）【WPF】實現加載中動畫效果 loading加載動畫效果js實現 CSS3偽類實現動畫旋轉效果 Silverlight、WPF 平台實現旋轉、縮放等動畫效果