![image]()
<!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>
</head>
<body>
<div id="main" style="height: 400px"></div>
<script src="../libs/echarts-5.3.3.js"></script>
<!--
1.導入了一箇中國的 geo json
window.china_geojson = {}
-->
<script src="./geojson/china_geojson.js"></script>
<script>
window.onload = function () {
let mapName = '中國';
// 2.註冊一下中國地圖的 geo json ( 需要在setOption之前調用 )
echarts.registerMap(mapName, { geoJSON: china_geojson });
let myChart = echarts.init(document.getElementById('main'));
var data = [
{ name: '北京', value: 199 },
{ name: '天津', value: 42 },
{ name: '河北', value: 102 },
{ name: '山西', value: 81 },
{ name: '內蒙古', value: 47 },
{ name: '遼寧', value: 67 },
{ name: '吉林', value: 82 },
{ name: '黑龍江', value: 123 },
{ name: '上海', value: 154 },
{ name: '江蘇', value: 102 },
{ name: '浙江', value: 114 },
{ name: '安徽', value: 109 },
{ name: '福建', value: 116 },
{ name: '江西', value: 91 },
{ name: '山東', value: 119 },
{ name: '河南', value: 137 },
{ name: '湖北', value: 116 },
{ name: '湖南', value: 114 },
{ name: '重慶', value: 101 },
{ name: '四川', value: 125 },
{ name: '貴州', value: 62 },
{ name: '雲南', value: 83 },
{ name: '西藏', value: 9 },
{ name: '陝西', value: 80 },
{ name: '甘肅', value: 56 },
{ name: '青海', value: 10 },
{ name: '寧夏', value: 18 },
{ name: '新疆', value: 120 },
{ name: '廣東', value: 193 },
{ name: '廣西', value: 59 },
{ name: '海南', value: 14 },
];
var geoCoordMap = {};
/*獲取地圖數據*/
myChart.showLoading();
// console.log(echarts.getMap(mapName));
// 1.先拿到地圖的 geo json 對象
var mapFeatures = echarts.getMap(mapName).geoJson.features;
mapFeatures.forEach(function (v) {
// 地區名稱
var name = v.properties.name;
// 地區經緯度
geoCoordMap[name] = v.properties.cp;
});
myChart.hideLoading();
console.log('data=>', data);
console.log('geoCoordMap=>', geoCoordMap);
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: [...geoCoord, data[i].value],
});
}
}
console.log('res=>', res);
return res;
};
// 2.指定圖表的配置項和數據
var option = {
tooltip: {}, // 提示框
// visualMap: { // 視覺映射組件
// left: "20%",
// seriesIndex: [0],
// inRange: {
// color: ["#04387b", "#467bc0"], // 藍綠
// },
// },
geo: {
// 註冊一個地理座標系組件( 給散點圖用 )
map: '中國',
roam: false,
label: { show: false },
aspectScale: 0.75, // 縮放地圖
itemStyle: {
areaColor: '#023677',
borderColor: '#1180c7',
},
emphasis: {
itemStyle: { areaColor: '#4499d0' },
label: { color: 'white' },
},
},
series: [
{
name: '中國地圖',
type: 'map',
map: '中國',
data, // 給地圖填充數據
// 地圖樣式
itemStyle: {
areaColor: '#023677',
borderColor: '#1180c7',
},
emphasis: {
itemStyle: { areaColor: '#4499d0' },
label: { color: 'white' },
},
select: {
label: { color: 'white' },
itemStyle: { areaColor: '#4499d0' },
},
// 地圖樣式
},
{
name: '散點圖充電樁',
type: 'effectScatter',
// 散點圖使用的座標系: geo定義的座標系組件
geoIndex: 0,
coordinateSystem: 'geo', // 使用地理座標系，通過 geoIndex 指定相應的地理座標系組件。
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10;
},
itemStyle: {
color: 'yellow',
shadowBlur: 10,
shadowColor: 'yellow',
},
tooltip: {
show: true,
trigger: 'item',
formatter: function (params) {
console.log(params);
var data = params.data;
return `${params.seriesName} <div style="margin:5px 0px;"/> ${data.name} ${data.value[2]}`;
},
},
},
],
};
myChart.setOption(option);
};
</script>
</body>
</html>
