前言
- 本篇来学习下ECharts中动画的使用
加载动画
- showLoading() ：显示加载动画，一般在获取图表数据之前 显示加载动画
- hideLoading()：隐藏加载动画，在获取图表数据之后 隐藏加载动画, 显示图表
仅做使用示例，未试出动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ECharts高级-加载动画</title>
<!-- cdn方式 引入echarts.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height: 400px"></div>
<script>
var sleep = function (time) {
var timeOut = new Date().getTime() + parseInt(time, 10);
while (new Date().getTime() <= timeOut) {
}
}
var myCharts = echarts.init(document.getElementById('app'))
myCharts.showLoading() // 获取数据前显示加载动画
sleep(8000) // 单位ms 模拟接口响应时长
var xDataArr = ['张三', '李四', '王五', '大明白', '小糊涂'] // x轴数据
myCharts.hideLoading() // 获取数据后隐藏加载动画
var yDataArr = [88, 92, 63, 77, 94] // y轴数据
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '分数',
type: 'bar', // 图表类型 bar:柱状图 line:折线图 pie:饼图
data: yDataArr,
markPoint: {
// 标记最大最小值
data: [
{
type: 'max', name: '最大值'},
{
type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
label: {
show: true, // 柱状图显示数值
rotate: 30, // 值旋转角度
},
barWidth: '30%' // 柱的宽度
}
]
}
// 将配置项设置给echarts实例对象
myCharts.setOption(option)
</script>
</body>
</html>
增量动画
- 所有数据的更新都通过 setOption 实现, ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ECharts高级-增量动画</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<button id="modify">修改数据</button>
<button id="add">增加数据</button>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var xDataArr = ['张三', '李四', '王五', '闰土', '小糊涂', '大明白']
var yDataArr = [88, 92, 63, 77, 94, 80]
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: yDataArr,
markPoint: {
data: [
{
type: 'max', name: '最大值'
},
{
type: 'min', name: '最小值'
}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
label: {
show: true,
rotate: 60
},
barWidth: '30%'
}
]
}
mCharts.setOption(option)
var btnModify = document.querySelector('#modify')
btnModify.onclick = function () {
var newYDataArr = [68, 32, 99, 77, 94, 80]
// setOption 可以设置多次
// 新的option 和 旧的option
// 新旧option的关系并不是相互覆盖的关系, 是相互整合的关系
// 我们在设置新的option的时候, 只需要考虑到变化的部分就可以
var option = {
series: [
{
data: newYDataArr
}
]
}
mCharts.setOption(option)
}
var btnAdd = document.querySelector('#add')
btnAdd.onclick = function(){
xDataArr.push('小白')
yDataArr.push(99)
var option = {
xAxis: {
data: xDataArr
},
series: [
{
data: yDataArr
}
]
}
mCharts.setOption(option)
}
</script>
</body>
</html>
动画的配置
- 开启动画
- animation: true
- 动画时长
- animationDuration: 5000
- 缓动动画
- animationEasing : ‘bounceOut’ （linear:线性变化 bounceOut: 线性变化）
- 动画阈值 ：单种形式的元素数量(通俗说 柱状图柱子数)大于这个阈值时会关闭动画
- animationThreshold: 5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>EChart高级-动画配置</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height: 400px"></div>
<script>
// 初始化echarts实例对象
var myCharts = echarts.init(document.getElementById('app'))
// 准备数据 将type的值设置为bar
var xDataArr = ['张三', '李四', '王五', '大明白', '小糊涂'] // x轴数据
var yDataArr = [88, 92, 63, 77, 94] // y轴数据
var option = {
animation: true, // 控制动画是否开启,模认true
// animationDuration: 5000, // 动画的时长, 以毫秒为单位
animationDuration: function (arg) {
console.log(arg)
return 2000 * arg // 不同值得到不同的动画时长
},
animationEasing: 'bounceOut', // 缓动动画，linear:线性变化 bounceOut: 线性变化
animationThreshold: 5, // 动画元素的阈值,
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '分数',
type: 'bar', // 图表类型 bar:柱状图 line:折线图 pie:饼图
data: yDataArr,
markPoint: {
// 标记最大最小值
data: [
{
type: 'max', name: '最大值'},
{
type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
label: {
show: true, // 柱状图显示数值
rotate: 30, // 值旋转角度
},
barWidth: '30%' // 柱的宽度
}
]
}
// 将配置项设置给echarts实例对象
myCharts.setOption(option)
</script>
</body>
</html>