2.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="worldMap" style="width: 100%;height:120vh;"></div>
</body>
<script src="./files/js/echarts.min.js"></script>
<script src="./files/js/world.js"></script>
<script>
// 繪制圖表
let worldChart = echarts.init(document.getElementById('worldMap'));
// 國家名英文中文對比
let nameComparison = {
'Canada': '加拿大',
'Russia': '俄羅斯',
'China': '中國',
'United States': '美國',
// ....其他省略 拦止，見文章末
};
// 數(shù)據(jù)
let dataMap = [{
"name": "俄羅斯",
"value": 10
},
{
"name": "加拿大",
"value": 0
},
{
"name": "中國",
"value": 5
},
{
"name": "美國",
"value": 7
}
]
let option = {
backgroundColor: '#000a22',
title: { //地圖顯示標(biāo)題
show: true,
text: '',
top: "30px",
left: 'center',
textStyle: {
color: '#000'
}
},
toolbox: { //工具欄
show: false,
orient: 'vertical',
top: 50,
itemGap: 20,
left: 30,
feature: {
dataView: {
readOnly: false
},
restore: {},
saveAsImage: {}
}
},
tooltip: { //提示框組件
show: true,
trigger: 'item',
formatter: ''
},
series: [{
name: "使用情況",
type: 'map',
mapType: 'world',
roam: true,
zoom: 1,
mapLocation: {
y: 100
},
data: dataMap, //綁定數(shù)據(jù)
nameMap: nameComparison,
symbolSize: 12,
label: {
show: true,
color: 'white',
fontSize: 10
},
itemStyle: {
normal: {
borderWidth: 1, //邊際線大小
borderColor: '#00ffff', //邊界線顏色
areaColor: '#09295b' //默認(rèn)區(qū)域顏色
},
emphasis: {
show: true,
areaColor: '#3066ba', //鼠標(biāo)滑過區(qū)域顏色
label: {
show: true,
textStyle: {
color: '#fff'
}
}
}
}
}],
};
worldChart.setOption(option);
</script>
</html>
