767 lines
22 KiB
HTML
Generated
767 lines
22 KiB
HTML
Generated
<!DOCTYPE html>
|
|
<!--
|
|
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> |