refine dashboard charts animation

This commit is contained in:
Pan 2017-07-17 10:16:28 +08:00
parent 67c4a3b4ff
commit 06ed2c6cac
3 changed files with 16 additions and 7 deletions

View file

@ -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
}]
})
}

View file

@ -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'
}]
})
}

View file

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