interru/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

refine dashboard charts animation

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/views/dashboard/editor/barChart.vue
View file

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

8
src/views/dashboard/editor/lineChart.vue
View file

@ -90,7 +90,9 @@
}, },
smooth: true, smooth: true,
type: 'line', type: 'line',
data: [100, 120, 161, 134, 105, 160, 165] data: [100, 120, 161, 134, 105, 160, 165],
animationDuration: 2600,
animationEasing: 'cubicInOut'
}, },
{ {
name: 'buyers', 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'
}] }]
}) })
} }

4
src/views/dashboard/editor/pieChart.vue
View file

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