散点图特点
散点图可以帮助我们推断出变量间的相关性
比如身高和体重的关系
散点图也常用在地图的标注上
散点图实现方法
1.x轴数据和y轴数据:都是二维数组
比如 [[‘身高’,体重],[‘身高’,体重],…]
2.图标类型:在series下设置type:scatter xAxis和yAxis的type都要设置为value
3.调整将坐标轴都设置为脱离0值比例,scale:true
散点图基本实现
<!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="./echarts.min.js"></script>
</head>
<body>
<div style="width: 600px; height: 600px;"></div>
</body>
<script>
//1. ECharts最基本的代码结构
//2. x轴和y轴数据 二维数组 [ [身高,体重],... ]
//3. 将type的值设置为scatter, x轴和y轴的type都是value
var data = [{ "gender": "female", "height": 161.2, "weight": 51.6 }, { "gender": "female", "height": 167.5, "weight": 59 }, { "gender": "female", "height": 159.5, "weight": 49.2 }, { "gender": "female", "height": 157, "weight": 63 }, { "gender": "female", "height": 155.8, "weight": 53.6 }, { "gender": "female", "height": 170, "weight": 59 }, { "gender": "female", "height": 159.1, "weight": 47.6 }, { "gender": "female", "height": 166, "weight": 69.8 }, { "gender": "female", "height": 176.2, "weight": 66.8 }, { "gender": "female", "height": 160.2, "weight": 75.2 }, { "gender": "female", "height": 172.5, "weight": 55.2 }, { "gender": "female", "height": 170.9, "weight": 54.2 }, { "gender": "female", "height": 172.9, "weight": 62.5 }, { "gender": "female", "height": 153.4, "weight": 42 }, { "gender": "female", "height": 160, "weight": 50 }, { "gender": "female", "height": 147.2, "weight": 49.8 }, { "gender": "female", "height": 168.2, "weight": 49.2 }, { "gender": "female", "height": 175, "weight": 73.2 }, { "gender": "female", "height": 157, "weight": 47.8 }, { "gender": "female", "height": 167.6, "weight": 68.8 }, { "gender": "female", "height": 159.5, "weight": 50.6 }, { "gender": "female", "height": 175, "weight": 82.5 }, { "gender": "female", "height": 166.8, "weight": 57.2 }, { "gender": "female", "height": 176.5, "weight": 87.8 }, { "gender": "female", "height": 170.2, "weight": 72.8 }, { "gender": "female", "height": 174, "weight": 54.5 }]
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)
}
console.log(axisData);
var mCharts = echarts.init(document.querySelector('div'))
var option = {
xAxis:{
type:'value',
scale:true
},
yAxis:{
type:'value',
scale:true
},
series:[
{
type:'scatter',
data:axisData
}
]
}
mCharts.setOption(option)
</script>
</html>
如图所示
气泡图
散点的大小不同,颜色不同来实现
series:[
{
type:'scatter',
data:axisData,
// 气泡图
symbolSize:function(arg){
// console.log(arg);
var height = arg[0]/100
var weight = arg[1]
// BMI计算 = 体重/(身高*身高) 大于28,就代表肥胖
var bmi =weight / (height*height)
if(bmi > 28){
return 20
}
return 5
},
itemStyle:{ //设置散点图颜色,可以是一个函数
color:function(arg){
console.log(arg);
var height = arg.data[0]/100
var weight = arg.data[1]
// BMI计算 = 体重(kg)/(身高(m)*身高) 大于28,就代表肥胖
var bmi =weight / (height*height)
if(bmi > 28){
return 'red'
}
return 'green'
}
}
}
]
点击进入:BMI计算
执行结果
涟漪动画效果
series:[
{
// 涟漪动画效果
type:'effectScatter',
rippleEffect:{
scale:5 //缩放 涟漪动画范围大小
},
showEffectOn:'emphasis', // 悬停散点涟漪执行
}
]
执行结果
更多配置请去Echarts官网学习
Echarts官网:请点击
1190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
