slides/arch-brief/asset/ec-demo/visualmap-sample2.html (256 lines of code) (raw):
<html>
<head>
<meta charset="utf-8">
<script src="../common/echarts.min.js"></script>
<script src="../common/jquery.min.js"></script>
<link rel="stylesheet" href="../common/reset.css">
<script src="../data/obama_budget_proposal_2012.tree.js"></script>
</head>
<body>
<style>
#main {
margin-top: 90px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.controller {
font-size: 14px;
position: fixed;
top: 0;
left: 0;
right: 0;
background: #eee;
border-bottom: 1px solid #ccc;
line-height: 20px;
z-index: 100;
}
.controller label {
margin-right: 10px;
}
.item-title {
font-weight: bold;
}
.controller .mode-title {
float: left;
width: 60px;
vertical-align: middle;
padding-left: 10px;
}
.controller .mode-body {
float: left;
width: 500px;
}
.controller .query {
margin-left: 600px;
padding-top: 10px;
}
.controller .query #query-input {
width: 250px;
}
.tooltip-title {
color: yellow;
font-size: 16px;
margin-bottom: 5px;
}
</style>
<div class="controller">
<div class="mode-title">示例模式<br>(Mode)</div>
<div class="mode-body">
<input type="radio" id="area-meaning-0" name="area-meaning" onclick="areaMeasureChange(0);" checked="checked"/>
<label for="area-meaning-0">面积代表“2012年预算额”</label><br>
<input type="radio" id="area-meaning-2" name="area-meaning" onclick="areaMeasureChange(2);"/>
<label for="area-meaning-2">面积代表“2012年预算额”，明暗代表“2011年相比的增长率”<br> </label><br>
</div>
<div class="query">
<input id="query-input" type="text" placeholder="请输入节点名 (Please node name)" onkeypress="if (event.keyCode === 13) { query(); return false; }"/>
<input type="button" class="query-btn" value="检索节点(query)" onclick="query();" />
</div>
</div>
<div id="main"></div>
<script>
var chart;
var formatUtil;
var SERIES_NAME = 'Obama’s 2012 Budget Proposal: How $3.7 Trillion is Spent';
init();
function areaMeasureChange(mode) {
chart.setOption({
tooltip: {
formatter: getTooltipFormatter(mode)
},
series: [{
visualDimension: mode === 2 ? 2 : null,
data: buildData(mode, window.obama_budget_2012),
levels: getLevelOption(mode)
}]
});
}
function query() {
var nodeName = document.getElementById('query-input').value;
// 先找精确匹配的
var nodeIdList = findNodeId(nodeName, window.obama_budget_2012);
// 再找模糊匹配的
if (!nodeIdList.length) {
nodeIdList = findNodeId(nodeName, window.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] / window.household_america_2012;
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 [
{
colorMappingBy: 'id',
itemStyle: {
normal: {
borderWidth: 3,
gapWidth: 3
}
}
},
{
colorAlpha: mode === 2
? [0.2, 1] : null,
itemStyle: {
normal: {
gapWidth: 1
}
}
}
];
}
function isValidNumber(num) {
return num != null && isFinite(num);
}
function getTooltipFormatter(mode) {
var amountIndex = 0;
var amountIndex2011 = 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() {
formatUtil = echarts.format;
chart = echarts.init(document.getElementById('main'), null, {
renderer: 'canvas'
});
chart.setOption({
backgroundColor: '#eee',
legend: {
data: [SERIES_NAME]
},
tooltip: {
formatter: getTooltipFormatter(0)
},
series: [
{
name: SERIES_NAME,
type: 'treemap',
top: 30,
bottom: 60,
label: {
show: true,
formatter: "{b}",
normal: {
textStyle: {
ellipsis: true
}
}
},
itemStyle: {
normal: {
borderColor: 'black'
}
},
levels: getLevelOption(0),
data: buildData('2012 Amount', window.obama_budget_2012)
}
]
});
}
</script>
</body>
</html>