echarts 地图九状线显示钓鱼岛系列（3）之 vue项目

我引入的是 "echarts": "^4.2.1"

（地图对比）

(china.js)

（china1.js）

1、首先需要在node_modules/echarts/map/js 文件夹下新建一个china1.js文件。不用默认的echarts自带的，因为echarts自带的不含钓鱼岛等部分。显示九状线的地图格式，需要将此china1.js文件中的注册地图部分的 china 改为自己创建的china1文件，即不用默认的。

（自己新建的China.js）文件路径：（nodemodules 文件下）

文件太大无法上传，文件资源： https://download.csdn.net/download/shimeng_1989/11812174

注意： 此文件中：注册地图时，千万记得把china 改为china1，不然默认渲染默认的上图china.js样式地图（如下）

echarts.registerMap('~~china~~',{....}）

=> echarts.registerMap('china1',{....}）

2、在 .vue 文件中引入echarts 及地图部分，或者注册为全局（main.js中注册）的也可以：

（我将地图部分单独放置到了一个文件中（pubAnalyze.js）--因为太多，看起来美观一些）

  import echarts from "echarts";//引入echarts// 引入中国地图数据将echarts自带的china.js文件名改掉，或者复制出来，重新建一个命名为china1，只要不叫china.js即可，默认渲染china.js文件为海南诸岛再框里面展示 如下图）
// import "echarts/map/js/china.js"不引入此文件import "echarts/map/js/china1.js"//引自己新建的文件，路径为nodemodules/echarts/map/js/china1.js(如下图）
import map from "./pubAnalyze.js";// 引入echarts地图文件

3. pubAnalyze.js文件

import cp from './geoCoordMap'//地图name：[坐标，坐标]文件
const geoCoordMap=cp;
const convertData = function(data) {var res = []for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name]if (geoCoord) {res.push(geoCoord.concat(data[i].value, data[i].name))}}return res
}
var mapValueMaxPercent = 0.0001
const mapOption = {backgroundColor: '#F3F3F3', // canvas 地图背景色tooltip: {// 地图省份显示提示内容及及格式trigger: 'item'},visualMap: {// 左下角区域色-柱状区域渐变色// type: 'continuous',show: true,calculable: true,min: 0,max: 300,itemWidth: 10,seriesIndex: [0],type: 'continuous',color: ['#49A2DE', '#DDF1FF'],textStyle: {fontSize: 8,color: '#51576B' // 最高最低值字体颜色。#CDCFD5 地图线的色，字的色 51576B 的，点的色，气泡色#5ECAA1    请选择自定义时间}},roamController: {show: false,x: 'right',mapTypeControl: {'china': true}},series: [{type: 'map',mapType: 'china1',name: '',zoom: 1.2, // 这里是关键，一定要放在 series中itemStyle: {normal: {label: {show: true,color: '#51576B', // 地图省份字的颜色fontSize: 8// 地图省份字体大小},// areaColor: 'blue', //地图北京色，不需要按visualMap中的颜色渐变来表示值大小时，可以打开此设置borderColor: '#CDCFD5' // 3B5077  地图线的颜色},emphasis: {areaColor: 'eee' // pink}},data: convertData([{name: '大庆',value: 0}])}// 散点// {//   // name: "pm2.5",//   type: "scatter",//   coordinateSystem: "geo",//   data: convertData([{//     name: "大庆",//     value: 0//   }]),//   tooltip: {//气泡显示提示：value的格式//     trigger: "item",//     formatter: function (params) {//     return params.value[3] + '<br>' + params.value[2]//data数据中第三条为value值，第四条（下标四）为name省份。即：[坐标经/纬度,坐标经/纬度,value,name]//     }//     },//   symbolSize: 8,//   label: {//     emphasis: {//       show: false//     }//   },//   itemStyle: {//     normal: {//     // opcity: 0.1,//待测试，不一定好使用，//       color: '#FFC465',//     // opcity: 0.1,//待测试，不一定好使用，//       // label: { //显示气泡的省份名字是否显示//       //   show: true,//       //   color: 'yellow',//       //   fontSize: 8//       // },//       // borderColor: 'red', //圆圈边框颜色//     },//     emphasis: {//       color: '#FFC465', //高亮是圆点颜色//       // borderColor: "black",//       // borderWidth: 1//     }//   }// },]
}
export default {mapOption,convertData,mapValueMaxPercent
}

