refine dashboard charts animation
This commit is contained in:
parent
67c4a3b4ff
commit
06ed2c6cac
|
@ -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
|
||||
}]
|
||||
})
|
||||
}
|
||||
|
|
|
@ -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'
|
||||
}]
|
||||
})
|
||||
}
|
||||
|
|
|
@ -67,7 +67,9 @@
|
|||
{ value: 100, name: 'gold' },
|
||||
{ value: 59, name: 'forecastsx' },
|
||||
{ value: 49, name: 'markets' }
|
||||
]
|
||||
],
|
||||
animationEasing: 'cubicInOut',
|
||||
animationDuration: 2600
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue