效果图:
要点1:calc函数
重点：在于mapChart的height可以写成函数以便适配不同尺寸；
<div class="content-map"><div class="wai-top-box" style="width: 100%; height: 100%"><div id="mapChart" style=" width: 100%; height: calc(100vh - 100px)"> </div></div></div>重点1：在于mapChart的height可以写成函数适配不同尺寸
要点2：要点较多
map: {title: {text: '',x: 'center',textStyle: {color: '#333333'}},tooltip: {trigger: 'item',showDelay: 0,transitionDuration: 0.2,formatter: function (params) {const value = (params.value + '').split('.');const valueStr = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');return params.name + ': ' + (params.value ? valueStr : 0);}},// 数据和类型series: [{type: 'map',map: 'china',label: {normal: { PS： 自定义label 一定要写在norml里面show: true,position: 'inside',formatter: function (params) { params就是数据请求里面的对象{name:xxx,value:xxx}const value = (params.value + '').split('.');const valueStr = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');return params.name + '\n' + '{a|' + (params.value ? valueStr : 0) + '}'; PS:\n用于换行},rich: { PS:rich可以对自定的label的样子进行单独修改 ，该场景是下面的数字的fontSize比上面的小 a: {color: "rgba(104, 104, 104, 0.8)",fontSize: 12,lineHeight: 16}},color: 'rgba(104, 104, 104, 0.8)',fontSize: 17},},// 地图区域的多边形 图形样式。itemStyle: {normal: {borderColor: '#E3E3E3', 省会旁边的描边颜色 即border的属性borderWidth: 1},},// 地图大小倍数zoom: 1.2, 感觉data: []}],visualMap: {type: "piecewise", 这里是采用根据区间来设置颜色min: 0,text: ['High', 'Low'],realtime: true,calculable: true,textStyle: {color: '#fff'},
// inRange: { 这种情况是不限制区间根据地图自动渲染// color: ['#FFFAED', '#840007', 'blue']// },pieces: [{ gt: 3000, color: "#280000" },{ gt: 1000, lte: 3000, color: "#450000" },{ gt: 500, lte: 1000, color: "#630000" },{ gt: 300, lte: 500, color: "#840007" },{ gt: 250, lte: 300, color: "#9B000C" },{ gt: 200, lte: 250, color: "#B20011" },{ gt: 150, lte: 200, color: "#CA0017" },{ gt: 100, lte: 150, color: "#DA0C23" },{ gt: 90, lte: 100, color: "#E22537" },{ gt: 80, lte: 90, color: "#EA3E4B" },{ gt: 70, lte: 80, color: "#F25760" },{ gt: 60, lte: 70, color: "#FB7174" },{ gt: 50, lte: 60, color: "#FF9469" },{ gt: 40, lte: 50, color: "#FFB24C" },{ gt: 30, lte: 40, color: "#FFCB45" },{ gt: 20, lte: 30, color: "#FFD15D" },{ gt: 10, lte: 20, color: "#FFD874" },{ gt: 1, lte: 10, color: "#FFE5A3" },{ value: 0, lte: 1, color: "#FFFAED" }],right: -100}}要点3：数据请求
getMap() {// 中国地图this.map.series[0].data = [];distributed().then((res) => {this.nowData = res.data;res.data.loanProvinceCountList.forEach((item) => {if (item.province) {this.map.series[0].data.push({name:item.province value: item.loanCount});}console.log(this.map.series[0].data);});this.map.series[0].data.push({name: '南海诸岛',itemStyle: {normal: {opacity: 1,label: {show: false}}}});let mapChartDom = document.getElementById('mapChart');let mapChart = this.$echarts.init(mapChartDom);mapChart.setOption(this.map);window.addEventListener('resize', function () {mapChart.resize(); 根据尺寸自适应});});},要点4:引用china
因为报错说map.china不存在
在main.js里面引入china.json
import * as echarts from 'echarts';
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)要点5：将展示的label居中
因为地图默认文字展示的是省会城市
将node_module里面的echarts里面的map的china.json文件复制一份在util下面
将要点4的import china from 'echarts/mapxxxx'改为引入util下面的china.json
import china from '@/utils/china.json'
各个省份居中都对应的经纬度, 修改chin.json里面的cp值；
1.新疆: [86.61 , 40.79] 2.西藏:[89.13 , 30.66] 3.黑龙江:[128.34 , 47.05] 4.吉林:[126.32 , 43.38] 5.辽宁:[123.42 , 41.29] 6.内蒙古:[112.17 , 42.81] 7.北京:[116.40 , 40.40 ] 8.宁夏:[106.27 , 36.76] 9.山西:[111.95,37.65] 10.河北:[115.21 , 38.44] 11.天津:[117.04 , 39.52] 12.青海:[97.07 , 35.62] 13.甘肃:[103.82 , 36.05] 14.山东:[118.01 , 36.37] 15.陕西:[108.94 , 34.46] 16.河南:[113.46 , 34.25] 17.安徽:[117.28 , 31.86] 18.江苏:[120.26 , 32.54] 19.上海:[121.46 , 31.28] 20.四川:[103.36 , 30.65] 21.湖北:[112.29 , 30.98] 22.浙江:[120.15 , 29.28] 23.重庆:[107.51 , 29.63] 24.湖南:[112.08 , 27.79] 25.江西:[115.89 , 27.97] 26.贵州:[106.91 , 26.67] 27.福建:[118.31 , 26.07] 28.云南:[101.71 , 24.84] 29.台湾:[121.01 , 23.54] 30.广西:[108.67 , 23.68] 31.广东:[113.98 , 22.82] 32.海南:[110.03 , 19.33] 33.澳门:[113.54 , 22.19] 34.香港:[114.17 , 22.32]
