| |
| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| --> |
| |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="lib/esl.js"></script> |
| <script src="lib/config.js"></script> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <!-- <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet"> --> |
| <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300&family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet"> |
| </head> |
| <body> |
| <style> |
| html, body { |
| width: 100%; |
| height: 100%; |
| } |
| html, body, #main { |
| margin: 0; |
| padding: 0; |
| } |
| #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: 700px; |
| } |
| .controller .query { |
| margin-left: 800px; |
| 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年预算额” (Area represents '2012 Amount)</label><br> |
| <input type="radio" id="area-meaning-2" name="area-meaning" onclick="areaMeasureChange(2);"/> |
| <label for="area-meaning-2">面积代表“2012年预算额”，明暗代表“2011年相比的增长率”<br> (Area represents '2012 Amount' and color-alpha represents 'Change from 2011')</label><br> |
| <input type="radio" id="area-meaning-1" name="area-meaning" onclick="areaMeasureChange(1);"/> |
| <label for="area-meaning-1">面积代表“2011年预算额” (Area represents '2011 Amount')</label> |
| </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 src="data/obama_budget_proposal_2012.tree.js"></script> |
| |
| <script> |
| |
| var chart; |
| var formatUtil; |
| |
| var SERIES_NAME = 'Obama’s 2012 Budget Proposal: How $3.7 Trillion is Spent'; |
| |
| require([ |
| 'echarts' |
| // 'echarts/util/format', |
| // 'echarts/component/legend', |
| // 'echarts/component/tooltip', |
| // 'echarts/chart/treemap' |
| ], 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 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: { |
| borderWidth: 3, |
| gapWidth: 3, |
| borderRadius: 5, |
| shadowBlur: 20, |
| shadowColor: 'rgba(20, 20, 40, 1)', |
| } |
| }, |
| { |
| colorAlpha: mode === 2 |
| ? [0.3, 0.5] : null, |
| itemStyle: { |
| borderWidth: 2, |
| gapWidth: 1, |
| borderRadius: 5, |
| shadowBlur: 5, |
| shadowColor: 'rgba(20, 20, 40, 0.5)' |
| } |
| }, |
| { |
| upperLabel: { |
| show: false |
| }, |
| itemStyle: { |
| borderWidth: 0, |
| gapWidth: 0, |
| borderRadius: 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(echarts) { |
| |
| formatUtil = echarts.format; |
| |
| chart = echarts.init(document.getElementById('main'), null, { |
| |
| }); |
| |
| chart.setOption({ |
| // backgroundColor: '#000', |
| |
| legend: { |
| data: [SERIES_NAME] |
| }, |
| |
| tooltip: { |
| formatter: getTooltipFormatter(0) |
| }, |
| |
| series: [ |
| { |
| name: SERIES_NAME, |
| type: 'treemap', |
| top: 50, |
| bottom: 80, |
| label: { |
| show: true, |
| formatter: "{b}", |
| fontSize: 10, |
| fontWeight: 100, |
| fontFamily: 'Barlow Condensed', |
| overflow: 'break' |
| }, |
| labelLayout: function (params) { |
| if (params.rect.width < 5 || params.rect.height < 5) { |
| return { |
| fontSize: 0 |
| }; |
| } |
| return { |
| fontSize: Math.min(Math.sqrt(params.rect.width * params.rect.height) / 10, 20) |
| }; |
| }, |
| itemStyle: { |
| borderColor: 'rgba(100, 100, 200, 0.2)', |
| borderWidth: 0 |
| }, |
| upperLabel: { |
| show: true, |
| height: 15, |
| fontSize: 10, |
| fontFamily: 'Barlow Condensed', |
| color: null |
| }, |
| levels: getLevelOption(0), |
| data: buildData('2012 Amount', window.obama_budget_2012) |
| } |
| ] |
| }); |
| } |
| |
| </script> |
| </body> |
| </html> |
