最近公司需要做一個地圖并顯示項目的分布數據，調查了好久才解決掉。

效果如下圖：

用echarts 地圖 + 散點圖實現的，代碼如下：

// echarts 配置 this.options = {tooltip: {trigger: 'item'},geo: { // 地圖配置// show: true,map: '青島市',center: [120.209902019531, 36.3710241640625],label: {normal: {show: false},emphasis: {show: false}},roam: false,itemStyle: {normal: {// areaColor: '#47D1FF',borderColor: '#94afe0',shadowOffsetX: 5,shadowOffsetY: 10,borderWidth: 1,shadowColor: '#2835a5',shadowBlur: 5,opacity: 0.9},emphasis: {areaColor: '#2B91B7'}},zoom: 1.1},series: [{ // 散點配置name: '數量',type: 'effectScatter',coordinateSystem: 'geo',data: sanData,tooltip: {padding: [0, 30, 0, 0],backgroundColor: 'rgba(8, 29, 96, .5)', // hover顯示文字的背景顏色formatter: params => {return `<ul style="list-style: none;font-size: 14px;"><li>用戶名稱：${params.data.userName}</li><li style="height: 3PX"></li><li>地址：${params.data.address}</li><li style="height: 3PX"></li><li>線路：${params.data.supplyVoltageName}</li><li style="height: 3PX"></li><li>業務類型：${params.data.businessTypeName}</li></ul>`}},symbolSize: function(val) {return val[2]},showEffectOn: 'emphasis',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {normal: {formatter: (item) => {},position: 'right',show: false},emphasis: {show: true}},itemStyle: {normal: {color: '#ff8003'// color:'#a71818'}}}, { // 地圖配置name: '工程數',map: '青島市',center: [120.209602019531, 36.3610241640625],type: 'map',mapType: '青島市', // 自定義擴展圖表類型geoIndex: 1,tooltip: {padding: [0, 30, 0, 0],backgroundColor: 'rgba(8, 29, 96, .5)', // hover顯示文字的背景顏色formatter: params => {return `<ul style="list-style: none;"><li>區域:${params.data.name}</li><li>數量:${params.data.count}</li></ul>`}},aspectScale: 0.75, // 長寬比itemStyle: {normal: { label: { show: true } },emphasis: { label: { show: true } }},data: mapData,zoom: 1.1}]}this.$nextTick(() => {let that = this// 點擊地圖穿透事件this.$refs.map.chart.off('click')this.$refs.map.chart.on('click', (params) => {console.log(params, '點擊事件')if (params.componentSubType === 'map') {this.$message.success('map')} else {this.$message.success('數量')}})})

總結

以上是生活随笔為你收集整理的Echars地图加散点图配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。