echarts 散点图(带涟漪动画)

1、准备的数据必须是二维的数值数据
	方式一:
		[[数值,数值],[数值,数值]]
		
	方式二:
		[
			{
				value:[数值,数值]
		        label: {},	自定义标签样式，仅对该数据项有效
		        itemStyle:{}	自定义特殊 itemStyle，仅对该数据项有效
			}
		]

2、x和y轴设置
	x和y都设置成数值类型
	xAxis:
	{
        type:'value',
        scale:true	坐标轴不从0开始
    },
    yAxis:
    {
        type:'value',
        scale:true
    },	

3、设置数据显示和样式
	series:[
		{
			type:'scatter',
			data:axisData,  数据必须是二维数值数组
			symbolSize:n,   散点固定大小
			symbolSize:function(value,params)  动态设置散点大小
	        {
	        	每个散点都会执行该函数
	        	第一个参数value为当前散点的数据值。第二个参数params是其它的数据项参数。
	      
	        	return n;
	        }，
	        itemStyle:{  设置散点样式
	        	color:'red', 固定散点颜色
	        	color:function(params){ 动态设置散点颜色
	        		params包含了seriesIndex, dataIndex, data, value等参数
	        		params.data获取当前散点的数值
					return '颜色';  
	        	}
	        },
	        lable:{
	        	show:true,  显示散点y轴对应内容
	        }
	        
	         
		}
	]
	
4、设置散点涟漪动画
	series:[
		{
			type:'effectScatter',
			showEffectOn:'emphasis',  'render'绘制完成后显示特效,'emphasis' 高亮（hover）的时候显示特效。
		    rippleEffect:{  设置涟漪动画样式
             color:'purple',   涟漪颜色,默认为散点自身颜色
             brushType:'fill'  动画方式,全填充或只有线条,'stroke'
             period:4,   动画周期
             scale:'2.5',  涟漪规模
          },
		}
	]

效果图:

代码示例:

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

    var option = {
      xAxis:{
        type:'value',
        scale:true
      },
      yAxis:{
        type:'value',
        scale:true
      },
      series:[
        {
          type:'effectScatter',
          showEffectOn:'emphasis',  //'render' 绘制完成后显示特效,'emphasis' 高亮（hover）的时候显示特效。
          rippleEffect:{ //设置涟漪动画样式
            // color:'purple',  //涟漪颜色,默认为散点自身颜色
            // brushType:'fill' //动画方式,全填充或只有线条,'stroke'
            period:4,  //动画周期
            scale:'2.5',  //涟漪规模
            brushType:'fill'
          },
          data:axisData, //数据必须是二维数值数组
          // symbolSize:10, //散点的固定大小
          symbolSize:function(value,params) //其中第一个参数value为data中的每一组数据值。第二个参数params是其它的数据项参数。
          {
            var height = value[0] / 100
            var weight = value[1]
            // bmi = 体重kg / (身高m*身高m)   大于28,就代表肥胖
            var bmi = weight / (height * height)
            if (bmi > 28) {
              return 20;
            }else if(bmi>20)
            {
              return 10
            }
            return 5;

          },
          itemStyle:{  //设置散点样式
            // color:'green' 固定颜色
            color:function(params) // 包含了seriesIndex, dataIndex, data, value等参数
            {
              var height = params.data[0] / 100
              var weight = params.data[1]
              // bmi = 体重kg / (身高m*身高m)   大于28,就代表肥胖
              var bmi = weight / (height * height)

            if (bmi > 28) {
              return 'red';
            }else if(bmi>20)
            {
              return 'green';
            }
            return 'blue';


            }
          },
          label:{
            show:true,
            fontSize:5
          }
        }
      ]
    };

    myMap.setOption(option);