Java教程

散点图

本文主要是介绍散点图，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

散点图

散点图可以帮助我们推断出变量之间的相关性

散点图的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
                }
            ]
        }

 

这篇关于散点图的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航