进入echarts 进行学习 ，选择适合自己数据展示的风格的图表。
点击快速入门
可以按照第一个小案例来学习一下
示例可以找到很多现成的图表 我们只需要更改图表元素。
这个就是一个完整的引用过程。
看一下我们的代码效果
代码结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.big {
height: 100vh;
width: 100vw;
/* background:url("yq.png");
background-size: cover; */
/* background-color: aqua; */
}
.big-top {
width: 100%;
height: 10%;
text-align: center;
font-family: cursive;
/* font-family: Arial, Helvetica, sans-serif; */
font-weight: bold;
font-size: 25px;
background-color: lightblue;
line-height: 3;
}
.big-content {
width: 100%;
height: 90%;
display: flex;
/* background-color: aqua; */
}
.big-content-left {
width: 25%;
height: 100%;
background-color: ;
mag
}
.big-content-left1 {
width: 100%;
height: 45%;
background-color: white;
margin-top: 2.5%;
border-width: 2px;
border-color: gainsboro;
border-style: solid;
}
.big-content-left2 {
width: 100%;
height: 45%;
background-color: ;
margin-top: 5%;
border-width: 2px;
border-color: gainsboro;
border-style: solid;
}
.big-content-mid {
width: 45%;
height: 100%;
background-color: whitesmoke;
margin-left: 2.5%;
margin-right: 2.5%;
border-width: 2px;
border-color: gainsboro;
border-style: solid;
}
.big-content-right {
width: 25%;
height: 100%;
background-color: ;
}
.big-content-right1 {
width: 100%;
height: 45%;
background-color: ;
margin-top: 2.5%;
border-width: 2px;
border-color: gainsboro;
border-style: solid;
}
.big-content-right2 {
width: 100%;
height: 45%;
background-color: ;
margin-top: 5%;
border-width: 2px;
border-color: gainsboro;
border-style: solid;
}
</style>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/world.js"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts-wordcloud.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body style="padding: 0px;margin: 0px;border: 0px;">
<div class="big">
<div class="big-top">疫情分析图</div>
<div class="big-content"> <button value="测试" id="getmore">测试</button>
<script>
</script>
<div class="big-content-left">
<div class="big-content-left1">
<div id="7ab600e69d6542d4983d4af6f5f5719c" class="chart-container"
style="width:100%; height:100%;"></div>
<script>
var chart_7ab600e69d6542d4983d4af6f5f5719c = echarts.init(
document.getElementById('7ab600e69d6542d4983d4af6f5f5719c'), 'white', {
renderer: 'canvas'
});
var option_7ab600e69d6542d4983d4af6f5f5719c = {
"animation": true,
"animationThreshold": 2000,
"animationDuration": 1000,
"animationEasing": "cubicOut",
"animationDelay": 0,
"animationDurationUpdate": 300,
"animationEasingUpdate": "cubicOut",
"animationDelayUpdate": 0,
"color": [
"#c23531",
"#2f4554",
"#61a0a8",
"#d48265",
"#749f83",
"#ca8622",
"#bda29a",
"#6e7074",
"#546570",
"#c4ccd3",
"#f05b72",
"#ef5b9c",
"#f47920",
"#905a3d",
"#fab27b",
"#2a5caa",
"#444693",
"#726930",
"#b2d235",
"#6d8346",
"#ac6767",
"#1d953f",
"#6950a1",
"#918597"
],
"series": [{
"type": "gauge",
"title": {
"show": true,
"offsetCenter": [
0,
"-40%"
],
"color": "#333",
"fontStyle": "normal",
"fontWeight": "normal",
"fontFamily": "sans-serif",
"fontSize": 15,
"backgroundColor": "transparent",
"borderColor": "transparent",
"borderWidth": 0,
"borderRadius": 0,
"padding": 0,
"shadowColor": "transparent",
"shadowBlur": 0,
"shadowOffsetX": 0,
"shadowOffsetY": 0
},
"detail": {
"show": true,
"backgroundColor": "transparent",
"borderWidth": 0,
"borderColor": "transparent",
"offsetCenter": [
0,
"-40%"
],
"formatter": "{value}%",
"color": "auto",
"fontStyle": "normal",
"fontWeight": "normal",
"fontFamily": "sans-serif",
"fontSize": 15,
"borderRadius": 0,
"padding": 0,
"shadowColor": "transparent",
"shadowBlur": 0,
"shadowOffsetX": 0,
"shadowOffsetY": 0
},
"min": 0,
"max": 100,
"splitNumber": 10,
"radius": "75%",
"startAngle": 225,
"endAngle": -45,
"clockwise": true,
"data": [{
"value": 96.6 // tp
}],
"pointer": {
"show": true,
"length": "80%",
"width": 8
}
}],
"legend": [{
"data": [
""
],
"selected": {
"": true
},
"show": true,
"padding": 5,
"itemGap": 10,
"itemWidth": 25,
"itemHeight": 14
}],
"tooltip": {
"show": true,
"trigger": "item",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"showContent": true,
"alwaysShowContent": false,
"showDelay": 0,
"hideDelay": 100,
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5
},
"title": [{
"text": "\u75ab\u82d7\u63a5\u79cd\u7387",
"padding": 5,
"itemGap": 10
}]
};
chart_7ab600e69d6542d4983d4af6f5f5719c.setOption(option_7ab600e69d6542d4983d4af6f5f5719c);
let btn = document.getElementById('getmore') // option_7ab600e69d6542d4983d4af6f5f5719c 图标配置项
btn.onclick = function() {
var xmlhttp = new XMLHttpRequest();// 新建一个ajax对象检测请求变化
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// document.getElementById('getmore').innerHTML = xmlhttp.responseText
option_7ab600e69d6542d4983d4af6f5f5719c.series[0].data[0] = xmlhttp.responseText
console.log(option_7ab600e69d6542d4983d4af6f5f5719c)
chart_7ab600e69d6542d4983d4af6f5f5719c.setOption(option_7ab600e69d6542d4983d4af6f5f5719c);
}
}
xmlhttp.open("GET", "http://127.0.0.1:5000/number", true);
xmlhttp.send();
}
</script>
</div>
<div class="big-content-left2">
<div id="728b0f9791e94192baa409454f60ffa7" class="chart-container" style="width:100%; height:100%;"></div>
<script>
var chart_728b0f9791e94192baa409454f60ffa7 = echarts.init(
document.getElementById('728b0f9791e94192baa409454f60ffa7'), 'white', {renderer: 'canvas'});
var option_728b0f9791e94192baa409454f60ffa7 = {
"animation": true,
"animationThreshold": 2000,
"animationDuration": 1000,
"animationEasing": "cubicOut",
"animationDelay": 0,
"animationDurationUpdate": 300,
"animationEasingUpdate": "cubicOut",
"animationDelayUpdate": 0,
"color": [
"#c23531",
"#2f4554",
"#61a0a8",
"#d48265",
"#749f83",
"#ca8622",
"#bda29a",
"#6e7074",
"#546570",
"#c4ccd3",
"#f05b72",
"#ef5b9c",
"#f47920",
"#905a3d",
"#fab27b",
"#2a5caa",
"#444693",
"#726930",
"#b2d235",
"#6d8346",
"#ac6767",
"#1d953f",
"#6950a1",
"#918597"
],
"series": [
{
"type": "wordCloud",
"name": "\u70ed\u70b9\u5206\u6790",
"shape": "circle",
"rotationRange": [
-90,
90
],
"rotationStep": 45,
"girdSize": 20,
"sizeRange": [
6,
66
],
"data": [
{
"name": "\u75ab\u82d7",
"value": "999",
"textStyle": {
"normal": {
"color": "rgb(153,107,80)"
}
}
},
{
"name": "\u52a0\u5f3a\u9488",
"value": "888",
"textStyle": {
"normal": {
"color": "rgb(113,92,59)"
}
}
},
{
"name": "\u7f8e\u56fd\u75ab\u60c5\u6b7b\u4ea1\u8d85\u8fc7\u767e\u4e07",
"value": "777",
"textStyle": {
"normal": {
"color": "rgb(159,75,109)"
}
}
},
{
"name": "\u4e0a\u6d77\u52a0\u6cb9",
"value": "688",
"textStyle": {
"normal": {
"color": "rgb(37,155,111)"
}
}
},
{
"name": "\u4e00\u6b21\u4f9b\u6c34\u95ee\u9898",
"value": "588",
"textStyle": {
"normal": {
"color": "rgb(126,72,5)"
}
}
},
{
"name": "\u852c\u83dc\u77ed\u7f3a",
"value": "516",
"textStyle": {
"normal": {
"color": "rgb(70,142,160)"
}
}
},
{
"name": "\u53ef\u7231\u5927\u767d",
"value": "515",
"textStyle": {
"normal": {
"color": "rgb(5,5,73)"
}
}
},
{
"name": "\u5f02\u5730\u6cbb\u7597",
"value": "483",
"textStyle": {
"normal": {
"color": "rgb(110,52,43)"
}
}
},
{
"name": "\u4e0a\u6d77\u6d41\u51fa",
"value": "462",
"textStyle": {
"normal": {
"color": "rgb(42,25,104)"
}
}
},
{
"name": "\u767d\u83dc\u6da8\u4ef7",
"value": "416",
"textStyle": {
"normal": {
"color": "rgb(131,32,3)"
}
}
},
{
"name": "\u7269\u8d28\u77ed\u7f3a",
"value": "415",
"textStyle": {
"normal": {
"color": "rgb(34,111,81)"
}
}
},
{
"name": "\u62d2\u7edd\u9694\u79bb",
"value": "483",
"textStyle": {
"normal": {
"color": "rgb(8,7,37)"
}
}
},
{
"name": "D5735",
"value": "462",
"textStyle": {
"normal": {
"color": "rgb(10,122,10)"
}
}
},
{
"name": "\u8d35\u5dde\u63f4\u52a9",
"value": "316",
"textStyle": {
"normal": {
"color": "rgb(157,11,111)"
}
}
},
{
"name": "\u4e13\u5bb6\u4f1a\u8bca",
"value": "315",
"textStyle": {
"normal": {
"color": "rgb(36,46,87)"
}
}
},
{
"name": "\u5f02\u5730\u6cbb\u7597",
"value": "383",
"textStyle": {
"normal": {
"color": "rgb(61,98,53)"
}
}
},
{
"name": "\u5317\u4eac\u7a81\u53d1",
"value": "362",
"textStyle": {
"normal": {
"color": "rgb(64,22,4)"
}
}
},
{
"name": "\u56db\u5ddd\u63f4\u52a9",
"value": "216",
"textStyle": {
"normal": {
"color": "rgb(120,107,118)"
}
}
},
{
"name": "\u5f20\u5b8f\u6587",
"value": "215",
"textStyle": {
"normal": {
"color": "rgb(66,66,49)"
}
}
},
{
"name": "\u5065\u5eb7\u7801",
"value": "283",
"textStyle": {
"normal": {
"color": "rgb(137,65,7)"
}
}
},
{
"name": "\u573a\u6240\u7801",
"value": "162",
"textStyle": {
"normal": {
"color": "rgb(50,29,120)"
}
}
}
],
"drawOutOfBound": false,
"textStyle": {
"emphasis": {}
}
}
],
"legend": [
{
"data": [],
"selected": {},
"show": true,
"padding": 5,
"itemGap": 10,
"itemWidth": 25,
"itemHeight": 14
}
],
"tooltip": {
"show": true,
"trigger": "item",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"showContent": true,
"alwaysShowContent": false,
"showDelay": 0,
"hideDelay": 100,
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5
},
"title": [
{
"text": "\u70ed\u70b9\u5206\u6790",
"padding": 5,
"itemGap": 10,
"textStyle": {
"fontSize": 23
}
}
]
};
chart_728b0f9791e94192baa409454f60ffa7.setOption(option_728b0f9791e94192baa409454f60ffa7);
</script>
</body>
</div>
</div>
<div class="big-content-mid">
<div id="b6b7291f2637487aa33a587c376bfd90" class="chart-container" style="width:100%; height:100%;">
</div>
<script>
var chart_b6b7291f2637487aa33a587c376bfd90 = echarts.init(
document.getElementById('b6b7291f2637487aa33a587c376bfd90'), 'white', {
renderer: 'canvas'
});
var option_b6b7291f2637487aa33a587c376bfd90 = {
"animation": true,
"animationThreshold": 2000,
"animationDuration": 1000,
"animationEasing": "cubicOut",
"animationDelay": 0,
"animationDurationUpdate": 300,
"animationEasingUpdate": "cubicOut",
"animationDelayUpdate": 0,
"color": [
"#c23531",
"#2f4554",
"#61a0a8",
"#d48265",
"#749f83",
"#ca8622",
"#bda29a",
"#6e7074",
"#546570",
"#c4ccd3",
"#f05b72",
"#ef5b9c",
"#f47920",
"#905a3d",
"#fab27b",
"#2a5caa",
"#444693",
"#726930",
"#b2d235",
"#6d8346",
"#ac6767",
"#1d953f",
"#6950a1",
"#918597"
],
"series": [{
"type": "map",
"name": "\u73b0\u6709\u786e\u8bca",
"label": {
"show": true,
"position": "top",
"margin": 8
},
"mapType": "china",
"data": [{
"name": "\u53f0\u6e7e",
"value": 2388190
},
{
"name": "\u9999\u6e2f",
"value": 260825
},
{
"name": "\u6e56\u5317",
"value": 1
},
{
"name": "\u4e0a\u6d77",
"value": 124
},
{
"name": "\u5409\u6797",
"value": 131
},
{
"name": "\u5e7f\u4e1c",
"value": 30
},
{
"name": "\u5317\u4eac",
"value": 248
},
{
"name": "\u798f\u5efa",
"value": 60
},
{
"name": "\u9655\u897f",
"value": 0
},
{
"name": "\u6cb3\u5357",
"value": 27
},
{
"name": "\u6d59\u6c5f",
"value": 7
},
{
"name": "\u9ed1\u9f99\u6c5f",
"value": 1
},
{
"name": "\u5c71\u4e1c",
"value": 2
},
{
"name": "\u56db\u5ddd",
"value": 103
},
{
"name": "\u6c5f\u82cf",
"value": 6
},
{
"name": "\u4e91\u5357",
"value": 17
},
{
"name": "\u6cb3\u5317",
"value": 1
},
{
"name": "\u5929\u6d25",
"value": 137
},
{
"name": "\u5185\u8499\u53e4",
"value": 41
},
{
"name": "\u8fbd\u5b81",
"value": 2
},
{
"name": "\u5e7f\u897f",
"value": 14
},
{
"name": "\u6e56\u5357",
"value": 0
},
{
"name": "\u6c5f\u897f",
"value": 0
},
{
"name": "\u5b89\u5fbd",
"value": 0
},
{
"name": "\u65b0\u7586",
"value": 0
},
{
"name": "\u91cd\u5e86",
"value": 3
},
{
"name": "\u7518\u8083",
"value": 0
},
{
"name": "\u5c71\u897f",
"value": 1
},
{
"name": "\u6d77\u5357",
"value": 0
},
{
"name": "\u8d35\u5dde",
"value": 0
},
{
"name": "\u9752\u6d77",
"value": 0
},
{
"name": "\u5b81\u590f",
"value": 0
},
{
"name": "\u6fb3\u95e8",
"value": 1
},
{
"name": "\u897f\u85cf",
"value": 0
}
],
"roam": true,
"aspectScale": 0.75,
"nameProperty": "name",
"selectedMode": false,
"zoom": 1,
"mapValueCalculation": "sum",
"showLegendSymbol": true,
"itemStyle": {
"color": "#0f0"
},
"emphasis": {}
},
{
"type": "map",
"name": "\u7d2f\u8ba1\u786e\u8bca",
"label": {
"show": true,
"position": "top",
"margin": 8
},
"mapType": "china",
"data": [{
"name": "\u53f0\u6e7e",
"value": 2404871
},
{
"name": "\u9999\u6e2f",
"value": 332721
},
{
"name": "\u6e56\u5317",
"value": 68399
},
{
"name": "\u4e0a\u6d77",
"value": 63044
},
{
"name": "\u5409\u6797",
"value": 40293
},
{
"name": "\u5e7f\u4e1c",
"value": 7316
},
{
"name": "\u5317\u4eac",
"value": 3432
},
{
"name": "\u798f\u5efa",
"value": 3295
},
{
"name": "\u9655\u897f",
"value": 3283
},
{
"name": "\u6cb3\u5357",
"value": 3183
},
{
"name": "\u6d59\u6c5f",
"value": 3138
},
{
"name": "\u9ed1\u9f99\u6c5f",
"value": 2984
},
{
"name": "\u5c71\u4e1c",
"value": 2736
},
{
"name": "\u56db\u5ddd",
"value": 2348
},
{
"name": "\u6c5f\u82cf",
"value": 2235
},
{
"name": "\u4e91\u5357",
"value": 2153
},
{
"name": "\u6cb3\u5317",
"value": 2005
},
{
"name": "\u5929\u6d25",
"value": 1977
},
{
"name": "\u5185\u8499\u53e4",
"value": 1794
},
{
"name": "\u8fbd\u5b81",
"value": 1675
},
{
"name": "\u5e7f\u897f",
"value": 1641
},
{
"name": "\u6e56\u5357",
"value": 1393
},
{
"name": "\u6c5f\u897f",
"value": 1383
},
{
"name": "\u5b89\u5fbd",
"value": 1065
},
{
"name": "\u65b0\u7586",
"value": 1008
},
{
"name": "\u91cd\u5e86",
"value": 713
},
{
"name": "\u7518\u8083",
"value": 681
},
{
"name": "\u5c71\u897f",
"value": 421
},
{
"name": "\u6d77\u5357",
"value": 288
},
{
"name": "\u8d35\u5dde",
"value": 185
},
{
"name": "\u9752\u6d77",
"value": 147
},
{
"name": "\u5b81\u590f",
"value": 122
},
{
"name": "\u6fb3\u95e8",
"value": 83
},
{
"name": "\u897f\u85cf",
"value": 1
}
],
"roam": true,
"aspectScale": 0.75,
"nameProperty": "name",
"selectedMode": false,
"zoom": 1,
"mapValueCalculation": "sum",
"showLegendSymbol": true,
"itemStyle": {
"color": "red"
},
"emphasis": {}
}
],
"legend": [{
"data": [
"\u73b0\u6709\u786e\u8bca",
"\u7d2f\u8ba1\u786e\u8bca"
],
"selected": {
"\u73b0\u6709\u786e\u8bca": true,
"\u7d2f\u8ba1\u786e\u8bca": false
},
"selectedMode": "single",
"show": true,
"padding": 5,
"itemGap": 10,
"itemWidth": 25,
"itemHeight": 14
}],
"tooltip": {
"show": true,
"trigger": "item",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"showContent": true,
"alwaysShowContent": false,
"showDelay": 0,
"hideDelay": 100,
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5
},
"title": [{
"text": "\u5b9e\u65f6\u75ab\u60c5",
"subtext": "\u4e2d\u56fd",
"padding": 5,
"itemGap": 10
}],
"visualMap": {
"show": true,
"type": "piecewise",
"min": 0,
"max": 2404871,
"inRange": {
"color": [
"#50a3ba",
"#eac763",
"#d94e5d"
]
},
"calculable": true,
"inverse": false,
"splitNumber": 5,
"orient": "vertical",
"showLabel": true,
"itemWidth": 20,
"itemHeight": 14,
"borderWidth": 0,
"pieces": [{
"value": 0,
"color": "#e2ebf4"
},
{
"min": 1,
"max": 9,
"color": "#ffe7b2"
},
{
"min": 10,
"max": 99,
"color": "#ffcea0"
},
{
"min": 100,
"max": 499,
"color": "#ffa577"
},
{
"min": 500,
"max": 999,
"color": "#ff6341"
},
{
"min": 1000,
"max": 9999,
"color": "#ff2736"
},
{
"min": 10000,
"color": "#de1f05"
}
]
}
};
chart_b6b7291f2637487aa33a587c376bfd90.setOption(option_b6b7291f2637487aa33a587c376bfd90);
</script>
</div>
<div class="big-content-right">
<div class="big-content-right1">
<div id="85b008b844134681a766161f43a23990" class="chart-container"
style="width:100%; height:100%;"></div>
<script>
var chart_85b008b844134681a766161f43a23990 = echarts.init(
document.getElementById('85b008b844134681a766161f43a23990'), 'white', {
renderer: 'canvas'
});
var option_85b008b844134681a766161f43a23990 = {
"animation": true,
"animationThreshold": 2000,
"animationDuration": 1000,
"animationEasing": "cubicOut",
"animationDelay": 0,
"animationDurationUpdate": 300,
"animationEasingUpdate": "cubicOut",
"animationDelayUpdate": 0,
"color": [
"#c23531",
"#2f4554",
"#61a0a8",
"#d48265",
"#749f83",
"#ca8622",
"#bda29a",
"#6e7074",
"#546570",
"#c4ccd3",
"#f05b72",
"#ef5b9c",
"#f47920",
"#905a3d",
"#fab27b",
"#2a5caa",
"#444693",
"#726930",
"#b2d235",
"#6d8346",
"#ac6767",
"#1d953f",
"#6950a1",
"#918597"
],
"series": [{
"type": "map",
"name": "\u4e16\u754c\u75ab\u60c5\u5206\u5e03",
"label": {
"show": false,
"position": "top",
"margin": 8
},
"mapType": "world",
"data": [{
"name": "\u7f8e\u56fd",
"value": 39668541
},
{
"name": "\u5370\u5ea6",
"value": 32737939
},
{
"name": "\u5df4\u897f",
"value": 20741815
},
{
"name": "\u6cd5\u56fd",
"value": 6827146
},
{
"name": "\u4fc4\u7f57\u65af",
"value": 6785465
},
{
"name": "\u82f1\u56fd",
"value": 6762904
},
{
"name": "\u571f\u8033\u5176",
"value": 6329519
},
{
"name": "\u963f\u6839\u5ef7",
"value": 5173531
},
{
"name": "\u4f0a\u6717",
"value": 4926964
},
{
"name": "\u54e5\u4f26\u6bd4\u4e9a",
"value": 4905258
},
{
"name": "\u897f\u73ed\u7259",
"value": 4831809
},
{
"name": "\u610f\u5927\u5229",
"value": 4530246
},
{
"name": "\u5370\u5ea6\u5c3c\u897f\u4e9a",
"value": 4073831
},
{
"name": "\u5fb7\u56fd",
"value": 3940212
},
{
"name": "\u58a8\u897f\u54e5",
"value": 3335700
},
{
"name": "\u6ce2\u5170",
"value": 2888231
},
{
"name": "\u5357\u975e",
"value": 2764931
},
{
"name": "\u4e4c\u514b\u5170",
"value": 2381553
},
{
"name": "\u79d8\u9c81",
"value": 2149591
},
{
"name": "\u8377\u5170",
"value": 1971713
},
{
"name": "\u83f2\u5f8b\u5bbe",
"value": 1954023
},
{
"name": "\u4f0a\u62c9\u514b",
"value": 1874435
},
{
"name": "\u9a6c\u6765\u897f\u4e9a",
"value": 1706089
},
{
"name": "\u6377\u514b",
"value": 1678862
},
{
"name": "\u667a\u5229",
"value": 1637829
},
{
"name": "\u52a0\u62ff\u5927",
"value": 1497283
},
{
"name": "\u5b5f\u52a0\u62c9",
"value": 1493537
},
{
"name": "\u65e5\u672c",
"value": 1460303
},
{
"name": "\u6bd4\u5229\u65f6",
"value": 1177909
},
{
"name": "\u6cf0\u56fd",
"value": 1174091
},
{
"name": "\u5df4\u57fa\u65af\u5766",
"value": 1156281
},
{
"name": "\u745e\u5178",
"value": 1123413
},
{
"name": "\u7f57\u9a6c\u5c3c\u4e9a",
"value": 1096753
},
{
"name": "\u4ee5\u8272\u5217",
"value": 1051609
},
{
"name": "\u8461\u8404\u7259",
"value": 1034947
},
{
"name": "\u54c8\u8428\u514b\u65af\u5766",
"value": 854842
},
{
"name": "\u6469\u6d1b\u54e5",
"value": 853373
},
{
"name": "\u5308\u7259\u5229",
"value": 811706
},
{
"name": "\u7ea6\u65e6",
"value": 795161
},
{
"name": "\u745e\u58eb",
"value": 770765
},
{
"name": "\u5c3c\u6cca\u5c14",
"value": 759222
},
{
"name": "\u585e\u5c14\u7ef4\u4e9a",
"value": 757617
},
{
"name": "\u963f\u8054\u914b",
"value": 716381
},
{
"name": "\u5965\u5730\u5229",
"value": 685956
},
{
"name": "\u7a81\u5c3c\u65af",
"value": 660587
},
{
"name": "\u53e4\u5df4",
"value": 640438
},
{
"name": "\u9ece\u5df4\u5ae9",
"value": 600451
},
{
"name": "\u5e0c\u814a",
"value": 581315
},
{
"name": "\u6c99\u7279\u963f\u62c9\u4f2f",
"value": 543318
},
{
"name": "\u683c\u9c81\u5409\u4e9a",
"value": 543118
},
{
"name": "\u5384\u74dc\u591a\u5c14",
"value": 501140
},
{
"name": "\u73bb\u5229\u7ef4\u4e9a",
"value": 490056
},
{
"name": "\u767d\u4fc4\u7f57\u65af",
"value": 479306
},
{
"name": "\u5371\u5730\u9a6c\u62c9",
"value": 465059
},
{
"name": "\u5df4\u62c9\u572d",
"value": 458334
},
{
"name": "\u5df4\u62ff\u9a6c",
"value": 456666
},
{
"name": "\u54e5\u65af\u8fbe\u9ece\u52a0",
"value": 455784
},
{
"name": "\u4fdd\u52a0\u5229\u4e9a",
"value": 451599
},
{
"name": "\u8d8a\u5357",
"value": 435265
},
{
"name": "\u65af\u91cc\u5170\u5361",
"value": 426169
},
{
"name": "\u963f\u585e\u62dc\u7586",
"value": 417996
},
{
"name": "\u79d1\u5a01\u7279",
"value": 409552
},
{
"name": "\u65af\u6d1b\u4f10\u514b",
"value": 394742
},
{
"name": "\u7f05\u7538",
"value": 392300
},
{
"name": "\u4e4c\u62c9\u572d",
"value": 384692
},
{
"name": "\u514b\u7f57\u5730\u4e9a",
"value": 373191
},
{
"name": "\u591a\u7c73\u5c3c\u52a0",
"value": 349859
},
{
"name": "\u7231\u5c14\u5170",
"value": 349773
},
{
"name": "\u4e39\u9ea6",
"value": 345421
},
{
"name": "\u5df4\u52d2\u65af\u5766",
"value": 337405
},
{
"name": "\u6d2a\u90fd\u62c9\u65af",
"value": 335398
},
{
"name": "\u59d4\u5185\u745e\u62c9",
"value": 333125
},
{
"name": "\u57c3\u585e\u4fc4\u6bd4\u4e9a",
"value": 306117
},
{
"name": "\u5229\u6bd4\u4e9a",
"value": 305793
},
{
"name": "\u963f\u66fc",
"value": 302132
},
{
"name": "\u7acb\u9676\u5b9b",
"value": 297777
},
{
"name": "\u57c3\u53ca",
"value": 287899
},
{
"name": "\u5df4\u6797",
"value": 272341
},
{
"name": "\u6469\u5c14\u591a\u74e6",
"value": 266988
},
{
"name": "\u65af\u6d1b\u6587\u5c3c\u4e9a",
"value": 266514
},
{
"name": "\u97e9\u56fd",
"value": 250051
},
{
"name": "\u4e9a\u7f8e\u5c3c\u4e9a",
"value": 241336
},
{
"name": "\u80af\u5c3c\u4e9a",
"value": 234952
},
{
"name": "\u5361\u5854\u5c14",
"value": 232366
},
{
"name": "\u6ce2\u9ed1",
"value": 212306
},
{
"name": "\u8499\u53e4",
"value": 211080
},
{
"name": "\u8d5e\u6bd4\u4e9a",
"value": 206051
},
{
"name": "\u963f\u5c14\u53ca\u5229\u4e9a",
"value": 195162
},
{
"name": "\u5c3c\u65e5\u5229\u4e9a",
"value": 191345
},
{
"name": "\u5409\u5c14\u5409\u65af\u65af\u5766",
"value": 175437
},
{
"name": "\u5317\u9a6c\u5176\u987f",
"value": 175330
},
{
"name": "\u632a\u5a01",
"value": 157040
},
{
"name": "\u4e4c\u5179\u522b\u514b\u65af\u5766",
"value": 154844
},
{
"name": "\u535a\u8328\u74e6\u7eb3",
"value": 153793
},
{
"name": "\u963f\u5bcc\u6c57",
"value": 152960
},
{
"name": "\u83ab\u6851\u6bd4\u514b",
"value": 145863
},
{
"name": "\u963f\u5c14\u5df4\u5c3c\u4e9a",
"value": 144847
},
{
"name": "\u62c9\u8131\u7ef4\u4e9a",
"value": 142319
},
{
"name": "\u7231\u6c99\u5c3c\u4e9a",
"value": 141344
},
{
"name": "\u82ac\u5170",
"value": 126093
},
{
"name": "\u7eb3\u7c73\u6bd4\u4e9a",
"value": 124716
},
{
"name": "\u6d25\u5df4\u5e03\u97e6",
"value": 124437
},
{
"name": "\u4e4c\u5e72\u8fbe",
"value": 119732
},
{
"name": "\u52a0\u7eb3",
"value": 117636
},
{
"name": "\u9ed1\u5c71",
"value": 114364
},
{
"name": "\u585e\u6d66\u8def\u65af",
"value": 113277
},
{
"name": "\u8428\u5c14\u74e6\u591a",
"value": 94060
},
{
"name": "\u67ec\u57d4\u5be8",
"value": 92208
},
{
"name": "\u5362\u65fa\u8fbe",
"value": 86613
},
{
"name": "\u5580\u9ea6\u9686",
"value": 83425
},
{
"name": "\u9a6c\u5c14\u4ee3\u592b",
"value": 80791
},
{
"name": "\u5362\u68ee\u5821",
"value": 75517
},
{
"name": "\u585e\u5185\u52a0\u5c14",
"value": 72709
},
{
"name": "\u65b0\u52a0\u5761",
"value": 67171
},
{
"name": "\u7259\u4e70\u52a0",
"value": 66663
},
{
"name": "\u9a6c\u62c9\u7ef4",
"value": 60345
},
{
"name": "\u79d1\u7279\u8fea\u74e6",
"value": 55108
},
{
"name": "\u521a\u679c\uff08\u91d1\uff09",
"value": 54508
},
{
"name": "\u6fb3\u5927\u5229\u4e9a",
"value": 52612
},
{
"name": "\u5b89\u54e5\u62c9",
"value": 47168
},
{
"name": "\u6590\u6d4e",
"value": 46027
},
{
"name": "\u7279\u7acb\u5c3c\u8fbe\u548c\u591a\u5df4\u54e5",
"value": 44481
},
{
"name": "\u9a6c\u8fbe\u52a0\u65af\u52a0",
"value": 42862
},
{
"name": "\u65af\u5a01\u58eb\u5170",
"value": 42828
},
{
"name": "\u82cf\u4e39",
"value": 37699
},
{
"name": "\u9a6c\u8033\u4ed6",
"value": 36089
},
{
"name": "\u4f5b\u5f97\u89d2",
"value": 35227
},
{
"name": "\u6bdb\u91cc\u5854\u5c3c\u4e9a",
"value": 33309
},
{
"name": "\u51e0\u5185\u4e9a",
"value": 29209
},
{
"name": "\u82cf\u91cc\u5357",
"value": 28840
},
{
"name": "\u53d9\u5229\u4e9a",
"value": 27654
},
{
"name": "\u52a0\u84ec",
"value": 25819
},
{
"name": "\u572d\u4e9a\u90a3",
"value": 25323
},
{
"name": "\u591a\u54e5",
"value": 21181
},
{
"name": "\u6d77\u5730",
"value": 20833
},
{
"name": "\u585e\u820c\u5c14",
"value": 19777
},
{
"name": "\u5df4\u54c8\u9a6c",
"value": 17940
},
{
"name": "\u5df4\u5e03\u4e9a\u65b0\u51e0\u5185\u4e9a",
"value": 17838
},
{
"name": "\u7d22\u9a6c\u91cc",
"value": 17302
},
{
"name": "\u5854\u5409\u514b\u65af\u5766",
"value": 16778
},
{
"name": "\u4e1c\u5e1d\u6c76",
"value": 16402
},
{
"name": "\u4f2f\u5229\u5179",
"value": 16012
},
{
"name": "\u5b89\u9053\u5c14",
"value": 15025
},
{
"name": "\u9a6c\u91cc",
"value": 14857
},
{
"name": "\u8001\u631d",
"value": 14641
},
{
"name": "\u83b1\u7d22\u6258",
"value": 14395
},
{
"name": "\u5e03\u57fa\u7eb3\u6cd5\u7d22",
"value": 13762
},
{
"name": "\u521a\u679c\uff08\u5e03\uff09",
"value": 13533
},
{
"name": "\u8d1d\u5b81",
"value": 13366
},
{
"name": "\u5e03\u9686\u8fea",
"value": 11994
},
{
"name": "\u5409\u5e03\u63d0",
"value": 11741
},
{
"name": "\u5357\u82cf\u4e39",
"value": 11403
},
{
"name": "\u4e2d\u975e\u5171\u548c\u56fd",
"value": 11270
},
{
"name": "\u5c3c\u52a0\u62c9\u74dc",
"value": 11167
},
{
"name": "\u51b0\u5c9b",
"value": 10658
},
{
"name": "\u5188\u6bd4\u4e9a",
"value": 9626
},
{
"name": "\u8d64\u9053\u51e0\u5185\u4e9a",
"value": 9326
},
{
"name": "\u6bdb\u91cc\u6c42\u65af",
"value": 8667
},
{
"name": "\u5723\u5362\u897f\u4e9a",
"value": 8111
},
{
"name": "\u4e5f\u95e8",
"value": 7784
},
{
"name": "\u5384\u7acb\u7279\u91cc\u4e9a",
"value": 6640
},
{
"name": "\u585e\u62c9\u5229\u6602",
"value": 6363
},
{
"name": "\u5c3c\u65e5\u5c14",
"value": 5839
},
{
"name": "\u51e0\u5185\u4e9a\u6bd4\u7ecd",
"value": 5766
},
{
"name": "\u5229\u6bd4\u91cc\u4e9a",
"value": 5538
},
{
"name": "\u5723\u9a6c\u529b\u8bfa",
"value": 5261
},
{
"name": "\u4e4d\u5f97",
"value": 4991
},
{
"name": "\u5df4\u5df4\u591a\u65af",
"value": 4931
},
{
"name": "\u79d1\u6469\u7f57",
"value": 4062
},
{
"name": "\u65b0\u897f\u5170",
"value": 3520
},
{
"name": "\u5217\u652f\u6566\u58eb\u767b\u516c\u56fd",
"value": 3263
},
{
"name": "\u6469\u7eb3\u54e5",
"value": 3183
},
{
"name": "\u4e0d\u4e39",
"value": 2594
},
{
"name": "\u5723\u591a\u7f8e\u548c\u666e\u6797\u897f\u6bd4\u6c11\u4e3b\u5171\u548c\u56fd",
"value": 2590
},
{
"name": "\u6587\u83b1",
"value": 2462
},
{
"name": "\u5723\u6587\u68ee\u7279\u548c\u683c\u6797\u7eb3\u4e01\u65af",
"value": 2331
},
{
"name": "\u65e5\u672c\u672c\u571f",
"value": 1724
},
{
"name": "\u5b89\u63d0\u74dc\u548c\u5df4\u5e03\u8fbe",
"value": 1651
},
{
"name": "\u591a\u7c73\u5c3c\u514b",
"value": 1638
},
{
"name": "\u5766\u6851\u5c3c\u4e9a",
"value": 1367
},
{
"name": "\u5723\u57fa\u8328\u548c\u5c3c\u7ef4\u65af",
"value": 1053
},
{
"name": "\u94bb\u77f3\u53f7\u90ae\u8f6e",
"value": 712
},
{
"name": "\u683c\u6797\u7eb3\u8fbe",
"value": 357
},
{
"name": "\u9a6c\u63d0\u5c3c\u514b\u5c9b",
"value": 37
},
{
"name": "\u68b5\u8482\u5188",
"value": 27
},
{
"name": "\u6240\u7f57\u95e8\u7fa4\u5c9b",
"value": 20
},
{
"name": "\u897f\u6492\u54c8\u62c9",
"value": 10
},
{
"name": "\u5c1a\u4e39\u53f7",
"value": 9
},
{
"name": "\u74e6\u52aa\u963f\u56fe",
"value": 4
},
{
"name": "\u9a6c\u7ecd\u5c14\u7fa4\u5c9b",
"value": 4
},
{
"name": "\u8428\u6469\u4e9a",
"value": 3
},
{
"name": "\u5bc6\u514b\u7f57\u5c3c\u897f\u4e9a",
"value": 1
}
],
"roam": true,
"aspectScale": 0.75,
"nameProperty": "name",
"selectedMode": false,
"zoom": 1,
"nameMap": {
"Singapore Rep.": "\u65b0\u52a0\u5761",
"Dominican Rep.": "\u591a\u7c73\u5c3c\u52a0",
"Palestine": "\u5df4\u52d2\u65af\u5766",
"Bahamas": "\u5df4\u54c8\u9a6c",
"Timor-Leste": "\u4e1c\u5e1d\u6c76",
"Afghanistan": "\u963f\u5bcc\u6c57",
"Guinea-Bissau": "\u51e0\u5185\u4e9a\u6bd4\u7ecd",
"C\u00f4te d'Ivoire": "\u79d1\u7279\u8fea\u74e6",
"Siachen Glacier": "\u9521\u4e9a\u7434\u51b0\u5ddd",
"Br. Indian Ocean Ter.": "\u82f1\u5c5e\u5370\u5ea6\u6d0b\u9886\u571f",
"Angola": "\u5b89\u54e5\u62c9",
"Albania": "\u963f\u5c14\u5df4\u5c3c\u4e9a",
"United Arab Emirates": "\u963f\u8054\u914b",
"Argentina": "\u963f\u6839\u5ef7",
"Armenia": "\u4e9a\u7f8e\u5c3c\u4e9a",
"French Southern and Antarctic Lands": "\u6cd5\u5c5e\u5357\u534a\u7403\u548c\u5357\u6781\u9886\u5730",
"Australia": "\u6fb3\u5927\u5229\u4e9a",
"Austria": "\u5965\u5730\u5229",
"Azerbaijan": "\u963f\u585e\u62dc\u7586",
"Burundi": "\u5e03\u9686\u8fea",
"Belgium": "\u6bd4\u5229\u65f6",
"Benin": "\u8d1d\u5b81",
"Burkina Faso": "\u5e03\u57fa\u7eb3\u6cd5\u7d22",
"Bangladesh": "\u5b5f\u52a0\u62c9\u56fd",
"Bulgaria": "\u4fdd\u52a0\u5229\u4e9a",
"The Bahamas": "\u5df4\u54c8\u9a6c",
"Bosnia and Herz.": "\u6ce2\u65af\u5c3c\u4e9a\u548c\u9ed1\u585e\u54e5\u7ef4\u90a3",
"Belarus": "\u767d\u4fc4\u7f57\u65af",
"Belize": "\u4f2f\u5229\u5179",
"Bermuda": "\u767e\u6155\u5927",
"Bolivia": "\u73bb\u5229\u7ef4\u4e9a",
"Brazil": "\u5df4\u897f",
"Brunei": "\u6587\u83b1",
"Bhutan": "\u4e0d\u4e39",
"Botswana": "\u535a\u8328\u74e6\u7eb3",
"Central African Rep.": "\u4e2d\u975e\u5171\u548c\u56fd",
"Canada": "\u52a0\u62ff\u5927",
"Switzerland": "\u745e\u58eb",
"Chile": "\u667a\u5229",
"China": "\u4e2d\u56fd",
"Ivory Coast": "\u8c61\u7259\u6d77\u5cb8",
"Cameroon": "\u5580\u9ea6\u9686",
"Dem. Rep. Congo": "\u521a\u679c\uff08\u91d1\uff09",
"Congo": "\u521a\u679c\uff08\u5e03\uff09",
"Colombia": "\u54e5\u4f26\u6bd4\u4e9a",
"Costa Rica": "\u54e5\u65af\u8fbe\u9ece\u52a0",
"Cuba": "\u53e4\u5df4",
"N. Cyprus": "\u5317\u585e\u6d66\u8def\u65af",
"Cyprus": "\u585e\u6d66\u8def\u65af",
"Czech Rep.": "\u6377\u514b",
"Germany": "\u5fb7\u56fd",
"Djibouti": "\u5409\u5e03\u63d0",
"Denmark": "\u4e39\u9ea6",
"Algeria": "\u963f\u5c14\u53ca\u5229\u4e9a",
"Ecuador": "\u5384\u74dc\u591a\u5c14",
"Egypt": "\u57c3\u53ca",
"Eritrea": "\u5384\u7acb\u7279\u91cc\u4e9a",
"Spain": "\u897f\u73ed\u7259",
"Estonia": "\u7231\u6c99\u5c3c\u4e9a",
"Ethiopia": "\u57c3\u585e\u4fc4\u6bd4\u4e9a",
"Finland": "\u82ac\u5170",
"Fiji": "\u6590",
"Falkland Islands": "\u798f\u514b\u5170\u7fa4\u5c9b",
"France": "\u6cd5\u56fd",
"Gabon": "\u52a0\u84ec",
"United Kingdom": "\u82f1\u56fd",
"Georgia": "\u683c\u9c81\u5409\u4e9a",
"Ghana": "\u52a0\u7eb3",
"Guinea": "\u51e0\u5185\u4e9a",
"Gambia": "\u5188\u6bd4\u4e9a",
"Guinea Bissau": "\u51e0\u5185\u4e9a\u6bd4\u7ecd",
"Eq. Guinea": "\u8d64\u9053\u51e0\u5185\u4e9a",
"Greece": "\u5e0c\u814a",
"Greenland": "\u683c\u9675\u5170",
"Guatemala": "\u5371\u5730\u9a6c\u62c9",
"French Guiana": "\u6cd5\u5c5e\u572d\u4e9a\u90a3",
"Guyana": "\u572d\u4e9a\u90a3",
"Honduras": "\u6d2a\u90fd\u62c9\u65af",
"Croatia": "\u514b\u7f57\u5730\u4e9a",
"Haiti": "\u6d77\u5730",
"Hungary": "\u5308\u7259\u5229",
"Indonesia": "\u5370\u5ea6\u5c3c\u897f\u4e9a",
"India": "\u5370\u5ea6",
"Ireland": "\u7231\u5c14\u5170",
"Iran": "\u4f0a\u6717",
"Iraq": "\u4f0a\u62c9\u514b",
"Iceland": "\u51b0\u5c9b",
"Israel": "\u4ee5\u8272\u5217",
"Italy": "\u610f\u5927\u5229",
"Jamaica": "\u7259\u4e70\u52a0",
"Jordan": "\u7ea6\u65e6",
"Japan": "\u65e5\u672c\u672c\u571f",
"Kazakhstan": "\u54c8\u8428\u514b\u65af\u5766",
"Kenya": "\u80af\u5c3c\u4e9a",
"Kyrgyzstan": "\u5409\u5c14\u5409\u65af\u65af\u5766",
"Cambodia": "\u67ec\u57d4\u5be8",
"Korea": "\u97e9\u56fd",
"Kosovo": "\u79d1\u7d22\u6c83",
"Kuwait": "\u79d1\u5a01\u7279",
"Lao PDR": "\u8001\u631d",
"Lebanon": "\u9ece\u5df4\u5ae9",
"Liberia": "\u5229\u6bd4\u91cc\u4e9a",
"Libya": "\u5229\u6bd4\u4e9a",
"Sri Lanka": "\u65af\u91cc\u5170\u5361",
"Lesotho": "\u83b1\u7d22\u6258",
"Lithuania": "\u7acb\u9676\u5b9b",
"Luxembourg": "\u5362\u68ee\u5821",
"Latvia": "\u62c9\u8131\u7ef4\u4e9a",
"Morocco": "\u6469\u6d1b\u54e5",
"Moldova": "\u6469\u5c14\u591a\u74e6",
"Madagascar": "\u9a6c\u8fbe\u52a0\u65af\u52a0",
"Mexico": "\u58a8\u897f\u54e5",
"Macedonia": "\u9a6c\u5176\u987f",
"Mali": "\u9a6c\u91cc",
"Myanmar": "\u7f05\u7538",
"Montenegro": "\u9ed1\u5c71",
"Mongolia": "\u8499\u53e4",
"Mozambique": "\u83ab\u6851\u6bd4\u514b",
"Mauritania": "\u6bdb\u91cc\u5854\u5c3c\u4e9a",
"Malawi": "\u9a6c\u62c9\u7ef4",
"Malaysia": "\u9a6c\u6765\u897f\u4e9a",
"Namibia": "\u7eb3\u7c73\u6bd4\u4e9a",
"New Caledonia": "\u65b0\u5580\u91cc\u591a\u5c3c\u4e9a",
"Niger": "\u5c3c\u65e5\u5c14",
"Nigeria": "\u5c3c\u65e5\u5229\u4e9a",
"Nicaragua": "\u5c3c\u52a0\u62c9\u74dc",
"Netherlands": "\u8377\u5170",
"Norway": "\u632a\u5a01",
"Nepal": "\u5c3c\u6cca\u5c14",
"New Zealand": "\u65b0\u897f\u5170",
"Oman": "\u963f\u66fc",
"Pakistan": "\u5df4\u57fa\u65af\u5766",
"Panama": "\u5df4\u62ff\u9a6c",
"Peru": "\u79d8\u9c81",
"Philippines": "\u83f2\u5f8b\u5bbe",
"Papua New Guinea": "\u5df4\u5e03\u4e9a\u65b0\u51e0\u5185\u4e9a",
"Poland": "\u6ce2\u5170",
"Puerto Rico": "\u6ce2\u591a\u9ece\u5404",
"Dem. Rep. Korea": "\u671d\u9c9c",
"Portugal": "\u8461\u8404\u7259",
"Paraguay": "\u5df4\u62c9\u572d",
"Qatar": "\u5361\u5854\u5c14",
"Romania": "\u7f57\u9a6c\u5c3c\u4e9a",
"Russia": "\u4fc4\u7f57\u65af",
"Rwanda": "\u5362\u65fa\u8fbe",
"W. Sahara": "\u897f\u6492\u54c8\u62c9",
"Saudi Arabia": "\u6c99\u7279\u963f\u62c9\u4f2f",
"Sudan": "\u82cf\u4e39",
"S. Sudan": "\u5357\u82cf\u4e39",
"Senegal": "\u585e\u5185\u52a0\u5c14",
"Solomon Is.": "\u6240\u7f57\u95e8\u7fa4\u5c9b",
"Sierra Leone": "\u585e\u62c9\u5229\u6602",
"El Salvador": "\u8428\u5c14\u74e6\u591a",
"Somaliland": "\u7d22\u9a6c\u91cc\u5170",
"Somalia": "\u7d22\u9a6c\u91cc",
"Serbia": "\u585e\u5c14\u7ef4\u4e9a",
"Suriname": "\u82cf\u91cc\u5357",
"Slovakia": "\u65af\u6d1b\u4f10\u514b",
"Slovenia": "\u65af\u6d1b\u6587\u5c3c\u4e9a",
"Sweden": "\u745e\u5178",
"Swaziland": "\u65af\u5a01\u58eb\u5170",
"Syria": "\u53d9\u5229\u4e9a",
"Chad": "\u4e4d\u5f97",
"Togo": "\u591a\u54e5",
"Thailand": "\u6cf0\u56fd",
"Tajikistan": "\u5854\u5409\u514b\u65af\u5766",
"Turkmenistan": "\u571f\u5e93\u66fc\u65af\u5766",
"East Timor": "\u4e1c\u5e1d\u6c76",
"Trinidad and Tobago": "\u7279\u91cc\u5c3c\u8fbe\u548c\u591a\u5df4\u54e5",
"Tunisia": "\u7a81\u5c3c\u65af",
"Turkey": "\u571f\u8033\u5176",
"Tanzania": "\u5766\u6851\u5c3c\u4e9a",
"Uganda": "\u4e4c\u5e72\u8fbe",
"Ukraine": "\u4e4c\u514b\u5170",
"Uruguay": "\u4e4c\u62c9\u572d",
"United States": "\u7f8e\u56fd",
"Uzbekistan": "\u4e4c\u5179\u522b\u514b\u65af\u5766",
"Venezuela": "\u59d4\u5185\u745e\u62c9",
"Vietnam": "\u8d8a\u5357",
"Vanuatu": "\u74e6\u52aa\u963f\u56fe",
"West Bank": "\u897f\u5cb8",
"Yemen": "\u4e5f\u95e8",
"South Africa": "\u5357\u975e",
"Zambia": "\u8d5e\u6bd4\u4e9a",
"Zimbabwe": "\u6d25\u5df4\u5e03\u97e6"
},
"mapValueCalculation": "sum",
"showLegendSymbol": false,
"emphasis": {},
"rippleEffect": {
"show": true,
"brushType": "stroke",
"scale": 2.5,
"period": 4
}
}],
"legend": [{
"data": [
"\u4e16\u754c\u75ab\u60c5\u5206\u5e03"
],
"selected": {
"\u4e16\u754c\u75ab\u60c5\u5206\u5e03": true
},
"show": true,
"padding": 5,
"itemGap": 10,
"itemWidth": 25,
"itemHeight": 14
}],
"tooltip": {
"show": true,
"trigger": "item",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"showContent": true,
"alwaysShowContent": false,
"showDelay": 0,
"hideDelay": 100,
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5
},
"title": [{
"text": "\u56fd\u5916\u75ab\u60c5\u60c5\u51b5",
"padding": 5,
"itemGap": 10
}],
"visualMap": {
"show": true,
"type": "piecewise",
"min": 0,
"max": 1000000,
"inRange": {
"color": [
"#50a3ba",
"#eac763",
"#d94e5d"
]
},
"calculable": true,
"inverse": false,
"splitNumber": 5,
"orient": "vertical",
"showLabel": true,
"itemWidth": 20,
"itemHeight": 14,
"borderWidth": 0
}
};
chart_85b008b844134681a766161f43a23990.setOption(option_85b008b844134681a766161f43a23990);
</script>
</div>
<div class="big-content-right2">
<div id="83cd319a55f24581b4e70046feb268d8" class="chart-container"
style="width:100%; height:100%;"></div>
<script>
var chart_83cd319a55f24581b4e70046feb268d8 = echarts.init(
document.getElementById('83cd319a55f24581b4e70046feb268d8'), 'white', {
renderer: 'canvas'
});
var option_83cd319a55f24581b4e70046feb268d8 = {
"animation": true,
"animationThreshold": 2000,
"animationDuration": 1000,
"animationEasing": "cubicOut",
"animationDelay": 0,
"animationDurationUpdate": 300,
"animationEasingUpdate": "cubicOut",
"animationDelayUpdate": 0,
"color": [
"#C9DA36",
"#9ECB3C",
"#6DBC49",
"#3DBA78",
"#14ADCF",
"#209AC9",
"#2C6BA0",
"#2D3D8E",
"#6A368B#7D3990",
"#A63F98",
"#C31C88",
"#D5225B",
"#D02C2A",
"#D44C2D",
"#D99D21",
"#CF7B25#CF7B25"
],
"series": [{
"type": "pie",
"clockwise": true,
"data": [{
"name": "\u897f\u85cf",
"value": 51
},
{
"name": "\u9752\u6d77",
"value": 44
},
{
"name": "\u8d35\u5dde",
"value": 33
},
{
"name": "\u6c5f\u82cf",
"value": 31
},
{
"name": "\u65b0\u7586",
"value": 31
},
{
"name": "\u5185\u8499\u53e4",
"value": 31
},
{
"name": "\u6d77\u5357",
"value": 30
},
{
"name": "\u5409\u6797",
"value": 26
},
{
"name": "\u5c71\u897f",
"value": 25
},
{
"name": "\u91cd\u5e86",
"value": 25
},
{
"name": "\u5b89\u5fbd",
"value": 23
},
{
"name": "\u6c5f\u897f",
"value": 22
},
{
"name": "\u6cb3\u5317",
"value": 22
},
{
"name": "\u6e56\u5357",
"value": 22
},
{
"name": "\u5b81\u590f",
"value": 17
},
{
"name": "\u6cb3\u5357",
"value": 9
},
{
"name": "\u4e91\u5357",
"value": 4
},
{
"name": "\u6e56\u5317",
"value": 3
}
],
"radius": [
"30%",
"135%"
],
"center": [
"50%",
"65%"
],
"roseType": "area",
"label": {
"show": true,
"position": "inside",
"margin": 8,
"fontSize": 12,
"fontStyle": "italic",
"fontWeight": "bold",
"fontFamily": "Microsoft YaHei",
"formatter": "{b}:{c}\u5929"
},
"rippleEffect": {
"show": true,
"brushType": "stroke",
"scale": 2.5,
"period": 4
}
}],
"legend": [{
"data": [
"\u897f\u85cf",
"\u9752\u6d77",
"\u8d35\u5dde",
"\u6c5f\u82cf",
"\u65b0\u7586",
"\u5185\u8499\u53e4",
"\u6d77\u5357",
"\u5409\u6797",
"\u5c71\u897f",
"\u91cd\u5e86",
"\u5b89\u5fbd",
"\u6c5f\u897f",
"\u6cb3\u5317",
"\u6e56\u5357",
"\u5b81\u590f",
"\u6cb3\u5357",
"\u4e91\u5357",
"\u6e56\u5317"
],
"selected": {},
"show": false,
"padding": 5,
"itemGap": 10,
"itemWidth": 25,
"itemHeight": 14
}],
"tooltip": {
"show": true,
"trigger": "item",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"showContent": true,
"alwaysShowContent": false,
"showDelay": 0,
"hideDelay": 100,
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5
},
"title": [{
"text": "\u591a\u7701\u533a\u5e02\u786e\u8bca\u75c5\u4f8b\u8fde\u7eed\u96f6\u65b0\u589e",
"padding": 5,
"itemGap": 10
}],
"toolbox": {
"show": true,
"orient": "horizontal",
"itemSize": 15,
"itemGap": 10,
"left": "80%",
"feature": {
"saveAsImage": {
"type": "png",
"backgroundColor": "auto",
"connectedBackgroundColor": "#fff",
"show": true,
"title": "\u4fdd\u5b58\u4e3a\u56fe\u7247",
"pixelRatio": 1
},
"restore": {
"show": true,
"title": "\u8fd8\u539f"
},
"dataView": {
"show": true,
"title": "\u6570\u636e\u89c6\u56fe",
"readOnly": false,
"lang": [
"\u6570\u636e\u89c6\u56fe",
"\u5173\u95ed",
"\u5237\u65b0"
],
"backgroundColor": "#fff",
"textareaColor": "#fff",
"textareaBorderColor": "#333",
"textColor": "#000",
"buttonColor": "#c23531",
"buttonTextColor": "#fff"
},
"dataZoom": {
"show": true,
"title": {
"zoom": "\u533a\u57df\u7f29\u653e",
"back": "\u533a\u57df\u7f29\u653e\u8fd8\u539f"
},
"icon": {},
"xAxisIndex": false,
"yAxisIndex": false,
"filterMode": "filter"
},
"magicType": {
"show": true,
"type": [
"line",
"bar",
"stack",
"tiled"
],
"title": {
"line": "\u5207\u6362\u4e3a\u6298\u7ebf\u56fe",
"bar": "\u5207\u6362\u4e3a\u67f1\u72b6\u56fe",
"stack": "\u5207\u6362\u4e3a\u5806\u53e0",
"tiled": "\u5207\u6362\u4e3a\u5e73\u94fa"
},
"icon": {}
},
"brush": {
"icon": {},
"title": {
"rect": "\u77e9\u5f62\u9009\u62e9",
"polygon": "\u5708\u9009",
"lineX": "\u6a2a\u5411\u9009\u62e9",
"lineY": "\u7eb5\u5411\u9009\u62e9",
"keep": "\u4fdd\u6301\u9009\u62e9",
"clear": "\u6e05\u9664\u9009\u62e9"
}
}
}
}
};
chart_83cd319a55f24581b4e70046feb268d8.setOption(option_83cd319a55f24581b4e70046feb268d8);
</script>
</div>
</div>
</div>
</div>
<script>
//将函数封装名为getMore的函数
let data = {
firstData: 'noOne',
secondData: 'noTwo'
};
let url = 'http://127.0.0.1:5000/';
let dataSource = {}; //声明全局变量，使axios到的数据可在全局使用。
getMore() {
console.log(12312)
}
// getMore (url, data).then(res => {
// console.log(res.data)
// dataSource = res.data//将请求得到的参数赋值给全局变量dataSource
// } ).catch(error => {
// console.log(error)})
</script>
</body>
</html>
css
index.css
.data_content{
/*overflow-x: hidden;*/
min-width: 1366px;
padding-top: 20px;
padding-bottom: 20px;
}
.data_content .data_time{
width: 340px;
height: 35px;
background-color: #2C58A6;
line-height: 35px;
color: #fff;
font-size: 12.8px;
position: relative;
margin-bottom: 25px;
margin-left: 20px;
text-align: center;
}
.data_content .data_time img{
position: absolute;
top: 8px;
left: 15px;
}
.data_content .data_info{
width: calc(100% - 40px);
margin-bottom: 40px;
height: 110px;
margin-left: 20px;
}
.data_content .data_info .info_1{
width: 40%;
height: 110px;
}
.data_content .data_info .info_1>.text_1{
width: calc(100% - 25px);
background-color: #034c6a;
height: 110px;
}
.data_content .data_info .info_2{
width: 31%;
height: 110px;
}
.data_content .data_info .info_2>.text_2{
width: calc(100% - 25px);
background-color: #034c6a;
height: 110px;
}
.data_content .data_info .info_3{
width: 29%;
height: 110px;
}
.data_content .data_info .info_3>.text_3{
width:100%;
background-color: #034c6a;
height: 110px;
}
.data_content .data_info>div.info_1>.text_1>div{
width: 33.333%;
position: relative;
}
.data_content .data_info>div.info_2>div>div,
.data_content .data_info>div.info_3>div>div{
width: 50%;
position: relative;
}
.data_content .data_info img{
position: absolute;
top: 35px;
left: 15px;
}
.data_content .data_info>div>div>div>div{
margin-left:65px;
margin-top: 23px;
}
.data_content .data_info>div.info_2>div>div>div{
margin-left: 70px;
margin-top: 23px;
}
.data_content .data_info p:nth-child(1){
color:#fff;
font-size: 12.8px;
}
.data_content .data_info p:nth-child(2){
font-weight: 600;
font-size: 28px;
color:#ffff43;
}
.data_content .data_info>div.info_2 p:nth-child(2){
font-weight: 600;
font-size: 28px;
color:#25f3e6;
}
.data_content .data_info>div.info_3 p:nth-child(2){
font-weight: 600;
font-size: 28px;
color:#ff4e4e;
}
.data_content .data_main{
width: calc(100% - 40px);
margin-bottom: 40px;
height: 615px;
margin-left: 20px;
}
.data_content .data_main .main_left{
width: 24%;
}
.data_content .data_main .main_left>div{
width: 100%;
height: 280px;
box-sizing: border-box;
border: 1px solid #2C58A6;
position: relative;
box-shadow: 0 0 10px #2C58A6;
}
.data_content .data_main .main_left div.left_1{
/*background: url("../img/chart_1.png") no-repeat center;*/
}
.data_content .data_main .main_left div.left_2{
/*background: url("../img/chart_2.png") no-repeat center;*/
}
.data_content .data_main .main_left div:nth-child(1){
margin-bottom: 50px;
}
.data_content .data_main .main_left div .main_title{
width: 180px;
height: 35px;
line-height: 33px;
background-color: #2C58A6;
border-radius: 18px;
position: absolute;
top: -17px;
left:50%;
margin-left: -90px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
padding-left: 45px;
z-index: 1000;
}
.data_content .data_main .main_left div .main_title img{
position: absolute;
top: 8px;
left: 20px;
}
.data_content .data_main .main_center{
width: 52%;
height: 610px;
}
.data_content .data_main .main_center .center_text{
width: calc(100% - 50px);
height: 610px;
margin-left: 25px;
margin-right: 25px;
box-sizing: border-box;
border: 1px solid #2C58A6;
box-shadow: 0px 0px 6px #2C58A6;
position: relative;
}
.l_t_line{
width: 5px;
height: 24px;
left: -3px;
top: -3px;
}
.t_l_line{
height: 5px;
width: 26px;
left: -3px;
top: -3px;
}
.t_line_box {
position: absolute;
width: 100%;
height: 100%;
}
.t_line_box i{
background-color: #4788fb;
box-shadow: 0px 0px 10px #4788fb;
position: absolute;
}
.t_r_line{
height: 5px;
width: 26px;
right: -3px;
top: -3px;
}
.r_t_line{
width: 5px;
height: 24px;
right: -3px;
top: -3px;
}
.l_b_line{
width: 5px;
height: 24px;
left: -3px;
bottom: -3px;
}
.b_l_line{
height: 5px;
width: 26px;
left: -3px;
bottom: -3px;
}
.r_b_line{
width: 5px;
height: 24px;
right: -3px;
bottom: -3px;
}
.b_r_line{
height: 5px;
width: 26px;
right: -3px;
bottom: -3px;
}
.data_content .data_main .main_center .main_title{
width: 180px;
height: 35px;
line-height: 33px;
background-color: #2C58A6;
border-radius: 18px;
position: absolute;
top: -17px;
left:50%;
margin-left: -90px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
padding-left: 45px;
z-index: 1000;
}
.data_content .data_main .main_center .main_title img{
position: absolute;
top: 8px;
left: 20px;
}
.data_content .data_main .main_right{
width: 24%;
}
.data_content .data_main .main_right>div{
width: 100%;
height: 280px;
box-sizing: border-box;
border: 1px solid #2C58A6;
position: relative;
box-shadow: 0 0 10px #2C58A6;
}
.data_content .data_main .main_right div.right_1 .choice{
position: absolute;
top: 25px;
right: 30px;
z-index: 1000;
}
.data_content .data_main .main_right div.right_1 .choice label{
color:#fff;
}
.data_content .data_main .main_right div.right_2{
/*background: url("../img/chart_4.png") no-repeat center;*/
}
.data_content .data_main .main_right div.right_2 .chart_text {
width: 18%;
color:#fff;
text-align: center;
margin-top: 12px;
}
.data_content .data_main .main_right div.right_2 .chart_text p{
margin-top: 21px;
}
.data_content .data_main .main_right div.right_2 .chart_text p img{
margin-right: 5px;
margin-top: -4px;
}
.data_content .data_main .main_right div.right_2 .chart_text p:nth-child(1){
font-size: 14px;
font-weight: 600;
}
.data_content .data_main .main_right div.right_2 .text_sum{
text-align: center;
color:#ffff43;
font-weight: 600;
}
.data_content .data_main .main_right div.right_2 .text_sum div:nth-child(2){
font-size: 18px;
font-weight: 600;
}
.data_content .data_main .main_right div:nth-child(1){
margin-bottom: 50px;
}
.data_content .data_main .main_right div .main_title{
width: 180px;
height: 35px;
line-height: 33px;
background-color: #2C58A6;
border-radius: 18px;
position: absolute;
top: -17px;
left:50%;
margin-left: -90px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
padding-left: 45px;
}
.data_content .data_main .main_right div .main_title img{
position: absolute;
top: 8px;
left: 20px;
}
.data_content .data_bottom{
width: calc(100% - 40px);
height: 280px;
margin-left: 20px;
}
.data_content .data_bottom div{
}
.data_content .data_bottom .bottom_1{
width: 24%;
height: 280px;
position: relative;
box-sizing: border-box;
border: 1px solid #2C58A6;
box-shadow: 0 0 10px #2C58A6;
}
.data_content .data_bottom .bottom_center{
width: 52%;
height: 280px;
}
.data_content .data_bottom .bottom_2{
width: calc(50% - 35px);
height: 280px;
position: relative;
box-sizing: border-box;
border: 1px solid #2C58A6;
margin-left: 25px;
box-shadow: 0 0 10px #2C58A6;
}
.data_content .data_bottom .bottom_3{
width: calc(50% - 40px);
height: 280px;
position: relative;
box-sizing: border-box;
border: 1px solid #2C58A6;
margin-left:25px;
box-shadow: 0 0 10px #2C58A6;
}
.data_content .data_bottom .bottom_4{
width: 24%;
height: 280px;
position: relative;
box-sizing: border-box;
border: 1px solid #2C58A6;
box-shadow: 0 0 10px #2C58A6;
}
.data_content .data_bottom div .main_title{
width: 220px;
height: 35px;
line-height: 33px;
background-color: #2C58A6;
border-radius: 18px;
position: absolute;
top: -17px;
left:50%;
margin-left: -110px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
padding-left: 45px;
}
.data_content .data_bottom div .main_title img{
position: absolute;
top: 8px;
left: 20px;
}
.data_content .data_bottom div .main_table tr{
height: 42px;
}
.data_content .data_bottom div .main_table{
width: 100%;
margin-top: 25px;
}
.data_content .data_bottom div .main_table table{
width: 100%;
}
.data_content .data_bottom div .main_table thead tr{
height: 42px;
}
.data_content .data_bottom div .main_table th{
font-size: 12px;
font-weight: 600;
color:#61d2f7;
text-align: center;
}
.data_content .data_bottom div .main_table th:nth-child(1){
}
.data_content .data_bottom div .main_table th:nth-child(2){
}
.data_content .data_bottom div .main_table td{
color:#fff;
font-size: 10px;
text-align: center;
}
.data_content .data_bottom div .main_table tbody tr:nth-child(1),
.data_content .data_bottom div .main_table tbody tr:nth-child(3),
.data_content .data_bottom div .main_table tbody tr:nth-child(5){
background-color: #072951;
box-shadow:-10px 0px 15px #2C58A6 inset, /*左边阴影*/
10px 0px 15px #2C58A6 inset; /*右边阴影*/
}
.t_btn8,.t_btn2,.t_btn3{
position: relative;
z-index: 100;
cursor: pointer;
}js
代码直接下载我的百度网盘安装包就可以用了 或者去gitee 下载下来。
百度网盘提取源码
链接：https://pan.baidu.com/s/1lExEQkIFwRezRmj1vKyYHg?pwd=yzxf
提取码：yzxf