# :-: 散点图（scatter） ### 散点图可以帮助我们推断出变量间的相关性：如身高和体重的关系，经常结合地图使用 ``` 案例： 1.新建一个容器 <div style="width:600px;height:400px;margin:100px auto" id="chart"></div> 2.数据及配置 //x轴和y轴数据 ： 二维数组 [['身高','体重'],['身高','体重'],...] //type类型是scatter，x和y轴都是value var axisData = [ [172.1,125.6],[164,125.6],[165,128.6], [177.1,125.6],[164,185.6],[175,148.6], [175.1,125.6],[164,145.6],[185,148.6] ]; //初始化 var myCharts = this.$echarts.init(document.getElementById('chart')); var option = { xAxis : {type : 'value',scale:true},//x轴，scale:摆脱0值比例 yAxis : {type : 'value',scale:true},//y轴，scale:摆脱0值比例 series : [ { type : 'scatter', //类型 data : axisData, //数据 } ] }; myCharts.setOption(option); ``` :-:  :-:  ## 案例：气泡图效果，筛选出肥胖的人，并且颜色和大小做出区分 ``` series : [ { type : 'scatter', //类型 data : axisData, // symbolSize : 20,//控制散点大小，固定值 symbolSize : function(arg){//控制散点大小，也支持回调函数，可以单独控制某些散点的大小 // 筛选出肥胖的人，并且散点大小和颜色区分 // console.log(arg) var height = arg[0] / 100;//身高(m) var weight = arg[1] / 2;//体重(kg) var bmi = weight / (height * height); if(bmi > 28){ return 20; //大于28，散点大小20 }else{ return 5; //小于28，大小5 } }, itemStyle:{ //散点样式 // color : 'green',//全部样式颜色 color : function(arg){ //回调函数控制颜色 var height = arg.data[0] / 100;//身高(m) var weight = arg.data[1] / 2;//体重(kg) var bmi = weight / (height * height); if(bmi > 28){ return 'red'; //大于28，红色 }else{ return 'green'; //小于28，绿色 } } }, } ] ``` 效果图： :-:  ## 案列2：涟漪动画效果 ``` //配置项： series : [ { // type : 'scatter',//常规散点类型 type : 'effectScatter',//涟漪动画类型 showEffectOn : 'emphasis',//默认：render，emphasis：鼠标滑过有动画 rippleEffect:{ scale : 10, //控制涟漪动画缩放 }, data : axisData, // symbolSize : 20,//控制散点大小，固定值 symbolSize : function(arg){//控制散点大小，也支持回调函数，可以单独控制某些散点的大小 // 筛选出肥胖的人，并且散点大小和颜色区分 // console.log(arg) var height = arg[0] / 100;//身高(m) var weight = arg[1] / 2;//体重(kg) var bmi = weight / (height * height); if(bmi > 28){ return 20; //大于28，散点大小20 }else{ return 5; //小于28，大小5 } }, itemStyle:{ //散点样式 // color : 'green',//全部样式颜色 color : function(arg){ //回调函数控制颜色 var height = arg.data[0] / 100;//身高(m) var weight = arg.data[1] / 2;//体重(kg) var bmi = weight / (height * height); if(bmi > 28){ return 'red'; //大于28，红色 }else{ return 'green'; //小于28，绿色 } } }, } ] ``` 默认效果： :-:  鼠标移入显示动画： :-: