Spaces:
Running
Running
| <!-- | |
| 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"> | |
| <title>ECharts</title> | |
| <script src="../dist/echarts.js"></script> | |
| <script src="./data/map/js/china.js"></script> | |
| <script src="./data/map/js/world.js"></script> | |
| <script src="../../echarts-www/dist/echarts-gl.min.js"></script> | |
| <style> | |
| html, body, #main0 { | |
| width: 100%; | |
| height: 600px; | |
| margin: 0; | |
| } | |
| .snapshot-rendered { | |
| position: absolute; | |
| right: 10px; | |
| top: 10px; | |
| width: 220px; | |
| height: 200px; | |
| background: #fff; | |
| border: 5px solid rgba(0,0,0,0.5); | |
| } | |
| .snapshot-finished { | |
| position: absolute; | |
| right: 10px; | |
| bottom: 10px; | |
| width: 220px; | |
| height: 200px; | |
| background: #fff; | |
| border: 5px solid rgba(0,0,0,0.5); | |
| } | |
| .snapshot-info { | |
| position: absolute; | |
| right: 10px; | |
| width: 220px; | |
| text-align: center; | |
| background: #333; | |
| color: #fff; | |
| padding: 2px 5px; | |
| font-size: 12px; | |
| } | |
| .snapshot-info span { | |
| color: yellow; | |
| } | |
| .block-box { | |
| position: relative; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div>what is the fuck</div> | |
| <div class="block-box"> | |
| <div id="main0"></div> | |
| </div> | |
| <script> | |
| function enableSnapshot(chart, domId) { | |
| var chartDom = document.getElementById(domId); | |
| var snapshotRenderedDom = document.createElement('img'); | |
| snapshotRenderedDom.className = 'snapshot-rendered'; | |
| chartDom.parentNode.appendChild(snapshotRenderedDom); | |
| var snapshotFinishedDom = document.createElement('img'); | |
| snapshotFinishedDom.className = 'snapshot-finished'; | |
| chartDom.parentNode.appendChild(snapshotFinishedDom); | |
| var renderedInfoDom = document.createElement('div'); | |
| renderedInfoDom.className = 'snapshot-info'; | |
| chartDom.parentNode.appendChild(renderedInfoDom); | |
| renderedInfoDom.style.top = snapshotRenderedDom.offsetTop + snapshotRenderedDom.offsetHeight + 'px'; | |
| var finishedInfoDom = document.createElement('div'); | |
| finishedInfoDom.className = 'snapshot-info'; | |
| chartDom.parentNode.appendChild(finishedInfoDom); | |
| finishedInfoDom.style.top = snapshotFinishedDom.offsetTop + snapshotFinishedDom.offsetHeight + 'px'; | |
| // chart.on('rendered', function () { | |
| // var url = chart.getDataURL(); | |
| // snapshotRenderedDom.src = url; | |
| // renderedInfoDom.innerHTML = 'rendered triggered at <span>' + +new Date() + '</span>'; | |
| // }); | |
| chart.on('finished', renderSnapshot); | |
| function renderSnapshot() { | |
| var url = chart.getDataURL(); | |
| snapshotFinishedDom.src = url; | |
| finishedInfoDom.innerHTML = 'finished triggered at <span>' + +new Date() + '</span>'; | |
| } | |
| } | |
| </script> | |
| <script type="text/javascript"> | |
| var myChart = echarts.init(document.getElementById('main0')); | |
| var regionData = [{ | |
| "name": "Afghanistan", | |
| "value": "0.01" | |
| }, { | |
| "name": "Albania", | |
| "value": "2.01" | |
| }, { | |
| "name": "Algeria", | |
| "value": "0.15" | |
| }, { | |
| "name": "Andorra", | |
| "value": "" | |
| }, { | |
| "name": "Angola", | |
| "value": "3.86" | |
| }, { | |
| "name": "Antigua and Barbuda", | |
| "value": "5.73" | |
| }, { | |
| "name": "Argentina", | |
| "value": "8.40" | |
| }, { | |
| "name": "Armenia", | |
| "value": "1.48" | |
| }, { | |
| "name": "Australia", | |
| "value": "9.02" | |
| }, { | |
| "name": "Austria", | |
| "value": "11.08" | |
| }, { | |
| "name": "Azerbaijan", | |
| "value": "4.54" | |
| }, { | |
| "name": "Bahamas", | |
| "value": "" | |
| }, { | |
| "name": "Bahrain", | |
| "value": "6.98" | |
| }, { | |
| "name": "Bangladesh", | |
| "value": "0.00" | |
| }, { | |
| "name": "Barbados", | |
| "value": "" | |
| }, { | |
| "name": "Belarus", | |
| "value": "5.53" | |
| }, { | |
| "name": "Belgium", | |
| "value": "10.63" | |
| }, { | |
| "name": "Belize", | |
| "value": "6.25" | |
| }, { | |
| "name": "Benin", | |
| "value": "1.29" | |
| }, { | |
| "name": "Bhutan", | |
| "value": "0.23" | |
| }, { | |
| "name": "Bolivia", | |
| "value": "3.23" | |
| }, { | |
| "name": "Bosnia and Herzegovina", | |
| "value": "9.05" | |
| }, { | |
| "name": "Botswana", | |
| "value": "4.29" | |
| }, { | |
| "name": "Brazil", | |
| "value": "5.76" | |
| }, { | |
| "name": "Brunei Darussalam", | |
| "value": "0.12" | |
| }, { | |
| "name": "Bulgaria", | |
| "value": "5.86" | |
| }, { | |
| "name": "Burkina Faso", | |
| "value": "5.01" | |
| }, { | |
| "name": "Burundi", | |
| "value": "9.10" | |
| }, { | |
| "name": "Cambodia", | |
| "value": "1.48" | |
| }, { | |
| "name": "Cameroon", | |
| "value": "3.77" | |
| }, { | |
| "name": "Canada", | |
| "value": "7.80" | |
| }, { | |
| "name": "Cape Verde", | |
| "value": "4.78" | |
| }, { | |
| "name": "Central African Republic", | |
| "value": "1.53" | |
| }, { | |
| "name": "Chad", | |
| "value": "0.31" | |
| }, { | |
| "name": "Chile", | |
| "value": "6.60" | |
| }, { | |
| "name": "China", | |
| "value": "5.20" | |
| }, { | |
| "name": "Colombia", | |
| "value": "5.68" | |
| }, { | |
| "name": "Comoros", | |
| "value": "0.31" | |
| }, { | |
| "name": "Congo", | |
| "value": "2.60" | |
| }, { | |
| "name": "Cook Islands", | |
| "value": "3.73" | |
| }, { | |
| "name": "Costa Rica", | |
| "value": "5.65" | |
| }, { | |
| "name": "Cote d'Ivoire", | |
| "value": "1.77" | |
| }, { | |
| "name": "Croatia", | |
| "value": "12.25" | |
| }, { | |
| "name": "Cuba", | |
| "value": "2.26" | |
| }, { | |
| "name": "Cyprus", | |
| "value": "11.52" | |
| }, { | |
| "name": "Czech Republic", | |
| "value": "12.99" | |
| }, { | |
| "name": "Democratic People's Republic of Korea", | |
| "value": "3.26" | |
| }, { | |
| "name": "Democratic Republic of the Congo", | |
| "value": "1.86" | |
| }, { | |
| "name": "Denmark", | |
| "value": "11.71" | |
| }, { | |
| "name": "Djibouti", | |
| "value": "1.79" | |
| }, { | |
| "name": "Dominica", | |
| "value": "7.50" | |
| }, { | |
| "name": "Dominican Republic", | |
| "value": "6.66" | |
| }, { | |
| "name": "Ecuador", | |
| "value": "2.36" | |
| }, { | |
| "name": "Egypt", | |
| "value": "0.21" | |
| }, { | |
| "name": "El Salvador", | |
| "value": "3.72" | |
| }, { | |
| "name": "Equatorial Guinea", | |
| "value": "3.38" | |
| }, { | |
| "name": "Eritrea", | |
| "value": "0.59" | |
| }, { | |
| "name": "Estonia", | |
| "value": "9.00" | |
| }, { | |
| "name": "Ethiopia", | |
| "value": "0.86" | |
| }, { | |
| "name": "Fiji", | |
| "value": "1.72" | |
| }, { | |
| "name": "Finland", | |
| "value": "9.31" | |
| }, { | |
| "name": "France", | |
| "value": "11.43" | |
| }, { | |
| "name": "Gabon", | |
| "value": "8.01" | |
| }, { | |
| "name": "Gambia", | |
| "value": "2.59" | |
| }, { | |
| "name": "Georgia", | |
| "value": "1.47" | |
| }, { | |
| "name": "Germany", | |
| "value": "11.99" | |
| }, { | |
| "name": "Ghana", | |
| "value": "1.57" | |
| }, { | |
| "name": "Greece", | |
| "value": "9.01" | |
| }, { | |
| "name": "Grenada", | |
| "value": "6.67" | |
| }, { | |
| "name": "Guatemala", | |
| "value": "1.46" | |
| }, { | |
| "name": "Guinea", | |
| "value": "0.20" | |
| }, { | |
| "name": "Guinea-Bissau", | |
| "value": "2.19" | |
| }, { | |
| "name": "Guyana", | |
| "value": "3.84" | |
| }, { | |
| "name": "Haiti", | |
| "value": "8.30" | |
| }, { | |
| "name": "Honduras", | |
| "value": "2.92" | |
| }, { | |
| "name": "Hungary", | |
| "value": "13.60" | |
| }, { | |
| "name": "Iceland", | |
| "value": "6.99" | |
| }, { | |
| "name": "India", | |
| "value": "0.29" | |
| }, { | |
| "name": "Indonesia", | |
| "value": "0.09" | |
| }, { | |
| "name": "Iran (Islamic Republic of)", | |
| "value": "0.00" | |
| }, { | |
| "name": "Iraq", | |
| "value": "0.21" | |
| }, { | |
| "name": "Ireland", | |
| "value": "13.69" | |
| }, { | |
| "name": "Israel", | |
| "value": "2.47" | |
| }, { | |
| "name": "Italy", | |
| "value": "8.02" | |
| }, { | |
| "name": "Jamaica", | |
| "value": "1.74" | |
| }, { | |
| "name": "Japan", | |
| "value": "7.59" | |
| }, { | |
| "name": "Jordan", | |
| "value": "0.31" | |
| }, { | |
| "name": "Kazakhstan", | |
| "value": "2.96" | |
| }, { | |
| "name": "Kenya", | |
| "value": "1.51" | |
| }, { | |
| "name": "Kiribati", | |
| "value": "0.45" | |
| }, { | |
| "name": "Kuwait", | |
| "value": "0.03" | |
| }, { | |
| "name": "Kyrgyzstan", | |
| "value": "3.63" | |
| }, { | |
| "name": "Lao People's Democratic Republic", | |
| "value": "6.91" | |
| }, { | |
| "name": "Latvia", | |
| "value": "9.61" | |
| }, { | |
| "name": "Lebanon", | |
| "value": "3.24" | |
| }, { | |
| "name": "Lesotho", | |
| "value": "1.82" | |
| }, { | |
| "name": "Liberia", | |
| "value": "3.82" | |
| }, { | |
| "name": "Libyan Arab Jamahiriya", | |
| "value": "0.01" | |
| }, { | |
| "name": "Lithuania", | |
| "value": "9.89" | |
| }, { | |
| "name": "Luxembourg", | |
| "value": "15.56" | |
| }, { | |
| "name": "Madagascar", | |
| "value": "1.59" | |
| }, { | |
| "name": "Malawi", | |
| "value": "1.41" | |
| }, { | |
| "name": "Malaysia", | |
| "value": "1.06" | |
| }, { | |
| "name": "Maldives", | |
| "value": "" | |
| }, { | |
| "name": "Mali", | |
| "value": "0.50" | |
| }, { | |
| "name": "Malta", | |
| "value": "6.02" | |
| }, { | |
| "name": "Marshall Islands", | |
| "value": "" | |
| }, { | |
| "name": "Mauritania", | |
| "value": "0.01" | |
| }, { | |
| "name": "Mauritius", | |
| "value": "3.03" | |
| }, { | |
| "name": "Mexico", | |
| "value": "4.57" | |
| }, { | |
| "name": "Micronesia (Federated States of)", | |
| "value": "1.23" | |
| }, { | |
| "name": "Monaco", | |
| "value": "" | |
| }, { | |
| "name": "Mongolia", | |
| "value": "2.83" | |
| }, { | |
| "name": "Montenegro", | |
| "value": "" | |
| }, { | |
| "name": "Morocco", | |
| "value": "0.45" | |
| }, { | |
| "name": "Mozambique", | |
| "value": "0.52" | |
| }, { | |
| "name": "Myanmar", | |
| "value": "0.33" | |
| }, { | |
| "name": "Namibia", | |
| "value": "5.97" | |
| }, { | |
| "name": "Nauru", | |
| "value": "0.87" | |
| }, { | |
| "name": "Nepal", | |
| "value": "0.19" | |
| }, { | |
| "name": "Netherlands", | |
| "value": "9.68" | |
| }, { | |
| "name": "New Zealand", | |
| "value": "9.68" | |
| }, { | |
| "name": "Nicaragua", | |
| "value": "2.48" | |
| }, { | |
| "name": "Niger", | |
| "value": "0.05" | |
| }, { | |
| "name": "Nigeria", | |
| "value": "10.57" | |
| }, { | |
| "name": "Niue", | |
| "value": "9.47" | |
| }, { | |
| "name": "Norway", | |
| "value": "5.50" | |
| }, { | |
| "name": "Oman", | |
| "value": "0.26" | |
| }, { | |
| "name": "Pakistan", | |
| "value": "0.01" | |
| }, { | |
| "name": "Palau", | |
| "value": "" | |
| }, { | |
| "name": "Panama", | |
| "value": "5.98" | |
| }, { | |
| "name": "Papua New Guinea", | |
| "value": "1.62" | |
| }, { | |
| "name": "Paraguay", | |
| "value": "3.73" | |
| }, { | |
| "name": "Peru", | |
| "value": "3.83" | |
| }, { | |
| "name": "Philippines", | |
| "value": "3.51" | |
| }, { | |
| "name": "Poland", | |
| "value": "8.09" | |
| }, { | |
| "name": "Portugal", | |
| "value": "11.54" | |
| }, { | |
| "name": "Qatar", | |
| "value": "4.40" | |
| }, { | |
| "name": "Republic of Korea", | |
| "value": "7.87" | |
| }, { | |
| "name": "Republic of Moldova", | |
| "value": "13.18" | |
| }, { | |
| "name": "Romania", | |
| "value": "9.74" | |
| }, { | |
| "name": "Rwanda", | |
| "value": "6.93" | |
| }, { | |
| "name": "Saint Kitts and Nevis", | |
| "value": "6.73" | |
| }, { | |
| "name": "Saint Lucia", | |
| "value": "11.48" | |
| }, { | |
| "name": "Saint Vincent and the Grenadines", | |
| "value": "7.00" | |
| }, { | |
| "name": "Samoa", | |
| "value": "1.73" | |
| }, { | |
| "name": "San Marino", | |
| "value": "" | |
| }, { | |
| "name": "Sao Tome and Principe", | |
| "value": "6.95" | |
| }, { | |
| "name": "Saudi Arabia", | |
| "value": "0.00" | |
| }, { | |
| "name": "Senegal", | |
| "value": "0.46" | |
| }, { | |
| "name": "Serbia", | |
| "value": "" | |
| }, { | |
| "name": "Seychelles", | |
| "value": "3.36" | |
| }, { | |
| "name": "Sierra Leone", | |
| "value": "6.39" | |
| }, { | |
| "name": "Singapore", | |
| "value": "2.17" | |
| }, { | |
| "name": "Slovakia", | |
| "value": "10.35" | |
| }, { | |
| "name": "Slovenia", | |
| "value": "6.74" | |
| }, { | |
| "name": "Solomon Islands", | |
| "value": "0.97" | |
| }, { | |
| "name": "Somalia", | |
| "value": "0.00" | |
| }, { | |
| "name": "South Africa", | |
| "value": "6.72" | |
| }, { | |
| "name": "Spain", | |
| "value": "11.68" | |
| }, { | |
| "name": "Sri Lanka", | |
| "value": "0.28" | |
| }, { | |
| "name": "Sudan", | |
| "value": "0.30" | |
| }, { | |
| "name": "Suriname", | |
| "value": "" | |
| }, { | |
| "name": "Swaziland", | |
| "value": "4.60" | |
| }, { | |
| "name": "Sweden", | |
| "value": "5.96" | |
| }, { | |
| "name": "Switzerland", | |
| "value": "10.83" | |
| }, { | |
| "name": "Tajikistan", | |
| "value": "0.39" | |
| }, { | |
| "name": "Thailand", | |
| "value": "5.59" | |
| }, { | |
| "name": "Timor-Leste", | |
| "value": "" | |
| }, { | |
| "name": "Togo", | |
| "value": "1.24" | |
| }, { | |
| "name": "Tonga", | |
| "value": "0.75" | |
| }, { | |
| "name": "Trinidad and Tobago", | |
| "value": "4.17" | |
| }, { | |
| "name": "Tunisia", | |
| "value": "1.23" | |
| }, { | |
| "name": "Turkey", | |
| "value": "1.37" | |
| }, { | |
| "name": "Turkmenistan", | |
| "value": "1.18" | |
| }, { | |
| "name": "Tuvalu", | |
| "value": "1.37" | |
| }, { | |
| "name": "Uganda", | |
| "value": "" | |
| }, { | |
| "name": "Ukraine", | |
| "value": "6.09" | |
| }, { | |
| "name": "United Arab Emirates", | |
| "value": "0.02" | |
| }, { | |
| "name": "United Kingdom", | |
| "value": "11.75" | |
| }, { | |
| "name": "Uruguay", | |
| "value": "7.74" | |
| }, { | |
| "name": "Uzbekistan", | |
| "value": "1.51" | |
| }, { | |
| "name": "Vanuatu", | |
| "value": "0.75" | |
| }, { | |
| "name": "Venezuela", | |
| "value": "6.67" | |
| }, { | |
| "name": "Viet Nam", | |
| "value": "0.85" | |
| }, { | |
| "name": "Yemen", | |
| "value": "0.04" | |
| }, { | |
| "name": "Zambia", | |
| "value": "2.40" | |
| }, { | |
| "name": "Zimbabwe", | |
| "value": "4.41" | |
| }, { | |
| "name": "", | |
| "value": "" | |
| }, { | |
| "name": "", | |
| "value": "" | |
| }, { | |
| "name": "United States", | |
| "value": "8.61" | |
| }, { | |
| "name": "Tanzania", | |
| "value": "5.45" | |
| }, { | |
| "name": "Macedonia", | |
| "value": "5.69" | |
| }, { | |
| "name": "Syria", | |
| "value": "0.49" | |
| }, { | |
| "name": "Russia", | |
| "value": "10.32" | |
| }, { | |
| "name": "" | |
| }]; | |
| option = { | |
| visualMap: { | |
| show: false, | |
| min: 0, | |
| max: 15, | |
| inRange: { | |
| color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'] | |
| } | |
| }, | |
| series: [{ | |
| type: 'map3D', | |
| map: 'china', | |
| postEffect: { | |
| enable: true, | |
| colorCorrection: { | |
| lookupTexture: '/asset/get/s/data-1497261115431-B1XrEJ2f-.jpg' | |
| } | |
| }, | |
| light: { | |
| main: { | |
| intensity: 1, | |
| shadow: true, | |
| alpha: 150, | |
| beta: 70 | |
| }, | |
| ambient: { | |
| intensity: 0 | |
| }, | |
| ambientCubemap: { | |
| diffuseIntensity: 1, | |
| texture: '/asset/get/s/data-1497251035660-HkVJTnsMW.hdr' | |
| } | |
| }, | |
| groundPlane: { | |
| show: true | |
| }, | |
| data: regionData | |
| }] | |
| }; | |
| myChart.setOption(option); | |
| myChart && enableSnapshot(myChart, 'main0'); | |
| </script> | |
| </body> | |
| </html> |