江苏省地图大屏展示

Html部分绘制echarts图

<div id="chart3" style="width: 100%;height: 100%;"></div>

Js部分引入地图数据data.js

<script th:src="@{/js/geoJson/data.js}"></script>
<script type="text/javascript">

var chartDom = document.getElementById('chart3');
var myChart3 = echarts.init(chartDom);
var nameMap = '地图数据';
var geoCoordMap = {};
var mapData = [];
$.get('/js/geoJson/data.geoJson', function (gdMap) {
    echarts.registerMap(nameMap, gdMap);
    /*获取地图数据*/
    myChart3.showLoading();
    var mapFeatures = echarts.getMap(nameMap).geoJson.features;
    myChart3.hideLoading();
    var mapName = ''
    var mapInfo = []
    mapFeatures.forEach(function (v, index) {
        // 节点名称
        let name = v.properties.name;
        let value = Math.random() * 100;

        // 根据节点名称设置固定的颜色
        let color;
        switch (name) {
            case '徐州市':
                color = '#4c48c7';
                break;
            case '连云港市':
                color = '#5030a2';
                break;
            case '宿迁市':
                color = '#6552d5';
                break;
            case '淮安市':
                color = '#3892dc';
                break;
            case '盐城市':
                color = '#00b5c7';
                break;
            case '扬州市':
                color = '#4c78da';
                break;
            case '泰州市':
                color = '#4c48c7';
                break;
            case '南通市':
                color = '#4d77da';
                break;
            case '南京市':
                color = '#514aca';
                break;
            case '镇江市':
                color = '#514aca';
                break;
            case '常州市':
                color = '#00a7e1';
                break;
            case '无锡市':
                color = '#5030a2';
                break;
            case '苏州市':
                color = '#514aca';
                break;
            default:
                color = '#4c48c7'; // 默认颜色
        }

        mapData.push({
            name: name,
            value: value,
            itemStyle: {
                normal: {
                    areaColor: color // 固定颜色
                },
                emphasis: {
                    areaColor: '#6666ff' // 鼠标悬停时的颜色
                }
            }
        });

        mapInfo.push({
            name: name,
            code: v.properties.adcode
        });
        geoCoordMap[name] = v.properties.center; // 节点经纬度
    });

    // mapFeatures.forEach(function (v, index) { //使用下方visualMap随机颜色值时替换该方法
    //     // 节点名称
    //     mapData.push({
    //         name: v.properties.name,
    //         value: Math.random() * 100
    //     });
    //     mapInfo.push({
    //         name: v.properties.name,
    //         code: v.properties.adcode
    //     })
    //     mapName = mapName + (mapName ? ',' : '') + v.properties.name
    //     var name = v.properties.name;
    //     // 节点经纬度
    //     geoCoordMap[name] = v.properties.center;
    // });
    console.log(JSON.stringify(mapInfo))
    console.log(mapName)
    var serverdata = [
        { // 地图块的相关信息
            type: 'map',
            map: nameMap,
            zoom: 1.2,
            roam: false,
            selectedMode: "single",
            showLegendSymbol: false,
            visibility: "off",
            label: {
                show: true,
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 400,
                        color: '#fff'
                    }
                }
            },
            itemStyle: {
                emphasis: {
                    areaColor: '#6666ff' // 鼠标悬停时的颜色
                }
            },
            data: mapData
        }
    ]
    var optionMap = {
        // visualMap: { //使用随机颜色值
        //     type: "piecewise",
        //     pieces: [
        //         {max: 20, label: type[0], color: "#4c48c7"},
        //         {min: 20, max: 40, label: type[1], color: "#5030a2"},
        //         {min: 40, max: 60, label: type[2], color: "#6552d5"},
        //         {min: 60, max: 80, label: type[3], color: "#00babe"},
        //         {min: 80, label: type[4], color: "#3892dc"}
        //     ],
        //     show: false
        // },
        graphic: [
            {
                type: 'rect', // 添加一个矩形作为背景
                z: -1, // 确保矩形在文本后面
                left: '5%',
                top: '50%',
                shape: {
                    x: 0,
                    y: -20, // 调整垂直偏移量
                    width: 150, // 调整宽度
                    height: 200, // 调整高度
                    r: 5 // 圆角
                },
                style: {
                    fill: 'rgba(0,57,121,0.44)', // 背景颜色
                    stroke: '#2C58A6', // 边框颜色
                    lineWidth: 1 // 边框宽度
                }
            },
            {
                type: 'text',
                left: '8%',
                top: '55%',
                style: {
                    text: '省中心',
                    textAlign: 'left',
                    fill: '#fff',
                    fontSize: 16,
                    fontWeight: 'bold' // 设置省中心文本加粗
                }
            },
            {
                type: 'text',
                left: '8%',
                top: '60%',
                style: {
                    text: '个人证书：12 个\n\n单位证书：14 个\n\n设备证书：20 个\n\n软件证书：20 个\n\n管理员证书：20 个',
                    textAlign: 'left',
                    fill: '#fff',
                    fontSize: 12
                }
            }
        ],
        geo: {
            map: nameMap,
            show: false,
            roam: true,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: false
                }
            }
        },
        series: serverdata
    };
    myChart3.clear()
    myChart3.resize()
    myChart3.setOption(optionMap, true);
});
</script>

/static / js / geoJson 下存放的地图相关数据文件 geoJson

1. data.geoJson

2. data.js

3.data2.geoJson