echarts地图下钻与回钻

最近在项目实际业务中为了更清晰的展示各省市的数据，使用echarts实现了地图的下钻和回钻。里面加了实际业务，所以代码有些冗余。

import * as echarts from 'echarts' //echarts引入
import './china'
// 引入省份经纬度
import { geoCoordMap } from './geoMap'
// 引入全国各市经纬度
import { city } from './city'
async initOptions() {await getResourceMapInfo(params).then((res) => {if (res.code == 0) {this.planData = []this.reaData = []this.show = trueres.data.forEach((e) => {if (e.testRegionList.length > 0) {this.regionList.push(e.testRegionList)}})res.data.forEach((item) => {if (geoCoordMap[item.testProvince]) {//计划派工if (item.recordNum !== null) {this.planData.push({name: item.testProvince,value: geoCoordMap[item.testProvince].concat(item.recordNum),list: item.recordNumList,})}//实际派工if (item.realityNum !== null) {this.reaData.push({name: item.testProvince,value: geoCoordMap[item.testProvince].concat(item.realityNum),list: item.realityNumList,})}}})}})this.options = {// 背景颜色backgroundColor: '#404a59',// 地图配置geo: {map: 'china',zoom: 1.2,roam: false, //支持拖拽缩放scaleLimit: {//滚轮缩放的极限控制min: 1.2, //缩放最小大小max: 3, //缩放最大大小},label: {// 通常状态下的样式 (字体)normal: {show: true,textStyle: {color: '#fff',},},// 鼠标放上去的样式emphasis: {textStyle: {color: '#fff',},},},// 地图区域的样式设置itemStyle: {normal: {borderColor: 'rgba(147, 235, 248, 1)',borderWidth: 1,areaColor: {type: 'radial',x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: '#4354b6', // 0% 处的颜色},{offset: 1,color: '#00b6fe', // 100% 处的颜色},],globalCoord: false, // 缺省为 false},shadowColor: 'rgba(128, 217, 248, 1)',shadowOffsetX: -2,shadowOffsetY: 2,shadowBlur: 10,},// 鼠标放上去高亮的样式emphasis: {areaColor: '#389BB7',borderWidth: 0,},},},legend: {show: true,bottom: '6%',left: '8%',orient: 'vertical',padding: 20,backgroundColor: 'rgba(236,246,255,0.30)',borderWidth: 1,borderColor: '#e9f3fb',itemGap: 0,itemWidth: 25,itemHeight: 25,symbolKeepAspect: false,inactiveColor: '#999999',textStyle: {fontSize: 16,color: '#',},data: [{name: '计划派工人数',icon: 'pin',},{name: '实际派工人数',icon: 'pin',},],},// 数值series: [{type: 'map',name: 'map',aspectScale: 0.75,layoutCenter: ['50%', '50%'], //地图位置layoutSize: '125%',roam: true,geoIndex: 0,label: {show: false,},showLegendSymbol: false,},{name: '计划派工人数',type: 'scatter',coordinateSystem: 'geo',data: this.planData,symbol: 'pin',symbolSize: [30, 30],symbolOffset: [-5, -5],label: {show: true,position: 'inside',color: '#333',formatter: function (params) {return params.value[2]},},},{name: '实际派工人数',type: 'scatter',coordinateSystem: 'geo',data: this.reaData,symbol: 'pin',symbolSize: [30, 30],symbolOffset: [10, 10],label: {show: true,position: 'inside',color: '#333',formatter: function (params) {return params.value[2]},},},],}if (this.charts) {this.charts.setOption(this.options)}this.allCoutryPlanData = this.planDatathis.allCoutryReaData = this.reaData},drawChart() {this.charts = echarts.init(document.getElementById('china'))this.charts.setOption(this.options)// 鼠标单击地图取消高亮效果this.charts.on('click', async (params) => {console.log(params)if (params.componentSubType == 'scatter') {this.changeTable = trueconsole.log(11111)this.data = params.data.listthis.data = mprowTable(this.data, 'testRegion')this.province = params.namethis.peopleDesc = params.seriesNamethis.peopleNum = params.value[2]if (params.seriesName == '实际派工人数') {this.typeNum = 2this.columns[4].title = '实际进场时间'this.columns[5].title = '实际离场时间'} else {this.typeNum = 1this.columns[4].title = '计划进场时间'this.columns[5].title = '计划离场时间'}}await this.charts.dispatchAction({type: 'unselect',name: params.name,})if (params.componentSubType == 'map') {console.log(this.regionList, 'regionList')this.selectRegion = []let index = this.regionList.findIndex((item) => item[0].testProvince == params.name)this.selectRegion = this.regionList[index]this.goDown(params.name)}})},async getMapJson(name) {const jsonData = await import('./json/' + name + '.json')return jsonData.default},// 地图下钻async goDown(name) {if (this.currentLevel != 2) {const mapname = nameif (!echarts.getMap(name)) {const newMapJson = await this.getMapJson(name)echarts.registerMap(mapname, newMapJson)}this.options.geo.map = mapnamethis.options.series[0].map = mapname//然后重新绘制地图this.currentName = namethis.history.push(this.currentName)//获取地图数据之后，修改地图options//需要改dataconsole.log(this.selectRegion, 'this.selectRegion')this.options.series[1].data = []this.options.series[2].data = []if (this.selectRegion !== undefined) {this.planData = []this.reaData = []this.selectRegion.forEach((item) => {//计划派工if (item.recordNum !== null && item.recordNum !== 0) {console.log(11111)this.planData.push({name: item.testRegion,value: city[item.testRegion].concat(item.recordNum),list: item.recordNumList,})}//实际派工if (item.realityNum !== null && item.realityNum !== 0) {console.log(2222222)this.reaData.push({name: item.testRegion,value: city[item.testRegion].concat(item.realityNum),list: item.realityNumList,})}})this.options.series[1].data = this.planDatathis.options.series[2].data = this.reaData}console.log(this.options)this.charts.setOption(this.options)this.currentLevel += 1this.data = []this.province = ''}},// 地图回钻returnUpLevel() {//先判断history有没有数据，能不能返回if (this.history.length == 0) {return false}//取出要返回的那个名字const name = this.history.pop()const mapname = 'china'// const currentJson = this.echarts.getMap(mapname).geoJson//修改地图配置重新绘制地图this.options.geo.map = mapnamethis.options.series[0].map = mapname//修改datathis.options.series[1].data = this.allCoutryPlanDatathis.options.series[2].data = this.allCoutryReaDatathis.charts.setOption(this.options)//修改当前的层级，名字this.currentName = namethis.currentLevel -= 1this.data = []this.province = ''},

echarts地图下钻与回钻相关推荐

Echarts地图下钻，省钻到市，市钻到县，县钻到乡
由于经费问题,只写了省钻到市,市钻到县与县钻到乡在本文中根本没有出现. 先贴两张图,第1张是全国地图: 第2张是点击河北后的河北省地图: 步骤详解: 1. 引入js const echarts = r ...
echarts 地图下钻功能
vue 实现 echarts 地图下钻安装效果图 echarts 安装 npm install echarts // 引入echarts 中国地图 import echarts from 'ech ...
vue+echarts地图下钻(全国-省-市)
本文中使用的数据为行政区编码json数据,大家自行下载.(本人超级菜鸟一枚,逻辑比较混乱,记录一下以免以后遇到相似功能忘记怎么写,也希望能帮到需要实现同样功能的人) 地图资源: 整体思路:1.先注册全 ...
echarts地图下钻（vue）
效果 <template><div><h3>地图下钻</h3><button class="button" @click=&q ...
echarts 地图下钻到市到区
echarts的地图展示,并且带有下钻到下级市区 vue.js里面操作echarts //vue里面修改模板 <template><div id="china_map_bo ...
echarts地图下钻打点案例
<div id="china3" :style="{height:'700px',width:'100%',background:'#0b0518'}"& ...
echarts地图下钻
最近做的项目用到了echarts的地图,默认为市区地图,需要实现从市区下钻到县级,首先我用的是echarts3.0实现的地图钻取功能. 要实现的效果为图(市区可切换,点市区还可以钻取) 1.第一步去e ...
echarts地图下钻效果
先看效果图,第二张是因为数据差距过大导致.可调再看代码 import * as echarts from 'echarts'; import mapJson from '../utils/福州市.j ...
echarts实现地图下钻
公司的新项目需要写这样的地图,还要能两级下钻到省,下面是我写好了的样子,我今天就是复一下盘: 如何用echarts显示地图首先需要下载map的Json数据,我放到这里:mapJson 然后使用ech ...

echarts地图下钻与回钻

echarts地图下钻与回钻相关推荐

最新文章

热门文章