let geoCoordMap = { "海门": [121.15, 31.89], "鄂尔多斯": [109.781327, 39.608266], "库尔勒": [86.06, 41.68], "安阳": [114.35, 36.1], "开封": [114.35, 34.79], "济南": [117, 36.65], "德阳": [104.37, 31.13], "温州": [120.65, 28.01], "邯郸": [114.47, 36.6], "临安": [119.72, 30.23], "兰州": [103.73, 36.03], "沧州": [116.83, 38.33], "武汉": [114.31, 30.52], "大庆": [125.03, 46.58] }; let data = []; for (let key in geoCoordMap) { data.push({ name: key, value: 50 }); } let mindata = []; data.forEach(element => { mindata.push(element.value); }); var convertData = function(data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res; }; option = { backgroundColor:"#061740", title: { text: '', x: 'left', top: "10", textStyle: { color: '#000', fontSize: 14 } }, tooltip: { show: true, formatter: (params) => { let data = params.name + "<br/>" + "值:" + params.value[2] + "<br/>" + "地理坐标:[" + params.value[0] + "," + params.value[1] + "]"; return data; }, }, geo3D: { map: 'china', label: { show: false, textStyle: { color: "#fff", // 地图初始化区域字体颜色 fontSize: 12, // 字体大小 opacity: 1, // 字体透明度 backgroundColor: "rgba(0,23,11,0)" // 字体背景色 } }, itemStyle: { areaColor: "#091c3d", opacity: 1, borderWidth: 1, borderColor: "#3fdaff" }, emphasis: { label: { show: false }, itemStyle: { areaColor: "#2B91B7" } }, viewControl: { autoRotate: false, minBeta: -360, maxBeta: 360 } }, series: [{ name: 'bar3D', type: "bar3D", coordinateSystem: 'geo3D', barSize: 1, //柱子粗细 opacity: 1, minHeight: 0.05, bevelSize: 1, //柱子的倒角尺寸 bevelSmoothness: 10, //柱子的倒角光滑度 silent: false, //图形是否不响应和触发鼠标事件 shading: "realistic", //着色效果 animationDurationUpdate:6000, label: { show: true, formatter: '{b}' }, data: [], }, { name: 'scatter3D', type: "scatter3D", coordinateSystem: 'geo3D', symbol: 'circle', symbolSize: 30, opacity: 1, label: { show: false, formatter: '{b}' }, itemStyle: { color:"#ff0033", borderWidth: 0.5, borderColor: '#fff' }, data: convertData(data) }] } setTimeout(function() { myChart.setOption({ series: [{ data: convertData(data) }] }) }, 2000)
Done!