如何在 ECharts 百度地图 中只显示中国地图？-灵析社区
周舟莫UI设计可以去先去阿里dataV下载 我们需要的数据就是一个对象，我们需要使用他们提供的接口或者把这个对象下载到本地。 比如合肥 合肥地图 *{ margin: 0; padding: 0;} body{ background: linear-gradient(45deg , #001B4B , #006FCA , #006FCA , #003783);} var listKey = { '合肥市':{ json:'https://geo.datav.aliyun.com/areas_v3/bound/340100_full.json', }, '瑶海区':{ json:'https://geo.datav.aliyun.com/areas_v3/bound/340102.json', points:[{name: '瑶海区111',value: [117.313076,31.866118]},] }, '庐阳区':{ json:'https://geo.datav.aliyun.com/areas_v3/bound/340103.json', points:[{name: '庐阳区111',value: [117.261397,31.889056]},{name: '庐阳区222',value: [117.269733,31.881452]},] }, '蜀山区':{ json:'https://geo.datav.aliyun.com/areas_v3/bound/340104.json', points:[{name: '蜀山区111',value: [117.157229,31.872589]},{name: '蜀山区222',value: [117.173902,31.848054]},] }, '包河区':{ json:'https://geo.datav.aliyun.com/areas_v3/bound/340111.json', points:[{name: '包河区111',value: [117.298183,31.81746]},{name: '包河区222',value: [117.407992,31.761968]},] }, '长丰县':{ json:'https://geo.datav.aliyun.com/areas_v3/bound/340121.json', points:[{name: '长丰县111',value: [117.168961,32.490058]},] }, '肥东县':{ json:'https://geo.datav.aliyun.com/areas_v3/bound/340122.json', points:[{name: '肥东县111',value: [117.473675,31.899776]},{name: '肥东县222',value: [117.473675,31.890456]},] }, '肥西县':{ json:'https://geo.datav.aliyun.com/areas_v3/bound/340123.json', points:[{name: '肥西县111',value: [117.09212,31.763079]},{name: '肥西县222',value: [117.051876,31.718367]},] }, '庐江县':{ json:'https://geo.datav.aliyun.com/areas_v3/bound/340124.json', points:[{name: '庐江县111',value: [117.293574,31.273179]},{name: '庐江县222',value: [117.304497,31.224772]},] }, '巢湖市':{ json:'https://geo.datav.aliyun.com/areas_v3/bound/340181.json', points:[{name: '巢湖市111',value: [117.802437,31.639333]},{name: '巢湖市222',value: [117.897298,31.62064]},] }, } var keyName = '合肥市'; function setMap(){ // $.get('//geo.datav.aliyun.com/areas_v3/bound/340100_full.json', function (geoJson) { $.get(listKey[keyName].json, function (geoJson) { myChart.hideLoading(); echarts.registerMap('HF', geoJson); myChart.setOption( (option = { title: { show: true, //显示标题 // left: 'left', //显示在横向位置 // top: 'top', //显示在竖向位置 textStyle:{ color:'#ffffff' }, text: '合肥地图', subtext: 'ECharts 快速上手', //点击 跳转链接（sublink） sublink:'https://echarts.apache.org/handbook/zh/get-started/', subtextStyle:{ color:'#fff' }, }, tooltip: { trigger: 'item', formatter: '{b}{c}（单位）' }, toolbox: { show: true, // 显示菜单 orient: 'vertical', // left: 'right', //显示在横向位置 // top: 'top', //显示在竖向位置 iconStyle:{ borderColor:'#fff' }, feature: { dataView: { readOnly: false }, //数据视图 restore: {}, //刷新重置 saveAsImage: {}, //保存为图片 } }, visualMap: { show: true, //显示数据区间查看器 min: 10, max: 600, text: ['High', 'Low'], // left: 'left', //显示在横向位置 // top: 'bottom', //显示在竖向位置 textStyle:{ color:'#ffffff' }, realtime: false, calculable: true, inRange: { // 地图渲染色值（根据data中value数据区间展示对应渐变过度色值，值越小展示越靠前的色值） // color: ['#B0E1FF', '#63C1FD' , '#3CADF4'], color: ['lightskyblue', 'yellow', 'orangered'], } }, series: [ { name: '合肥地图', type: 'map', map: 'HF', label: { show: true }, data: [ { name: '瑶海区', value: 10 }, //{b} : name {c} : value { name: '庐阳区', value: 50 }, { name: '蜀山区', value: 100 }, { name: '包河区', value: 150 }, { name: '长丰县', value: 300 }, { name: '肥东县', value: 400 }, { name: '肥西县', value: 500 }, { name: '庐江县', value: 600 }, { name: '巢湖市', value: 70 }, ], // 自定义名称映射（地图JSON中name是英文的展示处理） nameMap: { 'yaohai': '瑶海区', // ... } }, // 写入经纬度标注点所需 { name: '', type: 'scatter', coordinateSystem: 'geo', color: ['#000'], tooltip: { position: "right", color: "#000", formatter(d) { // console.log(d) return `【${d.data.name}】`; }, }, itemStyle: { color: '#ddb926', normal: { areaColor: '#8abcd1', borderColor: '#fff', borderWidth: 1, }, emphasis: { areaColor: '#fff', borderColor: '#ff0000', borderWidth: 0.5, } }, // 经纬度数据 data: keyName == '合肥市' ? [].concat(listKey['瑶海区'].points,listKey['庐阳区'].points,listKey['蜀山区'].points,listKey['包河区'].points,listKey['长丰县'].points,listKey['肥东县'].points,listKey['肥西县'].points,listKey['庐江县'].points,listKey['巢湖市'].points) : listKey[keyName].points, } ], // 写入经纬度标注点所需 geo: { show: true, map: 'HF', type: 'map', // mapType: 'anhui', roam: false, // label: { // normal: { // // 显示省份标签 // show: false, // textStyle: { // color: '#fff', // fontSize: 10 // } // }, // emphasis: { // // 对应的鼠标悬浮效果 // show: true, // // 选中后的字体样式 // textStyle: { // color: '#000', // fontSize: 14 // } // } // }, // itemStyle: { // color: '#ddb926', // normal: { // areaColor: '#8abcd1', // borderColor: '#fff', // borderWidth: 1 // }, // emphasis: { // borderWidth: 0.5, // borderColor: '#8abcd1', // areaColor: '#fff' // } // }, // emphasis: { // label: { // show: false // } // } } }) ); }); } var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; myChart.showLoading(); setMap(); option && myChart.setOption(option); window.addEventListener('resize', myChart.resize); myChart.on('click', function (param) { console.log(param) console.log(param.name) if(!listKey[param.name]){ return; } if(keyName == param.name){ keyName = '合肥市'; }else{ keyName = param.name; } setMap(); })