散點圖

本文轉載自查看原文 2021-11-05 21:45 221 Echarts可視化圖標的使用

散點圖

散點圖可以幫助我們推斷出變量之間的相關性

散點圖的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
                }
            ]
        }

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 散點圖 Python 散點圖 matplotlib之散點圖 matplotlib之散點圖 GraphPad如何繪制散點圖，然后在散點圖上加上趨勢線 python畫圖（1）: 散點圖 Python的散點圖繪制 scatter python畫3維散點圖 python中畫散點圖 R語言-散點圖進階