-
Notifications
You must be signed in to change notification settings - Fork 39
/
Copy pathdemo-echarts.html
102 lines (94 loc) · 2.97 KB
/
demo-echarts.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
text-align: center;
}
table {
margin: auto;
text-align: left;
}
footer{
padding: 2.5em;
}
#chart-container{
height: 520px;
}
</style>
</head>
<body>
<h2>Map</h2>
<div id="chart-container"></div>
<h2>Table</h2>
<div id="table-container"></div>
<footer>
<a href="https://github.com/Surbowl/world-geo-json-zh">GitHub - Surbowl/world-geo-json-zh</a>
</footer>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<script type="module">
// load word geo json zh data
import worldGeoJsonZh from 'https://cdn.jsdelivr.net/npm/@surbowl/world-geo-json-zh/+esm'
console.log(worldGeoJsonZh)
var chartDom = document.getElementById("chart-container")
var tableDom = document.getElementById("table-container")
// init chart
var myChart = echarts.init(chartDom);
echarts.registerMap('WorldZh', worldGeoJsonZh);
// echarts map options
var option = {
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2
},
series: [
{
name: 'Demo',
type: 'map',
roam: true,
map: 'WorldZh',
nameProperty: 'name',
emphasis: {
label: {
show: true
}
},
data: [ ]
}
]
};
myChart.setOption(option);
// init table
var props = worldGeoJsonZh.features.map(f => f.properties);
var table = convertArrayToHtmlTable(props);
tableDom.appendChild(table);
// function to convert JSON data to HTML table
function convertArrayToHtmlTable(arr) {
let table = document.createElement("table");
let cols = Object.keys(arr[0]);
let thead = document.createElement("thead");
let tr = document.createElement("tr");
cols.forEach((item) => {
let th = document.createElement("th");
th.innerText = item;
tr.appendChild(th);
});
thead.appendChild(tr);
table.append(tr)
arr.forEach((item) => {
let tr = document.createElement("tr");
let vals = Object.values(item);
vals.forEach((elem) => {
let td = document.createElement("td");
td.innerText = elem;
tr.appendChild(td);
});
table.appendChild(tr);
});
return table;
}
</script>
</body>
</html>