Echarts map地图的使用（入门级）_echartsmap

2023.1.6今天我学习了如何使用echarts map地图，效果如：

 首先是给容器设置id和宽高

然后是通过datav地图小工具设置地图的位置。

DataV.GeoAtlas地理小工具系列

最后是

  var mapChart = echarts.init(document.getElementById('map'));
    // 引入设置的地图Json文件
    $.getJSON('https://geo.datav.aliyun.com/areas_v3/bound/350500_full.json', function (geoJson) {
        echarts.registerMap('福建', geoJson)
        mapChart.setOption({
            tooltip: {
                show: true
            },
            // 设置地图内部的颜色
            visualMap: {
                show: false,
                inRange: {
                    color: 'rgb(5,25,63)'
                }
            },
            // 设置地图的大小，宽高
            geo: {
                show: true,
                // 说明要设置的地图名称
                map: '福建',
                // 设置大小
                zoom: 1.2,
                top: '90px',
                // 设置宽高
                aspectScale: 1.2,
                // 设置外部地图的样式
                itemStyle: {
                    normal: {
                        areaColor: 'transparent',
                        borderColor: '#3fdaff',
                        borderWidth: 2,
 
                    },
                }
            },
            series: [{
                type: 'map',
                mapType: '福建',
                // 可缩放
                roam: true,
                // 名称要对应
                data: [
                    { name: '安溪县', value: 1 },
                    { name: '永春县', value: 1 },
                    { name: '德化县', value: 1 },
                    { name: '南安市', value: 1 },
                    { name: '洛江区', value: 1 },
                    { name: '鲤城区', value: 1 },
                    { name: '丰泽区', value: 1 },
                    { name: '晋江市', value: 1 },
                    { name: '石狮市', value: 1 },
                    { name: '惠安县', value: 1 },
                    { name: '泉港区', value: 1 },
                    { name: '金门县', value: 1 },
 
                ],
                // 显示地图的位置名称
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            color: 'white'
                        }
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    }
                }
            }]
        })
    })