前言
- 本篇来学习下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/echarts@5.4.1/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/echarts@5.4.1/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/echarts@5.4.1/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>
