其实为了自己能够记住所遇到的问题，然后也是为了以后方便查找，开始决定尝试第一次写自己的博客。当然很多东西也是自己查找借鉴他人才最终解决的问题，所以在此也非常感谢他人的分享。本人前端小白一个，半路转行从事前端，希望以后能在这条路上一直走下去。
正题：因公司需求，需要对中国地图进行分区展示，而且是公司自己内部自定义的分区。
<div class="echarts-map"><div class="echarts-map-box" id="echartsMapBox" style="width: 1000px;height: 400px;"></div></div><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/echarts.js"></script><script type="text/javascript" src="js/china.js"></script><script type="text/javascript">// function dataJson (data){// d = data.features;// }function dataJson(chinaJson) {// console.log(chinaJson);var params = {names: [ //把各个大区的省份用二维数组分开['北京', '天津', '河北', '山西', '内蒙古'],["黑龙江", "吉林", "辽宁"],['山东', '江苏', '安徽', '江西', '浙江', '福建', '上海', '台湾'],['河南', '湖北', '湖南'],['广东', '广西', '海南', '香港', '澳门'],['重庆', '四川', '云南', '西藏', '贵州'],['陕西', '甘肃', '青海', '宁夏', '新疆']],properties: { //自定义大区的名字，要和上面的大区省份一一对应name: ['华北', '东北', '华东', '华中', '华南', '西南', '西北'],cp: [ //经纬度可以自己随意定义[116.24, 39.54],[126.32, 43.50],[121.28, 31.13],[114.20, 30.32],[113.15, 23.08],[104.04, 30.39],[103.49, 36.03]]}};mergeProvinces(chinaJson, params.names, params.properties);echarts.registerMap('china', chinaJson); // 注册地图var pRChart = echarts.init(document.getElementById('echartsMapBox'));var data = [ //地图数据{"name": "东北","value": 36},{"name": "华北","value": 73},{"name": "华南","value": 214},{"name": "华东","value": 253},{"name": "华中","value": 50},{"name": "西南","value": 104},{"name": "西北","value": 85}];option = {backgroundColor: '#fff', //地图背景色title: {text: '大区质量',left: 'center',top: 'top',textStyle: {color: '#333'}},grid: { //echarts地图距离容器位置left: 20,top: 20,containLabel: false,},tooltip: { //鼠标放上去提示trigger: 'item',triggerOn: 'click',backgroundColor: 'rgba(255,255,255,0)',position: function (point, params, dom, rect, size) {var x = point[0];var y = point[1];var boxW = size.contentSize[0];var boxH = size.contentSize[1];var posX = 0;var posY = 0;posX = x - 42;posY = y - boxH - 30;return [posX, posY];},formatter: function (params) {if (params.value != 0) {// var html = '<div id="outer"><div id="inner"><p> 评分：'+params.value+'</p></div></div>';var html = '<div class="demo">' +'<h4>' + params.name + '</h4>' +'<p id="score">警告：<span>' + params.value + '</span>条</p>' +'<p id="desc1">近1小时测试1000次</p>' +'<p id="desc2">成功750次，成功率75%</p>' +'<div class="shixin"></div>' +'<div class="kongxin"></div>' +'</div>';}return html;}},//左侧小导航图标visualMap: {textStyle: {// color: '#000'color: ['#D3ECB9', '#4F81BD', '#F79646', '#FF0000']},x: 'left',y: 'top',pieces: [{gt: 95,label: '优 95以上'},{gt: 80,lte: 95,label: '良 80-95'},{gt: 40,lte: 80,label: '中 40-80'},{gt: 0,lte: 40,label: '差 0-40'}// {gt: 95, lte: 100}, // {gt: 80, lte: 95},// {gt: 40, lte:80},// {gt: 0, lte: 40}],color: ['#D3ECB9', '#4F81BD', '#F79646', '#FF0000']},geo: {map: "china",regions: [{name: "南海诸岛",itemStyle: {// 隐藏地图normal: {opacity: 0, // 为 0 时不绘制该图形}},label: {show: false // 隐藏文字}}]},series: [{name: '大区', //城市type: 'map',map: 'china',geoIndex: 1,// aspectScale: 0.75, //长宽比// symbolSize: 20,data: data,showLegendSymbol: false, // 存在legend时显示label: {normal: {show: true,textStyle: {color: '#333'}},emphasis: { //鼠标放上去时的状态show: true,textStyle: {color: '#333'}}},roam: false, //禁止拖拽和伸缩itemStyle: {normal: {areaColor: '#f6efa6',borderColor: '#a5a279',borderWidth: 1},emphasis: {areaColor: '#ffdf33'}}}]};pRChart.setOption(option);};var mergeProvinces = function (chinaJson, names, properties) { //合并大区里省份的coordinatesvar features = chinaJson.features;// console.log(chinaJson);var polygons = [];var polygons2 = [];for (var i = 0; i < names.length; i++) {var polygonsCoordinates = [];var polygonsEncodeOffsets = [];for (var z = 0; z < names[i].length; z++) {for (var j = 0; j < features.length; j++) {if (features[j].properties.name == names[i][z]) {if (features[j].geometry.coordinates[0].constructor == String) { //合并coordinatesfor (var l = 0; l < features[j].geometry.coordinates.length; l++) {polygonsCoordinates.push(features[j].geometry.coordinates[l]);}} else if (features[j].geometry.coordinates[0].constructor == Array) {for (var k = 0; k < features[j].geometry.coordinates.length; k++) {for (var d = 0; d < features[j].geometry.coordinates[k].length; d++) {polygonsCoordinates.push(features[j].geometry.coordinates[k][d]);}}}if (features[j].geometry.encodeOffsets[0].constructor == String) { //合并encodeOffsetspolygonsEncodeOffsets.push(features[j].geometry.encodeOffsets);} else if (features[j].geometry.encodeOffsets[0].constructor == Array) {for (var k = 0; k < features[j].geometry.encodeOffsets.length; k++) {if (features[j].geometry.encodeOffsets[k][0].constructor == Array) {for (var e = 0; e < features[j].geometry.encodeOffsets[k].length; e++) {polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets[k][e]);}} else {polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets[k]);}}}break;}}}polygons.push(polygonsCoordinates);polygons2.push(polygonsEncodeOffsets);}// 构建新的合并区域var features = [];for (var a = 0; a < names.length; a++) {var feature = {id: features.length.toString(),type: "FeatureCollection",geometry: {type: "Polygon",coordinates: polygons[a],encodeOffsets: polygons2[a]},properties: {name: properties.name[a] || "",childNum: polygons[a].length}};if (properties.cp[a]) {feature.properties.cp = properties.cp[a];}// 将新的合并区域添加到地图中features.push(feature);}chinaJson.features = features;};</script><script type="text/javascript" src="./json/china.json?cb=dataJson"></script></body>
在此感谢/weixin_33743661/article/details/93469931的分享。
说说我的问题：
1.在引入China.json 文件是，因为是下载到本地，如果直接引入会报错，大致的意思是，如果直接采用get或者getJSON方式获取china.json 会报错，chrome在读取本地相对路径脚本时，禁止向第三方请求数据。（只要是通过file://方式访问，或者直接拖进浏览器访问，都叫本地运行）就不管本地文件、还是服务器url文件都不行。浏览器为了同源策略，获取本地数据必须采用异步加载。
解决方法：
解决一：
放入tomcat，然后启动server，开启服务器模式，在浏览器中通过http://localhost:8080/index.html访问,~成功访问到本地json文件。 这个肯定OK的，因为后面将成功的demo运用在项目中，完全可行。
解决二：
放入火狐浏览器或者IE浏览器，亲测不ok，可能对以前早点的版本可行，那就不知道了。
解决三：
更改chrome的设置就行。
在chrome属性设置中，添加启动参数：
window
chrome快捷方式–右键“属性”–快捷方式–目标
--allow-file-access-from-files : 允许本地Ajax请求，也叫file协议下的Ajax请求
--enable-file-cookies : 允许chrome保存本地设置cookie
这个方法没事，因为这个设置后，不可能要求客户也这样做。
解决4，就是我代码中采用的本地JSONP的方式解决。在echarts中下载的china.json 数据的开头，必须将数据内容用函数括起来，而且函数名dataJson(）必须和<scripttype="text/javascript"src="./json/china.json?cb=dataJson"></script>问号之后的callback函数名一致。也必须和script标签里面的function dataJson（）{}一致，这样才能成功获取异步操作。
毕竟觉得只是先是一个简单的demo，只想在本地试试可行否，不想放在服务器上。
