散點圖
散點圖可以幫助我們推斷出變量之間的相關性
散點圖的type是scatter
1> ECharts 最基本的代碼結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<div id="box" style="width: 600px; height: 400px;"></div>
<script>
var box=echarts.init(document.getElementById("box"))
var option={}
box.setOption(option)
</script>
</body>
</html>
2>准備 x 軸和 y 軸的數據（此時模擬的數據較少）
var data = [ { "gender": "female", "height": 161.2, "weight": 50 }, {"gender": "female", "height": 167.5, "weight": 59 }, { "gender": "female","height": 159.5, "weight": 49 }, { "gender": "female", "height": 157,"weight": 63 }, { "gender": "female", "height": 155.8, "weight": 55 }, {"gender": "female", "height": 170, "weight": 59 }, { "gender": "female", "height": 160.2, "weight": 5 }, {"gender": "female", "height": 168.5, "weight": 54 }, { "gender": "female","height": 169.5, "weight": 59 }, { "gender": "female", "height": 157,"weight": 64 }, { "gender": "female", "height": 159.8, "weight": 65 }, {"gender": "female", "height": 162, "weight": 58 } ] var axisData = [] for (var i = 0; i < data.length; i++) { var height = data[i].height; var weight = data[i].weight; var itemArr = [height, weight]; axisData.push(itemArr); }
axisData 就是一個二維數組，數組中的每一個元素還是一個數組，最內層數組中有兩個元素，一個代表身高，一個代表體重
3> 准備配置項
xAxis 和 yAxis 的 type 都要設置為 value
在 series 下設置 type:scatter
var option={ xAxis:{ type:'value' }, yAxis:{ type:'value' }, series:[ { type:'scatter', data:axisData } ] }
4>調整配置項, 脫離0值比例
var option={ xAxis:{ type:'value', scale:true }, yAxis:{ type:'value', scale:true }, series:[ { type:'scatter', data:axisData } ] }
