散点图

本文转载自查看原文 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语言-散点图进阶