先看效果图

1.如何获取地图数据？

去阿里云获取所需的地图数据json

http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.87755764334002&lng=104.150390625&zoom=3

打开的页面是这样的。下载数据时，必须选择框中下载的部分。否则，可能会有奇怪的事情bug

2、在html中，引入echarts.js ，关于echarts的资料如下

echarts 官方文档

https://echarts.apache.org/zh/option.html#title

echarts 的js获取文件地址

https://echarts.apache.org/zh/builder.html

引入jquery 和 echars.js

<script src="js/echarts.min.js"></script> <script src="js/jquery-3.5.1.min.js"></script>

3.读吉林省地图json并加载数据echarts

function getArea () {     const myChart = echarts.init(document.getElementById('main'))      var url = "js/jilin.json";     $.get(url, null, function (ret) {         let geoJson = ret;             echarts.registerMap('jilin', ret)         // 注册矢量地图数据         var option = {           visualMap: { // 视觉映射组件              // type: 'continuous', 若需要渐变色，设置type为连续             show: true,             // inverse: true, // 反转             top: '70%',             bottom: '0%',             left: '2%',             textStyle: {               fontsize: 12             },              splitList: [ // 自定义范围               { start: 0, end: 100 },               { start: 100, end: 300 },               { start: 300, end: 500 },               { start: 500, end: 1000 },               { start: 1000 }             ],             color: ['#BF242A', '#CD5459', '#DC878A', '#EAB7B9', '#F3D7D9'] ///自定义范围内的颜色           },           tooltip: { // 悬浮框             trigger: 'item', // 触发条件             backgroundColor: 'RGBA(136, 123, 135, 0.8)',             formatter: '{b}<br/>占用数{c}', // 定制显示数据             textStyle: {               color: '#ffffff'             }           },           series: [             {               type: 'map',               map: 'jilin',               zoom: 1.2,               top: '10%',               x: 'center',               label: {                 show: true // 显示                              },               itemStyle: {                 normal: { // 静态时显示默认样式                   areaColor: '#F3D7D9', // 地图颜色                   borderColor: '#886364' // 边框颜色                 },                 emphasis: { // 鼠标移动动态时显示的默认样式                   borderWidth: 2, // 边框宽度                   areaColor: '#ffffff' // 地图颜色                 }               },               // 数据               data: [                 {                   name: 长春市，                   value: '1202'                 },                 {                   name: 吉林市，                   value: '396'                 },                 {                   name: 通化市，                   value: '1125'                 },                 {                   name: 四平市，                   value: '635'                 },                 {                   name: 白山市，                   value: '586'                 },                 {                   name: 辽源市，                   value: '360'                 },                 {                   name: '白城市',                   value: '231'                 },                 {                   name: 延边朝鲜族自治州，                   value: '196'                 },                 {                   name: 松原市，                   value: '80'                 }               ]             }             ]         }         myChart.setOption(option)       })     }

4、完整demo下载

https://download.csdn.net/download/wangkunggxx/85582925