76Echarts - 散点图（Life Expectancy and GDP）

效果图

源代码

	
		
		ECharts
		
		
	

	
		
		

		
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var option;

			myChart.showLoading();

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

				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;
				};
				// 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: {
							padding: 5,
							backgroundColor: '#222',
							borderColor: '#777',
							borderWidth: 1,
							formatter: function(obj) {
								var value = obj.value;
								return schema[3].text + '：' + value[3] + '' +
									schema[1].text + '：' + value[1] + schema[1].unit + '' +
									schema[0].text + '：' + value[0] + schema[0].unit + '' +
									schema[2].text + '：' + value[2] + '';
							}
						},
						grid: {
							top: 100,
							containLabel: true,
							left: 30,
							right: '110'
						},
						xAxis: {
							type: 'log',
							name: '人均收入',
							max: 100000,
							min: 300,
							nameGap: 25,
							nameLocation: 'middle',
							nameTextStyle: {
								fontSize: 18
							},
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#ccc'
								}
							},
							axisLabel: {
								formatter: '{value} $'
							}
						},
						yAxis: {
							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],
							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);

			});

			myChart.setOption(option);