refine dashboard charts animation
This commit is contained in:
parent
67c4a3b4ff
commit
06ed2c6cac
|
@ -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
|
||||||
}]
|
}]
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -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'
|
||||||
}]
|
}]
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue