Echarts笔记——加载动画
-
在数据加载前,设置加载动画
myChart.showLoading()
-
服务器数据取得成功之后,隐藏加载动画
myChart.hideLoading()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加载动画</title>
<script src="../../js/echarts.min.js"></script>
<script src="../../js/jquery.min.js"></script>
<!-- <script src="../../Data/scatterData.json"></script>-->
</head>
<body>
<div id="main" style="height: 800px;width: 1200px;"></div>
<script type="text/javascript">
var Data = []
// console.log(Data)
var myChart = echarts.init(document.getElementById('main'))
// 在数据加载前,设置加载动画
myChart.showLoading()
// 获取文件中的数据,遍历操作,二维数组(散点坐标)
$.get("../../Data/scatterData.json",function (ec) {
// console.log(ec)
// 服务器数据取得成功之后,隐藏加载动画
myChart.hideLoading()
for (var i = 0; i < ec.length; i++) {
var height = ec[i].height
var weight = ec[i].weight
var newArr = [height, weight]
Data.push(newArr) // push写入数据
// console.log(Data)
}
var option = {
title: {
text: 'BMI散点图',
left: '45%'
},
xAxis: {
name: '身高(cm)',
type: 'value',
scale: true
},
yAxis: {
name: '体重(kg)',
type: 'value',
scale: true
},
series: [
{
type: 'effectScatter', // 带涟漪动画的散点图
data: Data,
showEffectOn:'emphasis', // 配置何时显示特效 'emphasis' 高亮(hover)的时候显示特效。
rippleEffect:{ // 涟漪特效相关配置
color:'#8e2c49',
period:2, // 动画的周期,秒数
scale:10, // 波纹的最大缩放比例
brushType:'stroke' // 波纹样式
},
symbolSize: function (arg) { //按条件设置散点大小函数
var height = arg[0] / 100
var weight = arg[1]
// console.log(weight)
//计算BMI
var BMI = weight / (height * height)
// console.log(BMI)
if (BMI >= 20) {
return 40
}
return 12
},
itemStyle: {
color: function (arg) { // 按条件设置散点颜色函数
// console.log(arg)
// console.log(arg)
var height = arg.data[0]/100 // 取arg对象里的data值
var weight = arg.data[1]
// console.log(height)
var BMI = weight / (height * height)
// console.log(BMI)
if (BMI >= 20) {
return 'red'
}
return 'green'
}
},
}
]
};
myChart.setOption(option)
})
</script>
</body>
</html>