1.渲染地圖的基礎配置

chinaMap () { // 地圖const obj = {title: {text: ''},backgroundColor: '',tooltip: {trigger: 'item',formatter: ': {c}'}, // 鼠標移到圖里面的浮動提示框dataRange: {show: true,min: 0,max: 200,range: [0, 199],text: ['', ''],realtime: false,calculable: false,startAngle: 0,color: [],orient: 'horizontal',itemWidth: '15',itemHeight: '120',left: 50,bottom: 20,precision: 4 // 數據展示的小數精度},geo: { // 這個是重點配置區map: 'china', // 表示中國地圖roam: true,z: '2',scaleLimit: {min: 1.8,max: 1.8},label: {normal: {show: false, // 是否顯示對應地名textStyle: {color: '#c3e5dc'}}},itemStyle: {normal: {borderColor: 'rgba(0, 0, 0, 0.2)'// areaColor: '#ededed' // 地圖背景色},emphasis: {areaColor: null,shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}},right: '100',left: 'auto',bottom: '0'},series: [{type: 'scatter',coordinateSystem: 'geo' // 對應上方配置},{name: '', // 浮動框的標題type: 'map',geoIndex: 0,data: []}]}return obj},

2.渲染地圖

opt9R () {const obj = JSON.parse(JSON.stringify(this.chinaMap))obj.series[1].data = this.prod_province_map.provincesobj.dataRange.color = ['#4d779c', '#c3e5dc']// obj.geo.itemStyle.normal.areaColor = '#eedcb9'obj.dataRange.min = this.prod_province_map.minobj.dataRange.max = this.prod_province_map.maxobj.dataRange.range = [this.prod_province_map.min, this.prod_province_map.max]obj.dataRange.text = [this.prod_province_map.max, this.prod_province_map.min]obj.right = 'auto'obj.tooltip = this.tooltipPer7return obj},

若使用visualMap 是視覺映射組件，即左邊視覺拖動條時，需要配置visualMap屬性，若需要顯示0-1之間的小數時，需要配置precision: 4，表示拖動條可以映射到的精度，即可以顯示帶小數部分的數據，如0-1之間的小數

3.渲染地圖的散點圖基礎配置

ripsChinaMap () {const obj = {title: {text: ''},tooltip: {trigger: 'item'},visualMap: {min: 0,max: 300,type: 'piecewise',inverse: true,// splitNumber: 5,itemWidth: '12',itemHeight: '12',itemSymbol: 'circle',left: '38%',color: ['#d8d8d8', '#d8d8d8', '#d8d8d8'],textStyle: {color: '#333'},target: {inRange: {color: [],symbolSize: [5, 15]}},symbol: 'circle',pieces: [{gte: 110, lt: 120, label: '110'},{gte: 100, lt: 110, label: '100'},{gte: 90, lt: 100, label: '90'},{gte: 80, lt: 90, label: '80'},{gte: 70, lt: 80, label: '70'},{gte: 60, lt: 70, label: '60'}]},geo: { // 這個是重點配置區map: 'china', // 表示中國地圖roam: true,silent: true,z: '0',scaleLimit: {min: 1.8,max: 1.8},label: {normal: {show: false, // 是否顯示對應地名textStyle: {color: '#c3e5dc'}}},itemStyle: {normal: {borderColor: '#c9c9c9',areaColor: '#ededed'},emphasis: {areaColor: null,shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}},right: '100',left: 'auto',bottom: '0'},bmap: {center: [104.114129, 37.550339],zoom: 5,roam: true,mapStyle: {styleJson: []}},series: [{name: '',type: 'scatter',coordinateSystem: 'geo',data: [],symbolSize: function (val) {return val[1] / 10},label: {normal: {formatter: '',position: 'right',show: false},emphasis: {show: true}},itemStyle: {normal: {color: '#71a0ca'}}}]}return obj},

渲染散點圖數據

opt27R () {const obj = JSON.parse(JSON.stringify(this.ripsChinaMap))obj.visualMap.min = this.sel_city_map.min1obj.visualMap.max = this.sel_city_map.max1this.geoCoordMap = this.sel_city_map.jwdobj.series[0].data = this.convertData(this.sel_city_map.citys_st_count)const distance = Math.ceil((this.sel_city_map.max1 - this.sel_city_map.min1) / 5)obj.visualMap.pieces.forEach((item, index) => {item.gte = this.sel_city_map.min1 + index * distanceitem.lt = this.sel_city_map.min1 + (index + 1) * distanceitem.label = (this.sel_city_map.min1 + index * distance) + ''})obj.series[0].itemStyle.normal.color = '#f98c15'obj.visualMap.target.inRange.color = ['#f98c15']obj.tooltip = this.tooltipPer6return obj}

渲染結果：

總結

以上是生活随笔為你收集整理的echart实现中国地图的全部內容，希望文章能夠幫你解決所遇到的問題。

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