https://blog.youkuaiyun.com/2301_78542842/article/details/139608529?ops_request_misc=%257B%2522request%255Fid%2522%253A%252297e00f3ce874144ed9759d16ccd5b138%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=97e00f3ce874144ed9759d16ccd5b138&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-1-139608529-null-null.142v100pc_search_result_base8&utm_term=echarts%E7%9C%81%E5%B8%82%E5%8C%BA%E5%8E%BF%E5%9C%B0%E5%9B%BE&spm=1018.2226.3001.4187
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.5.1.min.js"></script>
<script src="echarts5.5.0.js"></script>
<title>Document</title>
<script>
var s = 'https://geo.datav.aliyun.com/areas_v3/bound/511300_full.json'; //json 来源地址 //https://datav.aliyun.com/portal/school/atlas/area_selector
var data = JSON.parse(s);
console.log(data)
$(function(){
initEc(data);
})
function initEc(d){
// 初始化统计图对象
var myChart = echarts.init($("#chartsDOM")[0]);
// 注册地图(数据放在axios返回对象的data中哦)
echarts.registerMap('NC', d);
var option = {
visualMap: {
min: 555.5,
max: 2235,
realtime: false,
calculable: true,
inRange: {
color: ['gray','lightskyblue', 'yellow', 'orangered']
}
},
title: {
text: '南充市区县面积图(/平方公里)'
},
tooltip: {},
series: [
{
name: '南充市区县面积图(/平方公里)',
type: 'map',
map: 'NC',// 这个是上面注册时的名字哦,registerMap('这个名字保持一致')
label: {
show: true
},
data: [
{ name: '阆中市', value: 1878 },
{ name: '仪陇县', value: 1767 },
{ name: '南部县', value: 2235 },
{ name: '营山县', value: 1633 },
{ name: '蓬安县', value: 1334 },
{ name: '顺庆区', value: 555.5 },
{ name: '西充县', value: 1106 },
{ name: '高坪区', value: 806 },
{ name: '嘉陵区', value: 1278 }
]
}
]
};
myChart.setOption(option);
}
</script>
</head>
<body>
<div style="width:800px;height:600px" id="chartsDOM"></div>
</body>
</html>