散点图的常见效果

散点图的常见效果：

　　气泡图效果：

　　　　散点的大小不同（symbolSize）

　　　　散点的颜色不同（itemStyle中的color）

　　涟漪动画效果：

　　　　type: "effectScatter", // 具有涟漪动画的散点图

               showEffectOn: 'emphasis', // render每个散点渲染完成都有涟漪动画的效果；emphasis当散点被鼠标移出才展示涟漪动画

                // 控制涟漪动画的范围

                rippleEffect: {

                    scale: 10

                },

散点图在项目中可能会结合地图进行相关地区的标注

<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
        }....]
        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', // 散点图
                type: "effectScatter", // 具有涟漪动画的散点图
                showEffectOn: 'emphasis', // render每个散点渲染完成都有涟漪动画的效果；emphasis当散点被鼠标移出才展示涟漪动画
                // 控制涟漪动画的范围
                rippleEffect: {
                    scale: 10
                },
                data: axisData,
                // 控制散点大小和颜色
                // symbolSize:20,
                // 让不同散点大小不一样
                // arg包含了当前散点所具备的数据
                symbolSize: function (arg) {
                    var height = arg[0] / 100
                    var weight = arg[1]
                    // bmi = 体重kg/（身高m*身高）> 28 散点大一些，<28散点小一些
                    var bmi = weight / (height * height)
                    if (bmi > 28) {
                        return 20
                    }
                    return 5
                },
                //控制散点颜色
                itemStyle: {
                    // color: 'green'
                    // 让不同散点颜色不一样
                    color: function (arg) {
                        var height = arg.data[0] / 100
                        var weight = arg.data[1]
                        // bmi = 体重kg/（身高m*身高）> 28 散点大一些，<28散点小一些
                        var bmi = weight / (height * height)
                        if (bmi > 28) {
                            return "red"
                        }
                        return "pink"
                    }
                }

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