加載動畫的顯示與隱藏：
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>