气泡图效果

要能够达到气泡图的效果, 其实就是让每一个散点的大小不同, 让每一个散点的颜色不同

• 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,                      
                }
            ]