From 06ed2c6cacb6faa6ef0925f94e3ec80de4db9865 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Mon, 17 Jul 2017 10:16:28 +0800
Subject: [PATCH] refine dashboard charts animation

---
 src/views/dashboard/editor/barChart.vue  | 11 +++++++----
 src/views/dashboard/editor/lineChart.vue |  8 ++++++--
 src/views/dashboard/editor/pieChart.vue  |  4 +++-
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/views/dashboard/editor/barChart.vue b/src/views/dashboard/editor/barChart.vue
index 05d00f88..283bf57a 100644
--- a/src/views/dashboard/editor/barChart.vue
+++ b/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
           }]
         })
       }
diff --git a/src/views/dashboard/editor/lineChart.vue b/src/views/dashboard/editor/lineChart.vue
index 6c4cbec4..f9354b71 100644
--- a/src/views/dashboard/editor/lineChart.vue
+++ b/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'
           }]
         })
       }
diff --git a/src/views/dashboard/editor/pieChart.vue b/src/views/dashboard/editor/pieChart.vue
index 672480ae..e520f434 100644
--- a/src/views/dashboard/editor/pieChart.vue
+++ b/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
             }
           ]
         })