网站制作怎么报价,石家庄网络seo推广,广州哪家做网站,达内网站建设在数据可视化中#xff0c;地图是很重要的一个环节#xff0c;很多时候需要展现的不仅是国家地图#xff0c;还需要能从国家进入到省市。这个逐级进入的过程就是我们今天说的地图下钻。 地图下钻看起来很屌、很高大上#xff0c;但是仔细琢磨一下#xff0c;技术实现上真的…在数据可视化中地图是很重要的一个环节很多时候需要展现的不仅是国家地图还需要能从国家进入到省市。这个逐级进入的过程就是我们今天说的地图下钻。 地图下钻看起来很屌、很高大上但是仔细琢磨一下技术实现上真的很简单。 文章目录 1. 本章主要功能介绍1. 地图下钻实现思路本章核心2. 下钻代码实现本章核心3. 完整代码3.1 vue部分3.2 mapData.js 部分 4. 接口数据 1. 本章主要功能介绍
自定义标注样式自定义tooltip弹窗样式上章内容 echarts 自定义标注样式自定义tooltip弹窗样式自定义地图贴图样式上章内容echarts 实现中国geo地图自定义贴图实例下拉菜单选择切换地图省份本章核心点击地图切换地图省份本章核心进入全屏/退出全屏其他
1. 地图下钻实现思路本章核心
mounted 里面首先初始化一个中国地图的数据provinceCode默认为100000创建echarts实例获取中国地图的 geoJSON 数据拿到geoJSON 数据调用initEcharts函数区创建echartsgeoJSON 数据对echarts进行渲染上图上图完成后通过 this.myChart.on(click,(){}) 事件活动点击的对象params.name 可以拿到点击的省份名称修改 provinceCode 值为点击的省份监听 provinceCode 改变重新执行第一递归循环即可
2. 下钻代码实现本章核心 3. 完整代码
3.1 vue部分
templatediv classmapdiv classnavProvinceselectv-modelprovinceCodechangechangeProvince($event.target.value)option:valueitem.codev-for(item, index) in provinceData():keyindex{{ item.name }}/option/selectimg src/assets/img/dataView/down.webp alt srcset //divdiv classnavBase v-ifbaseIdselect v-modelbaseId changechangeBaseId($event.target.value)option:valueitem.baseIdv-for(item, index) in baseData:keyindex{{ item.name }}/option/selectimg src/assets/img/dataView/down.webp alt srcset //divdivclassscreenclicktoggleFullScreen:titleisFullscreen ? 退出全屏 : 进入全屏img src/assets/img/dataView/screen.webp alt srcset /span{{ isFullscreen ? 退出全屏 : 进入全屏 }}/span/divdiv refmyEchart idpersonnel/div/div
/templatescript
import echarts-gl; //3D地图插件
import screenfull from screenfull;
import axios from axios;
import {provinceObj,provinceData,getCodeByName,formatHtml,
} from ./js/mapData;
import { API_listBase } from /api/dataView;
import { mapGetters } from vuex;
export default {data() {return {provinceData,isFullscreen: false,publicUrl: https://geo.datav.aliyun.com/areas_v3/bound/,chinaGeoJson: [],myChart: null,mapImg: null, //地图底色mapActiveImg: null, //地图悬浮移入后的底色baseData: [], //基地数据provinceCode: 100000,baseId: ,};},computed: {...mapGetters({getProvinceCode: dataView/getProvinceCode,getBaseId: dataView/getBaseId,}),},watch: {provinceCode(_newData, _oldData) {this.provinceCode _newData;this.$store.commit(dataView/SET_PROVINCECODE,provinceObj[_newData] 全国 ? : _newData);this.getList();},},methods: {// 请求三方地图数据接口async getGeoJson(jsonName, province) {let res await axios.get(${this.publicUrl}${jsonName});if (res res.status 200) {this.initEcharts(res.data, province);}},// 加载地图数据initEcharts(geoJson, name) {this.$echarts.registerMap(name, geoJson);let option {tooltip: {trigger: item,formatter: function (params) {// 为小图表创建一个容器if (params.data) {return params.name : params.data.data.datas;}},},geo: {map: name 全国 ? china : name,zoom: 1,roam: false,itemStyle: {normal: {areaColor: {type: radial,x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: #09132c, // 0% 处的颜色},{offset: 1,color: #274d68, // 100% 处的颜色},],globalCoord: true, // 缺省为 false},shadowColor: rgb(13, 48, 92,0.8), //底层颜色shadowOffsetX: 10,shadowOffsetY: 11,},},regions: [{show: false,name: 南海诸岛,itemStyle: {areaColor: rgba(0, 10, 52, 1),borderColor: rgba(0, 10, 52, 1),normal: {opacity: 0,label: {show: false,color: #009cc9,},},},},],},series: [{type: map,roam: false,label: {normal: {show: true,textStyle: {color: #D5E0EE,},},emphasis: {textStyle: {color: rgb(183,185,14),},},},itemStyle: {normal: {borderColor: rgb(81, 184, 220),borderWidth: 1,areaColor: {image: this.mapImg,repeat: repeat,},},emphasis: {areaColor: {image: this.mapActiveImg,repeat: repeat,},borderColor: #2ab8ff,borderWidth: 1,shadowColor: rgba(0, 255, 255, 0.7),shadowBlur: 10,shadowOffsetX: 0,shadowOffsetY: 1,label: {show: false,},},},zoom: 1,map: name 全国 ? china : name, //使用},{type: scatter,coordinateSystem: geo,itemStyle: {color: #f00,},tooltip: {trigger: item,backgroundColor: transparent,formatter: function (params) {return formatHtml(params.data);},},symbol: image://${require(/assets/img/dataView/point.png)},symbolSize: [48, 58],symbolOffset: [0, 0],z: 9999,data: this.baseData,},],};this.myChart this.$echarts.init(this.$refs.myEchart);this.myChart.setOption(option, true);this.myChart.off(click);this.myChart.on(click, (params) {this.$store.commit(dataView/SET_BASEID, params.data?.baseId);if (params.data?.provinceCode) {this.baseId params.data?.baseId;}if (params.data?.provinceCode || getCodeByName(params.name)) {this.provinceCode params.data?.provinceCode || getCodeByName(params.name);} else {return this.$message.warning(暂无继续进行地图下钻);}});},// 切换全屏toggleFullScreen() {if (!screenfull.isEnabled) return false;screenfull.toggle();},changeProvince(_data) {this.baseId ;this.$store.commit(dataView/SET_BASEID, );},changeBaseId(_data) {let params this.baseData.find((item) item.baseId _data);if (params) {this.provinceCode params?.provinceCode;} else {return this.$message.warning(切换失败);}},async getList() {let { code, data } await API_listBase({provinceCode: this.getProvinceCode,baseId: this.getBaseId,});if (code 200) {this.baseData data.map((item, _index) {return {...item,value: item.baseLocation.split(,),name: item.unitName,province: item.province,computilityData: item.computilityData? item.computilityData: {baseCpuserverNumber: 0,baseCpuScores: 0,baseIdlecpuScores: 0,baseMemoryCapacity: 0,baseIdlememoryCapacity: 0,baseStorageCapacity: 0,baseIdlestorageCapacity: 0,baseUploadBandwidthCapacity: 0,baseIdleuploadBandwidthCapacity: 0,baseDownloadBandwidthCapacity: 0,baseIdledownloadBandwidthCapacity: 0,baseGpuserverNumber: 0,baseGpuScores: 0,baseIdlegpuScores: 0,baseNpuserverNumber: 0,baseNpuScores: 0,baseIdlenpuScores: 0,baseFp16Computility: 0,baseIdlefp16Computility: 0,baseFp32Computility: 0,baseIdlefp32Computility: 0,baseGraphicsMemoryCapacity: 0,baseIdlegraphicsMemoryCapacity: 0,},};});}// 初始化中国地图this.$nextTick(() {this.myChart this.$echarts.init(this.$refs.myEchart);this.getGeoJson(${this.provinceCode}_full.json,provinceObj[this.provinceCode]);});},},mounted() {// 地图底色this.mapImg document.createElement(img);this.mapImg.style.height this.mapImg.height this.mapImg.width this.mapImg.style.width 100px;this.mapImg.src data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMS1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICIIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMy4wIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3Qjk5OUJBRTZGNTMxMUVGODI5Q0EzOUY4MDEwOEUwNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3Qjk5OUJBRjZGNTMxMUVGODI5Q0EzOUY4MDEwOEUwNyIIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjdCOTk5QkFDNkY1MzExRUY4MjlDQTM5RjgwMTA4RTA3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjdCOTk5QkFENkY1MzExRUY4MjlDQTM5RjgwMTA4RTA3Ii8IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREYIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj83sCwvQAAAdRJREFUeNqMVUtOAzEMta1uGKTuQD0K4iLdcy24QDlIz1KVHRJlZP87UwyZTat42e7Rc8fnyezt/gPgFAIAA2on7hROIfzIactJAMjq97hLd3uP42neHKBa7wyNcfrLKaZO4wPVmRSqmxSFkrgm9ymmhpTQilSMx9Rt/7gO6j7ATupknRAsPrwRW1S7CzHJWOc4VvCoWZOpam2VkpJa2pPxiXHLrhdbq2D6nxx6DpRtV3dgFnLLEV7EtmC6WEcmBwe4esx67q0ZSN4xbwBLVkzJrddQf7chg2P/FDpthxbQVm/4R9DaSjW9uS0MzrgRkrlskthUWe2ld1rlHzHXcaxRNQPaoiYzu3jVKInY8CeFC4TczEAUqV8DmkCOo7nJCHZjHOAs/MMRe1usFbO20BcZMYfTEMo5mSnEcE48CgRV6Uu1jyuCcuRWKEAsKeEKTWyc2sdhL4XMyoWOIJ5yQRFDbwCajvfXMUs8KTJem1UgkKGrpPi7taWoMazq5QR1hFbDaiqt9HFJnoj/GTB1f2ZckboX8Y8lHD0OGFLupxc1xhy3q11s7hOarMGQ8vDOABDuji/70xncI51eA1o/DtJekjbnrY0a6kAAQAfPMeH5wCecwAAAABJRU5ErkJggg;// 地图悬浮移入后的底色this.mapActiveImg document.createElement(img);this.mapActiveImg.style.height this.mapActiveImg.height this.mapActiveImg.width this.mapActiveImg.style.width 100px;this.mapActiveImg.src data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMS1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICIIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMy4wIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3NjJDOUNEMDZGNTMxMUVGQjI2OUM4RUM4MzQwOTI5RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3NjJDOUNEMTZGNTMxMUVGQjI2OUM4RUM4MzQwOTI5RiIIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjc2MkM5Q0NFNkY1MzExRUZCMjY5QzhFQzgzNDA5MjlGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc2MkM5Q0NGNkY1MzExRUZCMjY5QzhFQzgzNDA5MjlGIi8IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREYIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8LKM4xwAAAfVJREFUeNqEVV1OwzAMjqOqSKMPsN6AnYEdiCtxC47CzjBusJHDIkixThx6zpOO/LQxU7iON/32YOP97fwdXDTAHAY6cd5SGZE51CZMX29HzePqlYmnS71yYcDfvIW3K/qdNe80mj23XnmzaVafu/ZyGzhguuh48BQYxujjzehWh6yOX7XVj190MLlU4rO5OHgPIYDKkzDhYJygoANlXBNIT6B0NnSCAIr5HOPNJs8xmzpcbUb1lobgOIfBjQRm7MOAU2p9157yKggzYZCUe7WZifLmLRELHPVD/h2UmWewJFNrsSFFfhcyWGCiDUJJcZQQY4V/ULKJWGstPY12CTVnU6vVrFkjcKxVT8yk3bEl0yL2FQsR5O4aeomVCUkJeszXM0oMqDtbNgQ6iEdaFCCZMmB1Xo9Op7pbRCrkQksMBQQdgJ9iwag70xDVFJukq7DWV4vQ2CVFi22cqdBlIkXDNUL8S6cxVgXcLoK52AQu1SKmjeLCBjIwXseOvh4KlhF1dK4uTxT3SzYSZoirQ2QZlsGe81toXRsKa5RNYEOpe0G2LgOz2eqOVa2VabSNS11e/Ck7rXhG1xwDFR0UOXzZvBozs3d6DkBJNyy0vDk7Ynbzst8ePcSj5XuH1u6Uv6hE1HTn7emkebdbv8nwADKuQThmsBu6AAAAABJRU5ErkJggg;// 初始化中国地图this.getList();},
};
/scriptstyle langless scoped
.map {flex: 1;width: 100%;color: #fff;position: relative;.navProvince,.navBase {position: absolute;left: 40px;width: 160px;height: 32px;display: flex;align-items: center;justify-content: space-between;background: url(../../../../assets/img/dataView/nav_bg.webp) no-repeat;background-size: 160px 32px;background-position: center;cursor: pointer;z-index: 2;img {height: 16px;position: absolute;top: 50%;right: 10px;transform: translateY(-50%);}}.navBase {left: 220px;}.screen {position: absolute;right: 40px;width: 118px;height: 32px;display: flex;align-items: center;justify-content: center;background: url(../../../../assets/img/dataView/screen_bg.webp) no-repeat;background-size: 118px 32px;background-position: center;cursor: pointer;z-index: 2;img {height: 24px;margin-right: 10px;}span {font-weight: normal;font-size: 16px;color: #4b94ff;line-height: 16px;}}
}#personnel {width: 100%;height: 100%;z-index: 1;
}
select {width: 100%;padding: 6px 10px 6px 16px;box-sizing: border-box;font-size: 16px;color: #4b94ff;line-height: 16px;-webkit-appearance: none;/* for Chrome, Safari */-moz-appearance: none;/* for Firefox */-ms-appearance: none;/* for IE10 */appearance: none;-moz-appearance: none;background: transparent;-webkit-appearance: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-tap-highlight-color: transparent;option {background: transparent;}
}
/stylestyle scoped langless
/deep/ .tooltip-chart {background-color: transparent;width: 520px;height: 334px;background: url(../../../../assets/img/dataView/tooltip_bg.webp) no-repeat;background-size: 100% 100%;background-position: center;padding: 16px 25px 16px 20px;grid-gap: 0 40px;overflow: auto;display: grid;grid-template-columns: repeat(2, 1fr);.item {font-weight: 500;font-size: 13px;color: #ffffff;line-height: 20px;display: flex;justify-content: space-between;align-items: center;span {.name{// color: #4b94ff;}:first-child {position: relative;padding-left: 14px;::after {content: ;position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 5px;height: 5px;border-radius: 50%;background: #fff;}}:last-child {text-align: left;}}}
}
/style
3.2 mapData.js 部分
export const provinceObj {100000: 全国,110000: 北京,120000: 天津,130000: 河北,140000: 山西,150000: 内蒙古,210000: 辽宁,220000: 吉林,230000: 黑龙江,310000: 上海,320000: 江苏,330000: 浙江,340000: 安徽,350000: 福建,360000: 江西,370000: 山东,410000: 河南,420000: 湖北,430000: 湖南,440000: 广东,450000: 广西,460000: 海南,500000: 重庆,510000: 四川,520000: 贵州,530000: 云南,540000: 西藏,610000: 陕西,620000: 甘肃,630000: 青海,640000: 宁夏,650000: 新疆,710000: 台湾,810000: 香港,820000: 澳门,
};export let provinceData () {let arr [];for (const key in provinceObj) {arr.push({code: key,name: provinceObj[key],});}return arr;
};/*** 根据名称查询对应的键* param {*} name* returns*/
export let getCodeByName (name) {for (const [key, value] of Object.entries(provinceObj)) {if (value name) {return key;}}return null; // 如果没有找到
};/*** 基地展示数据* param {*} param0* returns*/
export let formatHtml ({ name, computilityData }) {return div classtooltip-chartdiv classitemspan基地名称/spanspan classname${name}/span/divdiv classitemspan基地CPU服务器数量/spanspan${computilityData?.baseCpuserverNumber || 0}/span/divdiv classitemspan基地CPU总核数/spanspan${computilityData?.baseCpuScores || 0}/span/divdiv classitemspan基地空闲CPU核数/spanspan${computilityData?.baseIdlecpuScores || 0}/span/divdiv classitemspan基地内存空间总容量/spanspan${computilityData?.baseMemoryCapacity || 0}/span/divdiv classitemspan基地空闲内存空间容量/spanspan${computilityData?.baseIdlememoryCapacity || 0}/span/divdiv classitemspan基地存储空间总容量/spanspan${computilityData?.baseStorageCapacity || 0}/span/divdiv classitemspan基地空闲存储空间容量/spanspan${computilityData?.baseIdlestorageCapacity || 0}/span/divdiv classitemspan基地上行网络带宽总量/spanspan${computilityData?.baseUploadBandwidthCapacity || 0}/span/divdiv classitemspan基地空闲上行网络带宽/spanspan${computilityData?.baseIdleuploadBandwidthCapacity || 0}/span/divdiv classitemspan基地下行网络带宽总量/spanspan${computilityData?.baseDownloadBandwidthCapacity || 0}/span/divdiv classitemspan基地空闲下行网络带宽/spanspan${computilityData?.baseIdledownloadBandwidthCapacity || 0}/span/divdiv classitemspan基地GPU服务器数量/spanspan${computilityData?.baseGpuserverNumber || 0}/span/divdiv classitemspan基地GPU总核数/spanspan${computilityData?.baseGpuScores || 0}/span/divdiv classitemspan基地空闲GPU核数/spanspan${computilityData?.baseIdlegpuScores || 0}/span/divdiv classitemspan基地NPU服务器数量/spanspan${computilityData?.baseNpuServerNumber || 0}/span/divdiv classitemspan基地NPU总核数/spanspan${computilityData?.baseNpuScores || 0}/span/divdiv classitemspan基地空闲NPU核数/spanspan${computilityData?.baseIdlenpuScores || 0}/span/divdiv classitemspan基地FP16总算力/spanspan${computilityData?.baseFp16Computility || 0}/span/divdiv classitemspan基地空闲FP16算力/spanspan${computilityData?.baseIdlefp16Computility || 0}/span/divdiv classitemspan基地FP32总算力/spanspan${computilityData?.baseFp32Computility || 0}/span/divdiv classitemspan基地空闲FP32算力/spanspan${computilityData?.baseIdlefp32Computility || 0}/span/divdiv classitemspan基地显存总量/spanspan${computilityData?.baseGraphicsMemoryCapacity || 0}/span/divdiv classitemspan基地空闲显存/spanspan${computilityData?.baseIdlegraphicsMemoryCapacity || 0}/span/div/div;
};4. 接口数据
把moke的接口数据也贴下方便各位看代码
