Echarts使用之-散點圖(各國人均壽命與GDP關係演變)

根據功能實現效果以下:

咱們如今有個功能是根據學生的玩耍時長,每一個月,學生分數,以及玩耍器材的時長數展現.在echarts中.他們的散點圖的各國人均壽命與GDP關係演變也是有4個屬性來控制,咱們決定使用這個來展現.官方實例地址 在官方實例中,最開始就去請求了一個地址.來獲取數據

$.get('data/asset/data/life-expectancy.json', function (data) {}

F12查看請求的數據格式.格式以下

在一個對象中,有三個屬性,第一個和第三個分別了封裝了19國家以及81個年份.都是以數組形式

在第二個參數中,封裝的就挺複雜的.首先外面是一個大的數組.有81個元素.這個應該是根據年份的數量來決定的.

其中每一個元素裏面有19個小元素,這個應該是19個國家的數量來決定的. 剩下最裏面的就是單個年份,單個國家裏面應該包含的數據.
下面就我已經測出來控制的屬性,作下注釋

var itemStyle = {
        normal: {
            opacity: 0.8, //控制圓球的透明度
            shadowBlur: 10, //
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    };  
var sizeFunction = function (x) {
        var y = Math.sqrt(x / 5e8) + 0.1;
        return y * 80;
    };  控制圓球的大小,返回的數值根據y軸的大小範圍進行變化.根據自身元素動態調整該函數

// Schema:  //設置一個圓須要展示的數據,若是有更好的方式能夠替換
    var schema = [
        {name: 'Income', index: 0, text: '人均收入', unit: '美圓'},
        {name: 'LifeExpectancy', index: 1, text: '人均壽命', unit: '歲'},
        {name: 'Population', index: 2, text: '總人口', unit: ''},
        {name: 'Country', index: 3, text: '國家', unit: ''}
    ];  
option = {   //設置散點圖樣式的所有屬性設置
        baseOption: {
            timeline: {  // 右側時間線
                axisType: 'category',
                orient: 'vertical',
                autoPlay: true,//是否自動播放
                inverse: true,
                playInterval: 1000,  //更換時間線間隔時間
                left: null,
                right: 0,
                top: 20,
                bottom: 20,
                width: 55,
                height: null,
                label: {
                    normal: {
                        textStyle: {
                            color: '#999'
                        }
                    },
                    emphasis: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                symbol: 'none',
                lineStyle: {
                    color: '#555'
                },
                checkpointStyle: {
                    color: '#bbb',
                    borderColor: '#777',
                    borderWidth: 2
                },
                controlStyle: {
                    showNextBtn: false,
                    showPrevBtn: false,
                    normal: {
                        color: '#666',
                        borderColor: '#666'
                    },
                    emphasis: {
                        color: '#aaa',
                        borderColor: '#aaa'
                    }
                },
                data: []
            },
            backgroundColor: '#404a59', //設置整個散點圖背景圖顏色
            title: [{   //表中年份大字的展現設置
                text: data.timeline[0], //預先設置的一個值,和後臺返回的對象名要一值
                textAlign: 'center',
                left: '63%',
                top: '55%',
                textStyle: {
                    fontSize: 100,
                    color: 'rgba(255, 255, 255, 0.7)'
                }
            }, {
                text: '各國人均壽命與GDP關係演變',
                left: 'center',
                top: 10,
                textStyle: {
                    color: '#aaa',
                    fontWeight: 'normal',
                    fontSize: 20
                }
            }],
            tooltip: {  //設置懸浮框中文件展現效果,其中使用了Schema中的元素.
                padding: 5,
                backgroundColor: '#222',
                borderColor: '#777',
                borderWidth: 1,
                formatter: function (obj) {
                    var value = obj.value;
                    return schema[3].text + '：' + value[3] + '<br>'
                            + schema[1].text + '：' + value[1] + schema[1].unit + '<br>'
                            + schema[0].text + '：' + value[0] + schema[0].unit + '<br>'
                            + schema[2].text + '：' + value[2] + '<br>';
                }
            },
            grid: {
                top: 100,
                containLabel: true,
                left: 30,
                right: '110'
            },
            xAxis: {  //設置X軸屬性
                type: 'log', //如今設置的是正態分佈.若是要間隔展現須要設置成value
                name: '人均收入',
                max: 100000, //最大值
                min: 300, //最小值
                nameGap: 25,
                nameLocation: 'middle',
                nameTextStyle: {
                    fontSize: 18
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                axisLabel: {
                    formatter: '{value} $'
                }
            },
            yAxis: { //設置y軸展現圖
                type: 'value', 
                name: '平均壽命',
                max: 100,
                nameTextStyle: {
                    color: '#ccc',
                    fontSize: 18
                },
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    formatter: '{value} 歲'
                }
            },
            visualMap: [ //設置展現圓球的個數,顏色等
                {
                    show: false,
                    dimension: 3,
                    categories: data.counties,
                    calculable: true,
                    precision: 0.1,
                    textGap: 30,
                    textStyle: {
                        color: '#ccc'
                    },
                    inRange: {
                        color: (function () {
                            var colors = ['#bcd3bb', '#e88f70', '#edc1a5', '#9dc5c8', '#e1e8c8', '#7b7c68', '#e5b5b5', '#f0b489', '#928ea8', '#bda29a'];
                            return colors.concat(colors);
                        })()
                    }
                }
            ],
            series: [ //開始設置每一個球的內容.
                {
                    type: 'scatter',
                    itemStyle: itemStyle,
                    data: data.series[0], //這時吧最外層的數組傳進一個初始值.此時傳進的是二維數組.在其內部應該會將二維數組,拆分一位數組
//傳入下面的方法,此時傳入的就是單個國家,單年的數組.國家名字,人口,GDP等,這時把須要當作大小數傳入方法中.在這裏,數組的第三個元素是人均收入
                    symbolSize: function(val) {
                        return sizeFunction(val[2]);
                    }
                }
            ],
            animationDurationUpdate: 1000,
            animationEasingUpdate: 'quinticInOut'
        },
        options: []
    };
	//下面開始循環時間線,把後臺返回的數值都設置在散點圖裏面
	for (var n = 0; n < data.timeline.length; n++) {
        option.baseOption.timeline.data.push(data.timeline[n]);//年份
        option.options.push({
            title: {
                show: true,
                'text': data.timeline[n] + ''
            },
            series: { //把第二個元素.三維數組設置.
                name: data.timeline[n],
                type: 'scatter',
                itemStyle: itemStyle,
                data: data.series[n],
                symbolSize: function(val) {
                    return sizeFunction(val[2]);
                }
            }
        });
    }

    myChart.setOption(option);