slides/arch-brief/asset/ec-demo/orthogonal2-cartesian-graph.html (151 lines of code) (raw):
<html>
<head>
<meta charset="utf-8">
<script src="../common/echarts.min.js"></script>
<link rel="stylesheet" href="../common/reset.css">
</head>
<body>
<style>
</style>
<div id="main"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var rawData = [
[808, 81, 1980],
[832, 95, 1981],
[876, 92, 1982],
[890, 95, 1983],
[932, 134, 1984],
[946, 103, 1985],
[987, 234, 1986],
[1098, 254, 1987],
[1345, 267, 1988],
[1657, 287, 1989],
[2001, 308, 1990],
[2546, 364, 1991],
[3807, 387, 1992],
[3890, 413, 1993],
[5020, 532, 1994],
[6123, 587, 1995],
[6457, 598, 1996],
[6578, 595, 1997],
[7091, 605, 1998],
[7149, 690, 1999],
[8123, 813, 2000],
[10020, 843, 2001],
[10054, 1008, 2002],
[12123, 1156, 2003],
[14231, 1324, 2004],
[16543, 1357, 2005],
[18790, 1489, 2006],
[13897, 1567, 2007],
[9321, 1387, 2008],
[7321, 1254, 2009],
[7092, 1146, 2010]
];
var data = rawData.map(function (item) {
var year = item[2];
return {
value: item,
label: {
normal: {
show: year % 4 === 0,
position: 'top'
},
emphasis: {
show: true
}
},
name: year
};
});
var links = rawData.map(function (item, idx) {
return {
source: idx,
target: idx + 1
};
});
links.pop();
option = {
grid: {
left: 10,
bottom: 20,
containLabel: true,
top: 80
},
xAxis: {
type: 'value',
nameLocation: 'middle',
axisLabel: {
textStyle: {
color: '#aaa'
}
},
axisLine: {
lineStyle: {
color: '#aaa'
}
},
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
scale: true,
nameLocation: 'middle',
nameGap: 20,
axisLabel: {
textStyle: {
color: '#aaa'
}
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#999'
}
},
axisLine: {
lineStyle: {
color: '#aaa'
}
}
},
series: [{
type: 'graph',
coordinateSystem: 'cartesian2d',
data: data,
links: links,
edgeSymbol: ['none', 'arrow'],
edgeSymbolSize: 5,
legendHoverLink: false,
lineStyle: {
normal: {
color: '#bbb'
}
},
itemStyle: {
normal: {
borderWidth: 1,
borderColor: '#bbb'
}
},
label: {
normal: {
textStyle: {
color: '#bbb'
},
position: 'right'
}
},
symbolSize: 10,
animationDelay: function (idx) {
return idx * 100
}
}]
};
myChart.setOption(option);
</script>
</body>
</html>