Echarts动画的使用
加载动画的显示与隐藏:
Echarts已经内置好了加载数据的动画,我们只需要在合适的时机显示或者隐藏即可。
显示加载动画:myCharts.showLoading()
隐藏加载动画:myCharts.hideLoading()
增量动画的使用:
不管是更改数据还是增加数据都要通过 myCharts.setOption 实现。
不用考虑数据到底产生了哪些变化。
Echarts会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
动画的常用配置:(在option中进行配置)
(1)开启动画:animation:true;
(2)动画的时长:animationDuration:5000(以毫秒为单位)
// 可以对不同元素产生不同的动画时长的效果
// arg打印的是数字,平均值、最大值、最小值、横坐标
animationDuration:function(arg){
return 2000*arg
},
(3)缓动动画: animationEasing:'bounceOut',
(4)动画元素的阈值:animationThreshold:5,
单独形式的元素数量大于这个阈值时会关闭动画。
加载动画:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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.min.js"></script> </head> <body> <div id="main" style="height:400px;"></div> <script type="text/javascript"> var myCharts = echarts.init(document.getElementById('main')); myCharts.showLoading() // 获取数据之前显示加载动画 $.get('./data/test_data.json', function (ret) { myCharts.hideLoading() // 获取数据之后隐藏加载动画 var axisData = [] for (var i = 0; i < ret.length; i++) { var height = ret[i].height var width = ret[i].weight var itemArr = [height, width] axisData.push(itemArr) } var option = { xAxis: { type: 'value', scale: true }, yAxis: { type: 'value', scale: true }, series: [{ type: 'effectScatter', data: axisData, symbolSize: function (arg) { // console.log(arg) var weight = arg[1] var height = arg[0] / 100 // BMI > 28 肥胖 // BMI: 体重/ 身高*身高 kg m var bmi = weight / (height * height) if (bmi > 28) { return 20 } return 5 }, itemStyle: { color: function (arg) { console.log(arg) var weight = arg.data[1] var height = arg.data[0] / 100 var bmi = weight / (height * height) if (bmi > 28) { return 'red' } return 'green' } }, showEffectOn: 'emphasis', rippleEffect: { scale: 10 } }] }; myCharts.setOption(option) }) </script> </body> </html>
更改数据、增加数据
<script src="lib/echarts.min.js"></script> <div id="main" style="height:400px;border:1px solid black"></div> <button id="modify">修改数据</button> <button id="add">增加数据</button> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'] var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86] var option = { xAxis: { type: 'category', data: xDataArr }, yAxis: { type: 'value' }, series: [{ type: 'bar', data: yDataArr }] } // setOption可以设置多次 // 新旧option的关系不是互相覆盖的关系 // 我们在设置新的option的时候,只需要考虑到变化的部分就可以 myChart.setOption(option); var btnModify = document.getElementById('modify') btnModify.onclick = function () { var newData = [68, 34, 76, 46, 86, 90, 89, 92] var option = { series: [{ type: 'bar', data: newData }] } myChart.setOption(option); } var addBtn = document.getElementById('add') addBtn.onclick = function () { xDataArr.push('小米') yDataArr.push(99) var option = { xAxis: { data: xDataArr }, series: [{ data: yDataArr }] } myChart.setOption(option); } </script>