<pre><code class="language-vue"><template>
<div class="chart-wrapper">
<div ref="chartRef" class="chart"></div>
</div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import { EChartsOption } from 'echarts';
import GD_GEO_JSON from './440000_full.json';
const PROVINS = [
{ name: '北京市', value: 20057.34 },
{ name: '天津市', value: 15477.48 },
{ name: '河北省', value: 31686.1 },
{ name: '山西省', value: 6992.6 },
{ name: '内蒙古自治区', value: 44045.49 },
{ name: '辽宁省', value: 40689.64 },
{ name: '吉林省', value: 37659.78 },
{ name: '黑龙江省', value: 45180.97 },
{ name: '上海市', value: 55204.26 },
{ name: '江苏省', value: 21900.9 },
{ name: '浙江省', value: 4918.26 },
{ name: '安徽省', value: 5881.84 },
{ name: '福建省', value: 4178.01 },
{ name: '江西省', value: 2227.92 },
{ name: '山东省', value: 2180.98 },
{ name: '河南省', value: 9172.94 },
{ name: '湖北省', value: 3368 },
{ name: '湖南省', value: 806.98 },
{ name: '广东省', value: 40689.44 },
];
const CITIES = [
{ name: '广州市', value: 1 },
{ name: '韶关市', value: 20 },
{ name: '深圳市', value: 30 },
{ name: '珠海市', value: 30 },
{ name: '汕头市', value: 40 },
{ name: '佛山市', value: 44 },
{ name: '江门市', value: 55 },
{ name: '湛江市', value: 66 },
{ name: '茂名市', value: 77 },
{ name: '肇庆市', value: 88 },
{ name: '惠州市', value: 99 },
{ name: '梅州市', value: 11 },
{ name: '汕尾市', value: 22 },
{ name: '河源市', value: 33 },
{ name: '阳江市', value: 44 },
{ name: '清远市', value: 55 },
{ name: '东莞市', value: 66 },
{ name: '中山市', value: 77 },
{ name: '潮州市', value: 88 },
{ name: '揭阳市', value: 99 },
{ name: '云浮市', value: 33 },
];
const convertData = () => {
const cities = GD_GEO_JSON.features.map(item => item.properties);
return CITIES.map(city => {
const target = cities.find(c => c.name === city.name);
return {
...city,
lng: target?.centroid[0],
lat: target?.centroid[1],
};
});
};
const finalData = convertData();
const option: EChartsOption = {
title: {
text: '中国',
padding: 10,
},
tooltip: {
trigger: 'item',
},
geo: {
tooltip: {
show: true,
},
map: 'CN',
roam: false, // 是否支持缩放
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
},
},
dataset: {
dimensions: ['name', 'value', 'lat', 'lng'],
source: finalData,
},
series: [
{
name: '广场',
type: 'map',
map: 'CN',
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
},
tooltip: {
show: false,
},
data: CITIES,
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: 10,
itemStyle: {
color: '#2875FB',
},
encode: {
name: 'name',
lng: 'lng',
lat: 'lat',
value: 'value',
},
label: {
formatter: '{@value}个广场',
position: 'top',
show: true,
color: '#fff',
padding: [0, 8],
height: 30,
verticalAlign: 'middle',
borderRadius: 4,
backgroundColor: 'rgba(0,0,0,0.65)',
},
tooltip: {
show: false,
},
},
],
visualMap: {
min: 1,
max: 100,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered'],
},
show: false,
seriesIndex: 0,
},
};
const chartRef = ref();
echarts.registerMap('CN', GD_GEO_JSON as any);
const pos = ref({ x: 0, y: 0 });
onMounted(() => {
const myChart = echarts.init(chartRef.value);
myChart.setOption(option);
});
</script>
<style lang="scss" scoped>
.chart-wrapper {
position: relative;
height: 100%;
width: 100%;
box-sizing: border-box;
}
.chart {
width: 100%;
height: 100%;
margin: 0 auto;
box-sizing: border-box;
}
</style></code></pre>
<h1>参考</h1>
<p><a href="https://echarts.apache.org/examples/zh/editor.html?c=map-HK">https://echarts.apache.org/examples/zh/editor.html?c=map-HK</a></p>
<p>获取广东省的 GEO data</p>
<p><a href="http://datav.aliyun.com/portal/school/atlas/area_selector">http://datav.aliyun.com/portal/school/atlas/area_selector</a></p>
详情