# :-: 散點圖（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，綠色 } } }, } ] ``` 默認效果： :-:  鼠標移入顯示動畫： :-: