散點圖的常見效果

散點圖的常見效果：

　　氣泡圖效果：

　　　　散點的大小不同（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);