散点图的基本实现scatter

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

实现步骤：

　　（1）Echarts最基本的代码结构：

　　　　引入js文件，DOM容器，初始化对象，设置option

　　（2）x轴数据和y轴的数据：二维数组

　　　　数组1：[[身高1,体重1],[身高2,体重2],[身高3,体重3]...]

　　（3）图表类型：

　　　　在series下设置type:scatter

　　　　xAxis和yAxis的type都要设置为value

　　（5）调整：

　　　　将坐标轴都设置为脱离0值比例，scale

 <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
        // 将data这个数组中的身高体重取出来，变成一个二维数组
        var data = [{
            'gender': "fenale",
            "height": 162.3,
            "weight": 51.9
        }, {
            'gender': "fenale",
            "height": 156.9,
            "weight": 55.9
        }, {
            'gender': "fenale",
            "height": 167.9,
            "weight": 65
        }, {
            'gender': "fenale",
            "height": 162.3,
            "weight": 51.9
        }, {
            'gender': "fenale",
            "height": 182.5,
            "weight": 61.9
        }, {
            'gender': "fenale",
            "height": 187,
            "weight": 75
        }, {
            'gender': "fenale",
            "height": 178.5,
            "weight": 63
        }, {
            'gender': "fenale",
            "height": 184,
            "weight": 59
        }, {
            'gender': "fenale",
            "height": 176,
            "weight": 52
        }, {
            'gender': "fenale",
            "height": 164,
            "weight": 50
        }, ]
        var axisData = []
        for (var i = 0; i < data.length; i++) {
            var height = data[i].height
            var weight = data[i].weight
            var newArr = [height, weight]
            axisData.push(newArr)
        }
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            xAxis: {
                type: 'value',
                scale: true // 摆脱0值比例
            },
            yAxis: {
                type: 'value',
                scale: true // 摆脱0值比例
            },

            series: [{
                type: 'scatter', // 散点图
                data: axisData // 数据就是刚才的那个二维数组

            }]
        };
        // 步骤5：将配置项设置给echarts实例对象
        myChart.setOption(option);