<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../../utils/echarts.min.js"></script>
<script src="./../../utils/world.js"></script>
<script src="./../../utils/nameMap.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body,
html,
#main {
height: 100%;
width: 100%;
}
.active{
color: #8361BB;
margin: 0 6px;
font-weight: 600;
}
</style>
</head>
<body>
<div id="main"></div>
<script>
const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
echarts.registerMap('world', world);
const option = {
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: .5,
formatter: function (params) {
let data = params.data || {}
let textArr = []
data.text?.forEach(item => {
const value = (item.value + '').split('.');
const valueStr = value[0].replace(
/(\d{1,3})(?=(?:\d{3})+(?!\d))/g,
'$1,'
);
textArr.push(`${item.title}<span class="active">${valueStr}</span>H<br/>`)
})
return params.name + '<br/>' + textArr.join('');
}
},
visualMap: {
show : false
},
toolbox: {
show: true,
left: 'left',
top: 'top',
feature: {
dataView: {
readOnly: false
},
restore: {},
saveAsImage: {}
}
},
series: [{
name: 'USA aaa',
nameMap, //引入中文版 替换为中文
type: 'map',
roam: true,
map: 'world',
emphasis: {
label: {
show: true
}
},
data: [{
name: 'China',
text: [
{
title : 'title 1',
value : 300
},
{
title : 'title 2',
value : 370
},
{
title : 'title 3',
value : 300
},
{
title : 'title 4',
value : 300
},
{
title : 'title 5',
value : 300
},
{
title : 'title 6',
value : 500
},
{
title : 'title 7',
value : 300
}
],
itemStyle: {
color: '#8361BB'
}
},
]
}]
};
myChart.setOption(option);
option && myChart.setOption(option);
</script>
</body>
</html>
world.js 世界地图下载https://download.csdn.net/download/Jie0817/76626391
nameMap.js 中文版下载https://download.csdn.net/download/Jie0817/76626675