slides/asset/ec-demo/wealth-health-timeline.html (210 lines of code) (raw):
<html>
<head>
<meta charset="utf-8">
<script src="../common/esl.js"></script>
<script src="../common/config.js"></script>
<link rel="stylesheet" href="../common/reset.css">
</head>
<body>
<style>
.btn-group {
position: absolute;
z-index: 1;
right: 0;
top: 0;
}
.btn {
background-color: transparent;
border-color: transparent;
cursor: pointer;
color: #cccccc;
outline-width: 0;
}
</style>
<div id="main"></div>
<script>
// 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: ''}
];
define('chartInstance', function (require) {
var data = require('data/wealth-health-timeline.json');
var echarts = require('echarts');
require('common/dark');
var chart = echarts.init(document.getElementById('main'), 'dark');
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: ''}
];
var 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,
symbol: 'none',
checkpointStyle: {
borderWidth: 2
},
controlStyle: {
showNextBtn: false,
showPrevBtn: false
},
data: []
},
title: [{
'text': data.timeline[0],
textAlign: 'center',
left: '63%',
top: '55%',
textStyle: {
fontSize: 100
}
}, {
left: 'center',
text: 'Wealth & Health of Nations'
}],
tooltip: {
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: {
left: '12%',
right: '110'
},
xAxis: {
type: 'log',
name: '人均收入',
max: 100000,
min: 300,
nameGap: 25,
nameLocation: 'middle',
nameTextStyle: {
fontSize: 18
},
splitLine: {
show: false
},
axisTick: {
lineStyle: {
color: '#ccc'
}
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
formatter: '{value} $'
}
},
yAxis: {
type: 'value',
name: '平均寿命',
max: 100,
nameTextStyle: {
fontSize: 18
},
splitLine: {
show: false
},
axisLabel: {
formatter: '{value} 岁'
}
},
visualMap: [
{
show: false,
dimension: 3,
categories: data.counties,
calculable: true,
precision: 0.1,
textGap: 30,
inRange: {
color: ['#5793f3', '#d14a61', '#fd9c35', '#675bba', '#fec42c', '#dd4444', '#d4df5a', '#cd4870', '#5793f3', '#d14a61', '#fd9c35', '#675bba', '#fec42c', '#dd4444', '#d4df5a', '#cd4870', '#5793f3', '#d14a61', '#fd9c35', '#675bba', '#fec42c', '#dd4444', '#d4df5a', '#cd4870']
}
}
],
series: [
{
type: 'scatter',
itemStyle: itemStyle,
data: data.series[0],
symbolSize: function(val) {
return sizeFunction(val[2]);
},
zlevel: 1
}
],
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]);
}
}
});
}
return {
init: function() {
chart.setOption(option);
}
};
});
require(['chartInstance', 'data/wealth-health-timeline.json'], function (chartInstance, data) {
chartInstance.init();
});
</script>
</body>
</html>