效果图
1.先引入地图所需省份json
csdn搜一下就有很多地址
2.贴代码
踩坑:数据name一定要和json里的一样。不然展示不出（我踩过的坑）
import {
MapChart} from 'echarts/charts'
import {
LabelLayout} from 'echarts/features'
import {
CanvasRenderer} from 'echarts/renderers'
import china from '../../assets/json/china.json'
const dom: any = document.getElementById('regional_box')
myChart = echarts.init(dom)
echarts.registerMap('china', china) //引入地图json
let total = ref<number>(2000)
//重点:数据name一定要和json里的一样。不然展示不出
let data = [
{
name: '天津市', value: 88},
{
name: '上海市', value: 66},
{
name: '重庆市', value: 42},
{
name: '河北省', value: 99},
{
name: '河南省', value: 52},
{
name: '云南省', value: 33},
{
name: '辽宁省', value: 22},
{
name: '黑龙江省', value: 22},
{
name: '湖南省', value: 22},
{
name: '安徽省', value: 22},
{
name: '山东省', value: 22},
{
name: '新疆维吾尔自治区', value: 22},
{
name: '江苏省', value: 22},
{
name: '浙江省', value: 22},
{
name: '江西省', value: 15},
{
name: '湖北省', value: 33},
{
name: '广西壮族自治区', value: 22},
{
name: '甘肃省', value: 88},
{
name: '山西省', value: 16},
{
name: '内蒙古', value: 56},
{
name: '陕西省', value: 33},
{
name: '吉林省', value: 99},
{
name: '福建省', value: 28},
{
name: '贵州省', value: 25},
{
name: '广东省', value: 33},
{
name: '青海省', value: 88},
{
name: '西藏自治区', value: 25},
{
name: '内蒙古自治区', value: 1},
{
name: '四川省', value: 45},
{
name: '宁夏回族自治区', value: 36},
{
name: '海南省', value: 22},
{
name: '台湾省', value: 22},
{
name: '香港特别行政区', value: 22},
{
name: '澳门特别行政区', value: 22}
]
// console.log("111111",data.);
let options = reactive({
title: {
show: true,
text: '港澳通行证 1000人',
bottom: '10px',
left: '10%',
textStyle: {
color: '#1D2129',
fontSize: '14px'
}
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c} 人'
},
visualMap: {
min: 0,
max: 100,
// text: ['100', '0'],
realtime: false,
calculable: true,
inRange: {
color: ['#A4C8FF', '#71A9FF']
}
},
geo: {
map: 'china',
roam: false,
label: {
emphasis: {
show: true
}
},
// 当前视角的缩放比例/中心 用于隐藏底部的南沙群岛地区
center: [105, 30],
zoom: 1.2,
aspectScale: 1
},
series: [
{
geoIndex: 0,
name: '地域分布',
type: 'map',
coordinateSystem: 'geo',
map: 'china',
data: data
}
]
})
myChart.setOption(options)