Vue3 + Echarts(5.x) 实现中国地图 |
您所在的位置：网站首页 › 中国地图各省省会放大版 › Vue3 + Echarts(5.x) 实现中国地图 |
Vue3 + Echarts(5.x) 实现中国地图
|
Echarts展示地图
效果图
默认安装的是 5.x 版本 在这个版本中的引入方式必须是下面这种方法 import * as echarts from 'echarts' 源码在echarts5.x版本中，已经不再提供地图数据，所以需要我们自己手动下载，我这里已经提供好了下载地址 提前准备好地图数据 china.js 下载链接：https://pan.quark.cn/s/9410ce68ed9d 然后下面是地图实现源码 import { onMounted } from 'vue' import * as echarts from 'echarts' import '../assets/china' import { getCityPositionByName } from '@/assets/cityPostion' // 模拟10条数据 let mockData = [ { name: '北京', value: 500 }, { name: '天津', value: 200 }, { name: '河南', value: 300 }, { name: '广西', value: 300 }, { name: '广东', value: 300 }, { name: '河北', value: 300 }, ] onMounted(() => { let data = mockData.map(i => { let cityPosition = getCityPositionByName(i.name).value return { name: i.name, value: cityPosition.concat(i.value), } }) let initMap = echarts.init(document.querySelector('#mapDom')) initMap.setOption({ backgroundColor: 'transparent', // 设置背景色透明 // 必须设置 tooltip: { show: false, }, // 地图阴影配置 geo: { map: 'china', // 这里必须定义，不然后面series里面不生效 tooltip: { show: false, }, label: { show: false, }, zoom: 1.03, silent: true, // 不响应鼠标时间 show: true, roam: false, // 地图缩放和平移 aspectScale: 0.75, // scale 地图的长宽比 itemStyle: { borderColor: '#0FA3F0', borderWidth: 1, areaColor: '#070f71', shadowColor: 'rgba(1,34,73,0.48)', shadowBlur: 10, shadowOffsetX: -10, shadowOffsetY: 10, }, select: { disabled: true, }, emphasis: { disabled: true, areaColor: '#00F1FF', }, // 地图区域的多边形 图形样式 阴影效果 // z值小的图形会被z值大的图形覆盖 top: '10%', left: 'center', // 去除南海诸岛阴影 series map里面没有此属性 regions: [{ name: '南海诸岛', selected: false, emphasis: { disabled: true, }, itemStyle: { areaColor: '#00000000', borderColor: '#00000000', }, }], z: 1, }, series: [ // 地图配置 { type: 'map', map: 'china', zoom: 1, tooltip: { show: false, }, label: { show: true, // 显示省份名称 color: '#ffffff', align: 'center', }, top: '10%', left: 'center', aspectScale: 0.75, roam: false, // 地图缩放和平移 itemStyle: { borderColor: '#3ad6ff', // 省分界线颜色 阴影效果的 borderWidth: 1, areaColor: '#17348b', opacity: 1, }, // 去除选中状态 select: { disabled: true, }, // 控制鼠标悬浮上去的效果 emphasis: { // 聚焦后颜色 disabled: false, // 开启高亮 label: { align: 'center', color: '#ffffff', }, itemStyle: { color: '#ffffff', areaColor: '#0075f4',// 阴影效果 鼠标移动上去的颜色 }, }, z: 2, data: data, }, { type: 'scatter', coordinateSystem: 'geo', symbol: 'pin', symbolSize: [50, 50], label: { show: true, color: '#fff', formatter(value) { return value.data.value[2] }, }, itemStyle: { color: '#e30707', //标志颜色 }, z: 2, data: data, }, ], }) })cityPostion.js 文件代码，这个文件主要是通过省份名称获取经纬度 const positionArr = [ { name: '北京', value: ['116.3979471', '39.9081726'] }, { name: '上海', value: ['121.4692688', '31.2381763'] }, { name: '天津', value: ['117.2523808', '39.1038561'] }, { name: '重庆', value: ['106.548425', '29.5549144'] }, { name: '河北', value: ['114.4897766', '38.0451279'] }, { name: '山西', value: ['112.5223053', '37.8357424'] }, { name: '辽宁', value: ['123.4116821', '41.7966156'] }, { name: '吉林', value: ['125.3154297', '43.8925629'] }, { name: '黑龙江', value: ['126.6433411', '45.7414932'] }, { name: '浙江', value: ['120.1592484', '30.265995'] }, { name: '福建', value: ['119.2978134', '26.0785904'] }, { name: '山东', value: ['117.0056', '36.6670723'] }, { name: '河南', value: ['113.6500473', '34.7570343'] }, { name: '湖北', value: ['114.2919388', '30.5675144'] }, { name: '湖南', value: ['112.9812698', '28.2008247'] }, { name: '广东', value: ['113.2614288', '23.1189117'] }, { name: '海南', value: ['110.3465118', '20.0317936'] }, { name: '四川', value: ['104.0817566', '30.6610565'] }, { name: '贵州', value: ['106.7113724', '26.5768738'] }, { name: '云南', value: ['102.704567', '25.0438442'] }, { name: '江西', value: ['115.8999176', '28.6759911'] }, { name: '陕西', value: ['108.949028', '34.2616844'] }, { name: '青海', value: ['101.7874527', '36.6094475'] }, { name: '甘肃', value: ['103.7500534', '36.0680389'] }, { name: '广西', value: ['108.3117676', '22.8065434'] }, { name: '新疆', value: ['87.6061172', '43.7909393'] }, { name: '内蒙古', value: ['111.6632996', '40.8209419'] }, { name: '西藏', value: ['91.1320496', '29.657589'] }, { name: '宁夏', value: ['106.2719421', '38.4680099'] }, { name: '台湾', value: ['120.9581316', '23.8516062'] }, { name: '香港', value: ['114.139452', '22.391577'] }, { name: '澳门', value: ['113.5678411', '22.167654'] }, { name: '安徽', value: ['117.2757034', '31.8632545'] }, { name: '江苏', value: ['118.7727814', '32.0476151'] }, ] export function getCityPositionByName(name) { return positionArr.find(item => item.name === name) } |
【本文地址】
今日新闻 |
推荐新闻 |