动画的使用(ECharts)
Posted So istes immer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了动画的使用(ECharts)相关的知识，希望对你有一定的参考价值。
1.加载动画
ECharts已经内置好了加载数据的动画，我们只需要在合适的时机显示或隐藏即可
显示加载动画：mCharts.showLoading()
隐藏加载动画：mCharts.hideLoading()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
<script src="lib/jquery-3.6.0.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
var mCharts = echarts.init(document.querySelector('div'))
mCharts.showLoading(); //显示加载动画
$.get('data/test_data.json', function(data){
mCharts.hideLoading(); //隐藏加载动画
var axisData = []
for (var i=0;i<data.length;i++) {
var height = data[i].height
var weight = data[i].weight
var newArr = [height, weight]
axisData.push(newArr)
}
var option = {
xAxis: {
type: 'value',
scale: true
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
name: '身高和体重',
type: 'effectScatter',
showEffectOn: 'emphasis',
rippleEffect: {
scale: 8
},
data: axisData
},
]
}
mCharts.setOption(option)
})
</script>
</body>
</html>data/test_data.json
[{ "gender": "female", "height": 177.1, "weight": 69.6 },
...
{ "gender": "female", "height": 174.1, "weight": 53.7 } ]为了放缓数据的获取速度，从而看到加载动画，可在Network中设置一下
加载动画如图
2.增量动画
图表已经展示出来，但是数据又发生变动，这样引起的动画叫增量动画。
用setOption方法来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/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, 45, 48, 89, 99, 77]
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value',
},
series: [{
name: '语文',
type: 'bar',
barWidth: '50%',
data: yDataArr,
label: {
show: true,
rotate: 30,
position: 'inside'
}
}]
}
mCharts.setOption(option)
var btnModify = document.querySelector('#modify');
btnModify.onclick = function() {
var newDataArr = [69, 95, 18, 89, 99, 77]
// setOption可以设置多次
// 新的option和旧的option的关系并不是相互覆盖的关系，而是相互整合的关系
// 我们在设置新的option的时候，只需要考虑到变化的部分就行
var option = {
series: [
{
data: newDataArr
}
]
}
mCharts.setOption(option)
}
var btnAdd = document.querySelector('#add')
btnAdd.onclick = function() {
xDataArr.push('小明')
yDataArr.push(96)
var option = {
xAxis: {
data: xDataArr
},
series: [
{
data: yDataArr
}
]
}
mCharts.setOption(option)
}
</script>
</body>
</html>原图
点击“修改数据” 按钮之后
点击“添加数据” 按钮之后
3.动画的配置项
开启动画
animation:true
动画时长
animationDuration:5000
缓动动画
animationEasing:'bounceOut'，其它参数可查看官网
动画阈值
animationThreshold:8
单个系列显示的图形数量大于这个阈值时会关闭动画
var option = {
animation: true, //控制动画是否开启
animationDuration: 5000, //控制动画的时长
animationEasing: 'bounceOut', //缓动动画
animationThreshold: 7, //动画元素的阈值
... //原代码不变
}以上是关于动画的使用(ECharts)的主要内容，如果未能解决你的问题，请参考以下文章