slides/asset/ec-demo/hierarchy-obama.html (283 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">
<link rel="stylesheet" href="../common/simpleRadio.css">
</head>
<body>
<style>
#main {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.controller {
font-size: 14px;
position: fixed;
top: 0;
left: 0;
right: 0;
background: #222;
color: #ddd;
line-height: 20px;
z-index: 100;
text-align: center;
height: 32px;
line-height: 32px;
}
.controller #measures {
display: inline-block;
}
.controller .query {
display: inline-block;
margin-left: 30px;
}
.controller .query #query-input {
width: 130px;
margin-right: 10px;
background: #222;
border: 1px solid #999;
padding: 0 5px;
border-radius: 3px;
color: #fff;
}
.controller .query .query-btn {
display: inline-block;
background: #555;
height: 20px;
line-height: 20px;
padding: 0 5px;
border-radius: 3px;
cursor: pointer;
}
.tooltip-title {
color: yellow;
font-size: 16px;
margin-bottom: 5px;
}
</style>
<div class="controller">
<div id="measures">
</div>
<div class="query">
<input id="query-input" type="text" placeholder="请输入节点名" onkeypress="if (event.keyCode === 13) { query(); return false; }"/>
<div class="query-btn" onclick="query();" >检索节点</div>
</div>
</div>
<div id="main"></div>
<script type="text/javascript" src="../dat.gui.min.js"></script>
<script>
var chart;
var formatUtil;
var data;
var SERIES_NAME = 'Obama’s 2012 Budget Proposal: How $3.7 Trillion is Spent';
require([
'data/obama_budget_proposal_2012.json',
'common/simpleRadio',
'echarts'
], init);
function areaMeasureChange(mode) {
chart.setOption({
tooltip: {
formatter: getTooltipFormatter(mode)
},
series: [{
visualDimension: mode === 2 ? 2 : null,
data: buildData(mode, data.obama_budget_2012),
levels: getLevelOption(mode)
}]
});
}
function query() {
var nodeName = document.getElementById('query-input').value;
// 先找精确匹配的
var nodeIdList = findNodeId(nodeName, data.obama_budget_2012);
// 再找模糊匹配的
if (!nodeIdList.length) {
nodeIdList = findNodeId(nodeName, data.obama_budget_2012, true);
}
if (nodeIdList.length) {
// FIXME
// 接口？
chart.dispatchAction({
type: 'treemapZoomToNode',
seriesName: SERIES_NAME,
// 这个示例中简单处理，只聚焦到找到的第一个节点上。
targetNodeId: nodeIdList[0]
});
}
else {
alert('没有找到节点 (No result)');
}
}
function findNodeId(nodeName, originList, fuzzy) {
var out = [];
nodeName = nodeName.toLowerCase();
for (var i = 0, len = originList.length; i < len; i++) {
var node = originList[i];
if (node.name
&& (
fuzzy
? node.name.toLowerCase().indexOf(nodeName) === 0
: node.name.toLowerCase() === nodeName
)
) {
out.push(node.id);
}
if (node.children) {
out.push.apply(out, findNodeId(nodeName, node.children, fuzzy));
}
}
return out;
}
function buildData(mode, originList) {
var out = [];
for (var i = 0; i < originList.length; i++) {
var node = originList[i];
var newNode = out[i] = cloneNodeInfo(node);
var value = newNode.value;
if (!newNode) {
continue;
}
// Calculate amount per household.
value[3] = value[0] / data.household_america_2012;
// if mode === 0 and mode === 2 do nothing
if (mode === 1) {
// Set 'Change from 2010' to value[0].
var tmp = value[1];
value[1] = value[0];
value[0] = tmp;
}
if (node.children) {
newNode.children = buildData(mode, node.children);
}
}
return out;
}
function cloneNodeInfo(node) {
if (!node) {
return;
}
var newNode = {};
newNode.name = node.name;
newNode.id = node.id;
newNode.discretion = node.discretion;
newNode.value = (node.value || []).slice();
return newNode;
}
function getLevelOption(mode) {
return [
{
color: mode === 2
? [
'#5793f3', '#d14a61', '#fd9c35',
'#675bba', '#fec42c', '#dd4444',
'#d4df5a', '#cd4870'
]
: null,
colorMappingBy: 'id',
itemStyle: {
normal: {
borderWidth: 3,
gapWidth: 3
}
}
},
{
colorAlpha: mode === 2
? [0.5, 1] : null,
colorA: mode === 2
? [0.5, 1] : null,
itemStyle: {
normal: {
gapWidth: 1
}
}
}
];
}
function isValidNumber(num) {
return num != null && isFinite(num);
}
function getTooltipFormatter(mode) {
var amountIndex = mode === 1 ? 1 : 0;
var amountIndex2011 = mode === 1 ? 0 : 1;
return function (info) {
var value = info.value;
var amount = value[amountIndex];
amount = isValidNumber(amount)
? formatUtil.addCommas(amount * 1000) + '$'
: '-';
var amount2011 = value[amountIndex2011];
amount2011 = isValidNumber(amount2011)
? formatUtil.addCommas(amount2011 * 1000) + '$'
: '-';
var perHousehold = value[3];
perHousehold = isValidNumber(perHousehold)
? formatUtil.addCommas((+perHousehold.toFixed(4)) * 1000) + '$'
: '-';
var change = value[2];
change = isValidNumber(change)
? change.toFixed(2) + '%'
: '-';
return [
'<div class="tooltip-title">' + formatUtil.encodeHTML(info.name) + '</div>',
'2012 Amount: ' + amount + '<br>',
'Per Household: ' + perHousehold + '<br>',
'2011 Amount: ' + amount2011 + '<br>',
'Change From 2011: ' + change
].join('');
}
}
function init(d, simpleRadio, echarts) {
simpleRadio.init(
document.getElementById('measures'),
[
{value: 0, text: '2012年预算额', selected: true},
{value: 1, text: '2011年预算额'},
{value: 2, text: '2012年预算额 + 增长率'}
],
areaMeasureChange
);
formatUtil = echarts.format;
data = d;
chart = echarts.init(document.getElementById('main'), null, {
renderer: 'canvas'
});
chart.setOption({
tooltip: {
position: 'top',
formatter: getTooltipFormatter(0)
},
series: [
{
name: SERIES_NAME,
type: 'treemap',
label: {
show: true,
formatter: '{b}',
normal: {
textStyle: {
// 现在不能随着动画动，效果不好，所以暂时关掉。
ellipsis: true
}
}
},
itemStyle: {
normal: {
borderColor: 'black'
}
},
levels: getLevelOption(0),
data: buildData('2012 Amount', data.obama_budget_2012)
}
]
});
}
</script>
</body>
</html>