记使用echarts绘制地图根据数据修改每个省份深浅颜色

效果图

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)