直接展示效果图：
我们需要引入两个文件：
echarts.js 官网地址下载：快速上手 - Handbook - Apache ECharts
chain.js 这个官网已经找不到了，需要自行搜寻下载
也可以私信我(网上下载的China.js会导致省名称定为不准确，不居中显示)！！！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>中国地图</title>
<script type="text/javascript" src="/Users/ly/Downloads/echarts.js"></script>
<script type="text/javascript" src="/Users/ly/Downloads/china.js"></script>
</head>
<body>
<div id="map" style="height:800px;"></div>
<script type="text/javascript">
const data_list = [{
name: '江苏',
value: 0
}, {
name: '安徽',
value: 1
}, {
name: '湖北',
value: 1
}, {
name: '湖南',
value: 0
}]
var map_chart = echarts.init(document.getElementById('map'));
option = {
tooltip: {
trigger: 'item',
formatter: (params) => {
return ${params.name};
}
},
series: [{
name: '数据',
type: 'map',
mapType: 'china',
roam: false,
selectedMode: false,
itemStyle: {
normal: {
areaColor: '#9ac2fe', //默认区块颜色
label: {
show: true,
textStyle: {
color: 'black',
//fontWeight: 'bold',
//fontFamily:'STHupo'
}
}
},
//鼠标经过颜色和字体
emphasis: {
areaColor: '#253582',
label: {
show: true,
textStyle: {color: '#fff'}
},
},
},
data: data_list
}]
};
map_chart.setOption(option);
}
</script>
</body>
</html>
