江苏省地图大屏展示

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