refine dashboard charts animation

Author: PanJiaChen

src/views/dashboard/editor/barChart.vue

@@ -5,7 +5,7 @@
 <script>
   import echarts from 'echarts';
   require('echarts/theme/macarons'); // echarts 主题
-
+  const animationDuration = 3000;
   export default {
     props: {
       className: {
@@ -68,19 +68,22 @@
             type: 'bar',
             stack: 'vistors',
             barWidth: '60%',
-            data: [79, 52, 200, 334, 390, 330, 220]
+            data: [79, 52, 200, 334, 390, 330, 220],
+            animationDuration
           }, {
             name: 'pageB',
             type: 'bar',
             stack: 'vistors',
             barWidth: '60%',
-            data: [80, 52, 200, 334, 390, 330, 220]
+            data: [80, 52, 200, 334, 390, 330, 220],
+            animationDuration
           }, {
             name: 'pageC',
             type: 'bar',
             stack: 'vistors',
             barWidth: '60%',
-            data: [30, 52, 200, 334, 390, 330, 220]
+            data: [30, 52, 200, 334, 390, 330, 220],
+            animationDuration
           }]
         })
       }

src/views/dashboard/editor/lineChart.vue

@@ -90,7 +90,9 @@
             },
             smooth: true,
             type: 'line',
-            data: [100, 120, 161, 134, 105, 160, 165]
+            data: [100, 120, 161, 134, 105, 160, 165],
+            animationDuration: 2600,
+            animationEasing: 'cubicInOut'
           },
           {
             name: 'buyers',
@@ -107,7 +109,9 @@
                 }
               }
             },
-            data: [120, 82, 91, 154, 162, 140, 130]
+            data: [120, 82, 91, 154, 162, 140, 130],
+            animationDuration: 2000,
+            animationEasing: 'quadraticOut'
           }]
         })
       }

src/views/dashboard/editor/pieChart.vue

@@ -67,7 +67,9 @@
                 { value: 100, name: 'gold' },
                 { value: 59, name: 'forecastsx' },
                 { value: 49, name: 'markets' }
-              ]
+              ],
+              animationEasing: 'cubicInOut',
+              animationDuration: 2600
             }
           ]
         })