slides/ani/asset/ec-demo/transform-timeline.html (267 lines of code) (raw):
<html>
<head>
<meta charset="utf-8">
<script src="../common/echarts.min.js"></script>
<script src="../data/life-timeline.js"></script>
<link rel="stylesheet" href="../common/reset.css">
</head>
<body>
<div id="main"></div>
<script>
var animation = location.href.split('?');
if (animation[1]) {
var match = animation[1].match(/animation=([a-zA-Z0-9_]+)/);
animation = match[1] !== 'false' && match[1] !== '0' && !!match[1];
}
else {
animation = true;
}
var rawData = window.rawData;
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 * 40;
};
// 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: {
animation: animation,
timeline: {
axisType: 'category',
orient: 'vertical',
autoPlay: true,
inverse: true,
playInterval: 1000,
left: null,
right: 10,
top: 30,
bottom: 20,
width: 55,
height: null,
label: {
normal: {
textStyle: {
color: '#ddd'
}
},
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: '#333',
title: {
'text': rawData.timeline[0],
textAlign: 'center',
right: 50,
bottom: 60,
textStyle: {
fontSize: 60,
color: 'rgba(255, 255, 255, 0.9)'
}
},
tooltip: {
padding: 5,
backgroundColor: '#222',
borderColor: '#777',
borderWidth: 1
},
xAxis: {
type: 'log',
name: '人均收入',
max: 100000,
min: 300,
nameGap: 25,
nameLocation: 'middle',
nameTextStyle: {
fontSize: 16
},
splitLine: {
show: false
},
axisTick: {
lineStyle: {
color: '#ddd'
}
},
axisLine: {
lineStyle: {
color: '#ddd'
}
},
axisLabel: {
formatter: '{value} $',
textStyle: {
color: '#ddd'
}
}
},
yAxis: {
type: 'value',
name: '平均寿命',
nameGap: 25,
nameLocation: 'start',
max: 100,
nameTextStyle: {
color: '#ccc',
fontSize: 16
},
axisLine: {
lineStyle: {
color: '#ddd'
}
},
axisTick: {
lineStyle: {
color: '#ddd'
}
},
splitLine: {
show: false
},
axisLabel: {
formatter: '{value} 岁',
textStyle: {
color: '#ddd'
}
}
},
grid: {
top: 30,
left: 60,
right: 110
},
visualMap: [
{
show: false,
type: 'piecewise',
dimension: 3,
categories: rawData.countries.map(function (item) {
return item[2];
}),
left: 10,
bottom: 35,
calculable: true,
precision: 0.1,
textGap: 10,
itemGap: 12,
textStyle: {
color: '#ccc'
},
inRange: {
color: ['#bcd3bb', '#e88f70', '#edc1a5', '#9dc5c8', '#e1e8c8', '#7b7c68', '#e5b5b5', '#f0b489', '#928ea8', '#bda29a', '#376956', '#c3bed4', '#495a80', '#9966cc', '#bdb76a', '#eee8ab', '#a35015', '#04dd98', '#d9b3e6']
},
outOfRange: {
color: '#555'
}
}
],
series: [
{
type: 'scatter',
id: 'gridScatter',
itemStyle: itemStyle,
data: rawData.series[0],
symbolSize: function(val) {
return sizeFunction(val[2]);
},
tooltip: {
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>';
}
}
},
{
type: 'scatter',
id: 'geoScatter',
coordinateSystem: 'geo',
itemStyle: {
normal: {
opacity: 1,
shadowBlur: 5,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
},
data: rawData.countries.map(function (item) {
return [item[0], item[1], 0, item[2]];
}),
symbolSize: 15,
tooltip: {
formatter: function (obj) {
var value = obj.value;
return schema[3].text + '：' + value[3];
}
}
}
],
animationDurationUpdate: 1000,
animationEasingUpdate: 'quinticInOut'
},
options: []
};
for (var n = 0; n < rawData.timeline.length; n++) {
option.baseOption.timeline.data.push(rawData.timeline[n]);
option.options.push({
title: {
show: true,
'text': rawData.timeline[n] + ''
},
series: {
id: 'gridScatter',
name: rawData.timeline[n],
type: 'scatter',
itemStyle: itemStyle,
data: rawData.series[n],
symbolSize: function(val) {
return sizeFunction(val[2]);
}
}
});
}
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
</script>
</body>
</html>