PS : 注意！！！ pubAnalyze文件中千万记得改！！！

4、（上段代码中）geoCoordMap文件

const geoCoordMap = {北京: [116.3809433, 39.9236145],天津: [117.2034988, 39.13111877],河北: [114.4897766, 38.04512787],石家庄市: [114.4897766, 38.04512787],唐山市: [118.2017288, 39.62533951],秦皇岛市: [119.5982971, 39.92430878],邯郸市: [114.4729538, 36.60151672],邢台市: [114.4950867, 37.06558991],保定市: [115.5001831, 38.85707092],张家口市: [114.8787766, 40.81744003],承德市: [117.9223404, 40.96760178],沧州市: [116.8607712, 38.30884171],廊坊市: [116.6898575, 39.51511002],衡水市: [115.7081909, 37.72782135],山西: [112.5693512, 37.87111282],太原市: [112.5693512, 37.87111282],大同市: [113.2963333, 40.0971489],阳泉市: [113.5742569, 37.86065674],长治市: [113.1055679, 36.18191147],晋城市: [112.84272, 35.50651169],朔州市: [112.4232712, 39.31313324],晋中市: [112.7453613, 37.67613983],运城市: [110.9911499, 35.01391602],忻州市: [112.7315521, 38.39920807],临汾市: [111.5141678, 36.08282471],吕梁市: [111.1348114, 37.512043],内蒙古: [111.6632996, 40.82094193],呼和浩特市: [111.6632996, 40.82094193],包头市: [109.8517075, 40.6664238],乌海市: [106.8148727, 39.67420197],赤峰市: [118.9498215, 42.26798248],通辽市: [122.2603302, 43.61156082],鄂尔多斯市: [109.7808671, 39.60844559],呼伦贝尔市: [119.7305603, 49.21152878],巴彦淖尔市: [107.3945694, 40.76234055],乌兰察布市: [113.0985184, 41.03116608],兴安盟: [122.0381598, 46.08207144],锡林郭勒盟: [116.0477155, 43.9331762],阿拉善盟: [105.7289837, 38.8515317],辽宁: [123.4116821, 41.7966156],沈阳市: [123.4116821, 41.7966156],大连市: [121.6008377, 38.91780472],鞍山市: [122.9843826, 41.11525726],抚顺市: [123.9295578, 41.84786606],本溪市: [123.7645035, 41.28758621],丹东市: [124.3814621, 40.13518143],锦州市: [121.1333695, 41.11112595],营口市: [122.2241516, 40.66835022],阜新市: [121.6488037, 42.00795364],辽阳市: [123.1617432, 41.26513672],盘锦市: [122.0476303, 41.18847656],铁岭市: [123.844429, 42.29558182],朝阳市: [120.4514694, 41.57785797],葫芦岛市: [120.8474808, 40.75334168],吉林: [125.3154297, 43.89256287],长春市: [125.3154297, 43.89256287],吉林市: [126.5668182, 43.88667679],四平市: [124.377449, 43.16560745],辽源市: [125.1372833, 42.90859222],通化市: [125.9231262, 41.7232933],白山市: [126.421608, 41.93033218],松原市: [124.82204, 45.172604],白城市: [122.8395767, 45.61641693],延边朝鲜族自治州: [129.5091262, 42.89120266],黑龙江: [126.6433411, 45.74149323],哈尔滨市: [126.6433411, 45.74149323],齐齐哈尔市: [123.9592667, 47.34136963],鸡西市: [130.9477539, 45.2970047],鹤岗市: [130.2761993, 47.33728409],双鸭山市: [131.1521607, 46.6376915],大庆市: [125.0248566, 46.59545136],伊春市: [128.9043121, 47.72364426],佳木斯市: [130.36232, 46.81366348],七台河市: [130.8753967, 45.80927277],牡丹江市: [129.5984955, 44.58392334],黑河市: [127.4869385, 50.24448776],绥化市: [126.98349, 46.63701248],大兴安岭地区: [124.5921351, 51.9239847],上海: [121.4692688, 31.23817635],江苏: [118.7727814, 32.04761505],南京市: [118.7727814, 32.04761505],无锡市: [120.2991333, 31.57723045],徐州市: [117.1856079, 34.26752853],常州市: [119.9502869, 31.78393364],苏州市: [120.6187286, 31.31645203],南通市: [120.8555679, 32.01506805],连云港市: [119.1668015, 34.60517883],淮安市: [119.14111, 33.502789],盐城市: [120.1351776, 33.38982773],扬州市: [119.4368362, 32.39188767],镇江市: [119.4442978, 32.20589829],泰州市: [119.91124, 32.495872],宿迁市: [118.29706, 33.958302],浙江: [120.1592484, 30.26599503],杭州市: [120.1592484, 30.26599503],宁波市: [121.5412827, 29.87066841],温州市: [120.6502914, 28.01647568],嘉兴市: [120.7536316, 30.77111435],湖州市: [120.0971298, 30.86603928],绍兴市: [120.5739288, 30.01093102],金华市: [119.6522064, 29.11081696],衢州市: [118.8691788, 28.9584446],舟山市: [122.1016083, 30.02004242],台州市: [121.4205629, 28.6561185],临海市: [121.1184464, 28.84889221],丽水市: [119.9165573, 28.44883728],安徽: [117.2757034, 31.86325455],合肥市: [117.2757034, 31.86325455],芜湖市: [118.3598328, 31.33449554],蚌埠市: [117.3613815, 32.93924332],淮南市: [117.0207291, 32.6166954],马鞍山市: [118.4807129, 31.72492409],淮北市: [116.7874985, 33.9704895],铜陵市: [117.813179, 30.92524719],安庆市: [117.0344315, 30.51264572],黄山市: [118.3090668, 29.72084427],滁州市: [118.3011627, 32.31653214],阜阳市: [115.8097305, 32.90220642],宿州市: [116.9701538, 33.6401329],六安市: [116.4927902, 31.75352287],亳州市: [115.7709, 33.879292],池州市: [117.4773331, 30.65686607],宣城市: [118.7586551, 30.94078918],福建: [119.2978134, 26.07859039],福州市: [119.2978134, 26.07859039],厦门市: [118.0875168, 24.45743561],莆田市: [119.0103226, 25.43813705],三明市: [117.6012268, 26.22301292],泉州市: [118.5896378, 24.91591835],漳州市: [117.6530914, 24.51816368],南平市: [118.1691208, 26.64484215],龙岩市: [117.0303879, 25.10970306],宁德市: [119.5183182, 26.6664772],江西: [115.8999176, 28.67599106],南昌市: [115.8999176, 28.67599106],景德镇市: [117.1179428, 29.19516754],萍乡市: [113.841423, 27.63298988],九江市: [115.984581, 29.72321129],新余市: [114.9293823, 27.80654717],鹰潭市: [117.0302811, 28.2455864],赣州市: [114.9336777, 25.85288239],吉安市: [114.9704285, 27.1062088],宜春市: [114.3746109, 27.79557419],抚州市: [116.3010483, 27.93483162],上饶市: [117.9634018, 28.45326614],山东: [117.0056, 36.6670723],济南市: [117.0056, 36.6670723],青岛市: [120.3581696, 36.13386154],淄博市: [118.0560532, 36.7935791],枣庄市: [117.556282, 34.87264633],东营市: [118.4959564, 37.46191406],烟台市: [121.3799362, 37.53561401],潍坊市: [119.1068497, 36.7040863],济宁市: [116.576561, 35.40924072],泰安市: [117.1241074, 36.1871109],威海市: [122.1116867, 37.50076294],日照市: [119.4515533, 35.42756271],莱芜市: [117.66173, 36.205116],临沂市: [118.3379593, 35.06945038],德州市: [116.2878723, 37.45369339],聊城市: [115.9884262, 36.44943237],滨州市: [118.0217667, 37.36781311],菏泽市: [115.4457626, 35.24853897],河南: [113.6500473, 34.7570343],郑州市: [113.6500473, 34.7570343],开封市: [114.3461685, 34.7851944],洛阳市: [112.4247971, 34.66804123],平顶山市: [113.3001938, 33.74362946],安阳市: [114.3500519, 36.09685135],鹤壁市: [114.1546707, 35.94008255],新乡市: [113.8685532, 35.30746841],焦作市: [113.2217865, 35.24735642],濮阳市: [115.0149536, 35.70189667],许昌市: [113.8215866, 34.02685928],漯河市: [114.0410919, 33.57250977],三门峡市: [111.1952591, 34.78076935],南阳市: [112.5375137, 32.99901962],商丘市: [115.6471863, 34.44358444],信阳市: [114.0677185, 32.13063049],周口市: [114.6372528, 33.62804031],驻马店市: [114.0356903, 32.97904205],济源市: [112.6027201, 35.06706997],湖北: [114.2919388, 30.56751442],武汉市: [114.2919388, 30.56751442],黄石市: [115.0749893, 30.21379852],十堰市: [110.7827988, 32.65213013],宜昌市: [111.2852707, 30.70395279],襄阳市: [112.1411133, 32.04539871],鄂州市: [114.8811874, 30.40276718],荆门市: [112.2002106, 31.03021622],孝感市: [113.9113312, 30.92845535],荆州市: [112.2477875, 30.31733513],黄冈市: [114.8649292, 30.44901848],咸宁市: [114.2687378, 29.89432716],随州市: [113.36982, 31.715105],恩施土家族苗族自治州: [109.4881804, 30.27218711],仙桃市: [113.4545113, 30.36252891],潜江市: [112.8993007, 30.40148025],天门市: [113.1661477, 30.66340805],神农架林区: [110.6759643, 31.74451435],湖南: [112.9812698, 28.20082474],长沙市: [112.9812698, 28.20082474],株洲市: [113.1520615, 27.85422325],湘潭市: [112.9150238, 27.87335014],衡阳市: [112.5993576, 26.90055466],邵阳市: [111.4773789, 27.25023651],岳阳市: [113.0980682, 29.37461853],常德市: [111.6876297, 29.03820992],张家界市: [110.4814835, 29.13187981],益阳市: [112.3340683, 28.60197067],郴州市: [113.0286484, 25.80229187],永州市: [111.6121979, 26.2112999],怀化市: [109.9542313, 27.54740715],娄底市: [111.9938965, 27.74133492],湘西土家族苗族自治州: [109.7389287, 28.31173554],广东: [113.2614288, 23.11891174],广州市: [113.2614288, 23.11891174],韶关市: [113.6053925, 24.80877686],深圳市: [114.110672, 22.55639648],珠海市: [113.5682602, 22.27258873],汕头市: [116.6837997, 23.36269188],佛山市: [113.1145172, 23.03487778],江门市: [113.0847473, 22.59119034],湛江市: [110.3992233, 21.19499779],茂名市: [110.8888474, 21.67071724],肇庆市: [112.4514084, 23.05788231],惠州市: [114.3924027, 23.08795738],梅州市: [116.1079407, 24.31450081],汕尾市: [115.3640137, 22.77868652],河源市: [114.6938171, 23.73484039],阳江市: [111.9578934, 21.84523392],清远市: [113.0212631, 23.71959686],东莞市: [113.7487717, 23.0485363],中山市: [113.3714523, 22.52685356],潮州市: [116.63666, 23.667706],揭阳市: [116.34977, 23.542976],云浮市: [112.03999, 22.933193],广西: [108.3117676, 22.80654335],南宁市: [108.3117676, 22.80654335],柳州市: [109.4028091, 24.31040573],桂林市: [110.2866821, 25.28188324],梧州市: [111.3059464, 23.48661995],北海市: [109.1191711, 21.47979736],防城港市: [108.35658, 21.768936],钦州市: [108.6147003, 21.94986916],贵港市: [109.60844, 23.099092],玉林市: [110.1414719, 22.63189697],百色市: [106.6121063, 23.90158272],贺州市: [111.53455, 24.417259],河池市: [108.0516281, 24.69689179],来宾市: [109.23294, 23.73144],崇左市: [107.35506, 22.420197],海南: [110.3465118, 20.03179359],海口市: [110.3465118, 20.03179359],三亚市: [109.5078201, 18.23404312],三沙市: [112.33356, 16.83272],儋州市: [109.5806849, 19.52092966],五指山市: [109.5169672, 18.77516377],琼海市: [110.4746526, 19.25839642],文昌市: [110.797742, 19.54330274],万宁市: [110.3897474, 18.79532292],东方市: [108.6536594, 19.09613826],定安县: [110.3590789, 19.68133946],屯昌县: [110.1034735, 19.35182579],澄迈县: [110.0048522, 19.73847934],临高县: [109.690764, 19.91242821],白沙黎族自治县: [109.4516753, 19.22543478],昌江黎族自治县: [109.0555816, 19.29827945],乐东黎族自治县: [109.1736131, 18.7498679],陵水黎族自治县: [110.0371871, 18.50595483],保亭黎族苗族自治县: [109.7025825, 18.63904542],琼中黎族苗族自治县: [109.8382244, 19.03322394],重庆: [106.5103378, 29.55817604],四川: [104.0817566, 30.66105652],成都市: [104.0817566, 30.66105652],自贡市: [104.7763519, 29.36772156],攀枝花市: [101.6984177, 26.55479813],泸州市: [105.4378433, 28.88199425],德阳市: [104.3915482, 31.13044548],绵阳市: [104.7485504, 31.45634842],广元市: [105.8317032, 32.44396973],遂宁市: [105.5697098, 30.50339317],内江市: [105.0534363, 29.57756805],乐山市: [103.7514038, 29.56822395],南充市: [106.0816269, 30.79582214],眉山市: [103.83146, 30.050497],宜宾市: [104.6168671, 28.77025604],广安市: [106.63175, 30.474428],达州市: [107.5003433, 31.22469711],雅安市: [102.9826965, 29.98229408],巴中市: [106.75476, 31.849014],资阳市: [104.65019, 30.122671],阿坝藏族羌族自治州: [102.2247375, 31.89937935],甘孜藏族自治州: [101.962514, 30.04930605],凉山彝族自治州: [102.2674383, 27.88162244],贵州: [106.7113724, 26.57687378],贵阳市: [106.7113724, 26.57687378],六盘水市: [104.8732529, 26.5767746],遵义市: [106.9293976, 27.69538689],安顺市: [105.9260712, 26.24425888],毕节市: [105.2824173, 27.3062954],铜仁市: [109.1926804, 27.72216606],黔西南布依族苗族自治州: [104.9043531, 25.08987278],黔东南苗族侗族自治州: [107.9841392, 26.5836279],黔南布依族苗族自治州: [107.5222592, 26.25427309],云南: [102.704567, 25.04384422],昆明市: [102.704567, 25.04384422],曲靖市: [103.7947006, 25.49616623],玉溪市: [102.5332336, 24.35497284],保山市: [99.16872406, 25.11680222],昭通市: [103.7149277, 27.34227943],丽江市: [100.2342529, 26.87666512],普洱市: [100.9752121, 22.79548073],临沧市: [100.0878067, 23.8799305],楚雄彝族自治州: [101.5276607, 25.04494301],红河哈尼族彝族自治州: [103.3755878, 23.36421652],文山壮族苗族自治州: [104.2150486, 23.39868766],西双版纳傣族自治州: [100.7973892, 22.0074942],大理白族自治州: [100.2676255, 25.60646837],德宏傣族景颇族自治州: [98.58484387, 24.4323115],怒江傈僳族自治州: [98.85671501, 25.81753271],迪庆藏族自治州: [99.70302652, 27.81906659],西藏: [91.11445308, 29.64411352],拉萨市: [91.11445308, 29.64411352],日喀则市: [88.88110958, 29.26701395],昌都市: [97.17220509, 31.14069782],林芝市: [94.36153102, 29.64893975],山南市: [91.77308713, 29.23701982],那曲地区: [92.0513207, 31.47611103],阿里地区: [81.14540521, 30.40052298],陕西: [108.949028, 34.26168442],西安市: [108.949028, 34.26168442],铜川市: [109.0572815, 35.07545853],宝鸡市: [107.1383591, 34.38228607],咸阳市: [108.7101288, 34.33721542],渭南市: [109.5008392, 34.50152588],延安市: [109.471283, 36.59387207],汉中市: [107.0343933, 33.07814789],榆林市: [109.7574463, 38.29727554],安康市: [109.0257874, 32.68986511],商洛市: [109.9403909, 33.87035105],甘肃: [103.7500534, 36.06803894],兰州市: [103.7500534, 36.06803894],嘉峪关市: [98.27471161, 39.80265427],金昌市: [102.1657486, 38.49519348],白银市: [104.1837769, 36.53941727],天水市: [105.7152405, 34.58426666],武威市: [102.633461, 37.9269104],张掖市: [100.4502869, 38.93505859],平凉市: [106.6830673, 35.53551865],酒泉市: [98.51111603, 39.74496841],庆阳市: [107.6362305, 35.73855972],定西市: [104.6185684, 35.57523727],陇南市: [104.92928, 33.39484],临夏回族自治州: [103.2108906, 35.60121067],甘南藏族自治州: [102.9109863, 34.98324974],青海: [101.7778162, 36.61728828],西宁市: [101.7778162, 36.61728828],海东市: [102.4017109, 36.48207227],海北藏族自治州: [100.9009262, 36.95451784],黄南藏族自治州: [102.0150337, 35.51988388],海南藏族自治州: [100.6203395, 36.28660837],果洛藏族自治州: [100.2447092, 34.47138225],玉树藏族自治州: [97.00645511, 33.00525219],海西蒙古族藏族自治州: [97.37119774, 37.37707972],宁夏: [106.2719421, 38.46800995],银川市: [106.2719421, 38.46800995],石嘴山市: [106.3820572, 39.02428055],吴忠市: [106.1991119, 37.98549652],固原市: [106.2785873, 36.01325989],中卫市: [105.18661, 37.513252],新疆: [89.1895474, 42.95130195],乌鲁木齐市: [87.60611725, 43.79093933],克拉玛依市: [84.86360931, 45.59651184],吐鲁番市: [89.1895474, 42.95130195],哈密市: [93.51536928, 42.81854115],昌吉回族自治州: [87.30817902, 44.01114114],博尔塔拉蒙古自治州: [82.06674632, 44.90603596],巴音郭楞蒙古自治州: [86.14517515, 41.76404026],阿克苏地区: [80.2600596, 41.1684029],克孜勒苏柯尔克孜自治州: [76.16660835, 39.71529724],喀什地区: [75.98973068, 39.47039628],和田地区: [79.92243983, 37.11429217],伊犁哈萨克自治州: [81.32412996, 43.91686827],塔城地区: [82.98043953, 46.74531234],阿勒泰地区: [88.14031038, 47.8456187],石河子市: [86.078911, 44.30652036],阿拉尔市: [81.28064163, 40.54795812],图木舒克市: [79.06901071, 39.8649427],五家渠市: [87.54014426, 44.16797119],北屯市: [87.80014797, 47.36328619],铁门关市: [85.67585289, 41.86869689],双河市: [82.35500262, 44.84417562],可克达拉市: [81.04474154, 43.94797595],昆玉市: [79.29125037, 37.20942446],台湾: [120.960515, 23.69781],香港: [114.109497, 22.396428],澳门: [113.5440083, 22.20167546],钓鱼岛: [112.071486, 26.249452],吃味道: [116.271486, 25.549452],}
export default geoCoordMap

4、请求的接口数据

        getgeomap(this.par).then(res => {if (res.code == 200) {let resp = res.data;//map：为上文  import map from "./pubAnalyze.js"中的导出文件内容//mapOption：地图配置项中的const mapOption = {...}配置项//获取visualMap.min最大最小值，并更新为接口返回的最大最小值（左下角柱状图显示数据颜色使用）//series[0].data 更新为接口返回数据map.mapOption.visualMap.min = resp.regionDataMin * 1; //最大值map.mapOption.visualMap.max = resp.regionDataMax * 1; //最小值map.mapOption.series[0].data = resp.regionList;// map.mapOption.series[1].data = map.convertData(resp.regionList);this.districtEcharts.setOption(map.mapOption);//绘制地图} this.mapListLoading = false;});

------------------------------------------------------------------------------------------------------------------------------------------------------------------

会出现的问题：

如果地图显示不出来颜色：

查看接口返回来的字段，对照echarts/china1.js文件中的字段是否一致。

如果接口返回的为缩写，如：北京、香港、台湾，将china1.js中的名字也改为一致的即可（北京市=>北京，香港特别行政区=>香港...)