沈阳网站建设培训学校,西安网站建设专家,html素材图片,wordpress修改主题页面1、下载所需地市的json 链接#xff1a;DataV.GeoAtlas地理小工具系列 在右侧输入需要的名称#xff0c;然后下载json文件到本地 2、在html 中准备容器#xff0c;并设置宽高 div idmapContent div refmapChart stylewidth:10…1、下载所需地市的json 链接DataV.GeoAtlas地理小工具系列 在右侧输入需要的名称然后下载json文件到本地 2、在html 中准备容器并设置宽高 div idmapContent div refmapChart stylewidth:100%;height:100%;margin-bottom: 0 / /div #mapContent { width: 100%; height: 100%; } 3、导入echarts 和 json 文件 import * as echarts from echarts import json_150000 from /static/neimenggu/county/150000.json 4、处理数据 //data 数据 data() { return { charts: null, mapjson: json_150000, codeToJson: { 150000: json_150000 }, mapOptions:{}, cityName: { 呼和浩特市: { value: , jcz: , kc: , fwz: }, ................... }, cityCodeAndName:{ 150100000000 :呼和浩特市, 150700000000 :呼伦贝尔市, 150200000000 :包头市, ................................... } } 5、初始化方法 initEcharts(areaCode) { const name json_ areaCode const cityName this.cityName const mapjson this.codeToJson[areaCode] if (this.charts) { this.charts.clear() } else { this.charts echarts.init(this.$refs.mapChart) } const top 28 const zoom 1.2 //地图缩放层级控制地图大小 const option { backgroundColor: rgba(0,0,0,0), tooltip: { show: false }, legend: { show: false }, grid: { height: 100% }, geo: { map: name, roam: false, selectedMode: false, // 是否允许选中多个区域 zoom: zoom, top: top, show: false }, series: [ { name: MAP, type: map, map: name, label: { show: false, color: #fff }, showLegendSymbol: false, data: [], selectedMode: single, // 是否允许选中多个区域 zoom: zoom, geoIndex: 1, top: top, tooltip: { show: true, formatter: function(params) { return params.name ( cityName[params.name].value ) }, //内容 backgroundColor: rgba(0,0,0,.6), //提示框样式 borderColor: rgba(147, 235, 248, .8), textStyle: { color: #FFF }, triggerOn: click }, emphasis: { //划过区域时样式设置 label: { show: false //是否显示区域名称在面积中 }, itemStyle: { areaColor: #389BB7, //区域的面积颜色 borderWidth: 1 //区域边框 } }, select: { disabled: true }, //区域样式设置 itemStyle: { borderColor: #2084bc, borderWidth: 2, areaColor: { type: radial, x: 0.5, y: 0.5, r: 0.8, colorStops: [ { offset: 0, color: rgba(147, 235, 248, 0) // 0% 处的颜色 }, { offset: 1, color: rgba(147, 235, 248, .2) // 100% 处的颜色 } ], globalCoord: false // 缺为 false }, shadowOffsetX: -2, shadowOffsetY: 2, shadowBlur: 10 } } ] } this.mapOptions option echarts.registerMap(name, mapjson) //处理数据 const jsonData this.getGeoCoordMap(mapjson) this.mapOptions.series[0].data jsonData const that this //给区域添加点击事件 this.charts.on(click, function(params) { //先移除上个标签 const popDiv document.getElementById(popup) if (popDiv) { document.getElementById(mapContent).removeChild(popDiv) } // 自定义弹框 var popup document.createElement(div) popup.id popup popup.style.position absolute popup.style.left params.event.event.clientX - 90 px popup.style.top params.event.offsetY - 120 px popup.style.backgroundColor #22312f popup.style.zIndex 999 popup.style.padding 0 20px popup.style.borderRadius 10px popup.innerHTML div idnmgInfoWindow div classtitle params.data.name 详情i classel-icon-close closebt id closeBtn/i/div div classitems span stylecolor:#62b2bc;项目一/spanspan span stylecolor:#62b2bc; cityName[params.data.name].jcz /span i classel-icon-arrow-right toDetail stylecolor:#62b2bc;/i/span /div div classitems span stylecolor:#62b2bc;项目二/spanspan span stylecolor:#62b2bc; cityName[params.data.name].kc /span i classel-icon-arrow-right toDetail stylecolor:#62b2bc;/i/span /div div classitems span stylecolor:#62b2bc;项目三/spanspan span stylecolor:#62b2bc; cityName[params.data.name].fwz /span i classel-icon-arrow-right toDetail stylecolor:#62b2bc;/i/span /div /div //添加到页面上 document.getElementById(mapContent).appendChild(popup) //给自定义弹框中添加关闭事件 const closeButton document.querySelector(#closeBtn) closeButton.addEventListener(click, function() { const popDiv document.getElementById(popup) if (popDiv) { document.getElementById(mapContent).removeChild(popDiv) } }) //给自定义弹框中的按钮跳转事件 const detailButton document.querySelectorAll(.toDetail) detailButton.forEach((item, index) { item.addEventListener(click, function() { console.log(点击事件,that) }) }) }) this.charts.setOption(option) }, getGeoCoordMap(mapjson) { const mapFeatures mapjson.features const cityCenter {} mapFeatures.map((item) { cityCenter[item.properties.name] item.properties.centroid || item.properties.center || [] }) const newData [] mapFeatures.map((item) { if (cityCenter[item.properties.name]) { newData.push({ name: item.properties.name, value: cityCenter[item.properties.name], adcode: item.properties.adcode }) } }) return newData } 6、结果
