关于echarts自定义合并中国地图分区展示的问题

其实为了自己能够记住所遇到的问题，然后也是为了以后方便查找，开始决定尝试第一次写自己的博客。当然很多东西也是自己查找借鉴他人才最终解决的问题，所以在此也非常感谢他人的分享。本人前端小白一个，半路转行从事前端，希望以后能在这条路上一直走下去。

正题：因公司需求，需要对中国地图进行分区展示，而且是公司自己内部自定义的分区。

<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>

在此感谢https://blog.csdn.net/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(）必须和<script type="text/javascript" src="./json/china.json?cb=dataJson"></script>问号之后的callback函数名一致。也必须和script标签里面的function dataJson（）{}一致，这样才能成功获取异步操作。

毕竟觉得只是先是一个简单的demo，只想在本地试试可行否，不想放在服务器上。

关于echarts自定义合并中国地图分区展示的问题相关推荐

echarts地图api series_echarts实现中国地图数据展示
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 也可以在gith ...
echarts实现中国地图数据展示
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...
使用 Echarts 插件完成中国地图
目录前言: 什么是 Echarts 插件中国地图成品展示步骤: 完成中国地图代码总结: 前言: 大家都知道,一般情况下,想要使用前端设置一个中国地图需要使用 canvas 画布进行编写,不 ...
Echarts中引入中国地图
摘要:最近公司要求开发大屏大数据展示界面,其中有个需求是迁徙图,以下是自己的相关总结,如有些的不好的地方请大家多多指教,我会虚心学习并修改不足的地方. 思考:1.迁徙图实现的第一步是引入中国地图,那如 ...
爬取全国各地区汽车销量情况并用中国地图可视化展示
爬取全国各地区汽车销量情况并用中国地图可视化展示项目介绍网页详情代码爬取数据代码将爬取的数据保存到文档中中国地图可视化运行效果项目介绍爬取2017年全国各省份的汽车销量情况(由于数据 ...
使用Echarts完成对中国地图的绘制
目录前言 1.什么是Echarts插件 2.如何在vue中使用Echarts 3.中国地图的具体样式 4.如何使用Echarts来完成中国地图的绘制 5.总结前言我们在使用代码绘画地图的时候通常 ...
echarts geo地图示例_基于Echarts的中国地图数据展示
一.概述实际项目中大概率会遇到很多需要进行数据展示的地方,如折现图,柱状图等,今天给大家介绍一个更加炫酷的中国地图大数据展示,结合echarts免费开源第三方插件,可以实现自己的定制样式,定制提示. ...
echarts，map中国地图点击各省，跳转展示，从省返回到中国地图【china.js】
效果图: 1.点击省,跳转到河北省 2.返回,从省返回到中国地图话不多说,直接上代码,1.复制粘贴,2.在引入对应js即可注:全部各省地图,下载地址:** <!DOCTYPE html> ...
ECharts在线编辑中国地图数据可视化展示
1.打开ECharts网站输入网址:https://echarts.apache.org/examples/zh/editor.html?c=map-china&theme=light 2. ...

关于echarts自定义合并中国地图分区展示的问题

关于echarts自定义合并中国地图分区展示的问题相关推荐

最新文章

热门文章