根据功能实现效果如下:

我们现在有个功能是根据学生的玩耍时长,每个月,学生分数,以及玩耍器材的时长数展示.在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', //现在设置的是正态分布.如果要间隔展示需要设置成valuename: '人均收入',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);