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': '美国',
// ....其他省略 ，见文章末
};
// 数据
let dataMap = [{
"name": "俄罗斯",
"value": 10
},
{
"name": "加拿大",
"value": 0
},
{
"name": "中国",
"value": 5
},
{
"name": "美国",
"value": 7
}
]
let option = {
backgroundColor: '#000a22',
title: { //地图显示标题
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, //绑定数据
nameMap: nameComparison,
symbolSize: 12,
label: {
show: true,
color: 'white',
fontSize: 10
},
itemStyle: {
normal: {
borderWidth: 1, //边际线大小
borderColor: '#00ffff', //边界线颜色
areaColor: '#09295b' //默认区域颜色
},
emphasis: {
show: true,
areaColor: '#3066ba', //鼠标滑过区域颜色
label: {
show: true,
textStyle: {
color: '#fff'
}
}
}
}
}],
};
worldChart.setOption(option);
</script>
</html>
