标签：效果 weight gender 常见 散点图 height 散点 female arg
气泡图效果
要能够达到气泡图的效果, 其实就是让每一个散点的大小不同, 让每一个散点的颜色不同
- symbolSize 控制散点的大小
- itemStyle.color 控制散点的颜色
这两个配置项都支持固定值的写法, 也支持回调函数的写法
固定值的写法如下:
series:[
{
type:'scatter',
data:axisData,
symbolSize:20,
}
]
此时就会发现点变大了
symbolSize支持回调函数
此时我们该更一下数据
var data = [
{ "gender": "female", "height": 161.2, "weight": 70 },
{"gender": "female", "height": 167.5, "weight": 69 },
{ "gender": "female","height": 159.5, "weight": 79 },
{ "gender": "female", "height": 157,"weight": 83 },
{ "gender": "female", "height": 155.8, "weight": 78 },
{"gender": "female", "height": 170, "weight": 89 },
{ "gender": "female", "height": 160.2, "weight": 78 },
{"gender": "female", "height": 168.5, "weight": 64 },
{ "gender": "female","height": 169.5, "weight": 89 },
{ "gender": "female", "height": 157,"weight": 74 },
{ "gender": "female", "height": 159.8, "weight":85 },
{"gender": "female", "height": 162, "weight": 88 }
]
我们可以看到arg输出的是每一个人的体重和身高，让每个点的大小随着自己体重和身高的比例变化而变化
series:[
{
type:'scatter',
data:axisData,
// symbolSize:20,
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更改散点的颜色
series:[
{
type:'scatter',
data:axisData,
// symbolSize:20,
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:'red'
}
}
]
itemStyle也是支持回调函数的，此时我们可以输出看一下
itemStyle:{
color:function(arg){
console.log(arg)
}
}
itemStyle:{
color:function(arg){
var weight = arg.data[1]
var height = arg.data[0] / 100
// BMI > 28 则代表肥胖, 肥胖的人用大的散点标识, 正常的人用小散点标识
// BMI: 体重/ 身高*身高 kg m
var bmi = weight / (height * height)
if (bmi > 28) {
return 'red'
}
return 'blue'
}
}
此时就可以看到肥胖的人，不仅散点变大，颜色也改变
涟漪动画的效果
series:[
{
type:'effectScatter',
rippleEffect:{
scale:5 //设置涟漪动画的强度
},
data:axisData,
}
]
我们可以通过showEffectOn设置涟漪属性
render 每一个散点渲染完之后自动拥有涟漪动画的效果 （默认效果） emphasis当这个散点被我们鼠标滑过才会展示涟漪效果series:[
{
type:'effectScatter',
showEffectOn:' emphasis', //render 每一个散点渲染完之后自动拥有涟漪动画的效果 emphasis当这个散点被我们鼠标滑过才会展示涟漪效果
rippleEffect:{
scale:5 //设置涟漪动画的强度
},
data:axisData,
}
]
标签：效果,weight,gender,常见,散点图,height,散点,female,arg 来源： https://www.cnblogs.com/keyeking/p/15515444.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。