文章来源：https://www.toymoban.com/news/detail-504675.html
文章来源地址https://www.toymoban.com/news/detail-504675.html
<template>
<div class="app-container">
<div class="chart-wrapper">
<div id="chinaMap" style="width: 100%;height: 80vh;"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import chinaJson from './china.json' // 这个是中国地图json
import 'echarts-gl'
export default {
name: '',
data() {
return {
chinaMapData: [{
name: '东北',
value: this.randomValue(),
},
{
name: '华北',
value: this.randomValue()
},
{
name: '西北',
value: this.randomValue()
},
{
name: '西南',
value: this.randomValue()
},
{
name: '华中',
value: this.randomValue()
},
{
name: '华南',
value: this.randomValue()
},
{
name: '华东',
value: this.randomValue()
}
],
chinaDaquGeo: {}
}
},
methods: {
progressFormat(percentage) {
return ""
},
randomValue() {
return Math.round(Math.random() * 1000);
},
drawChinaMap(id) {
this.mapCharts = echarts.init(document.getElementById(id));
var option = {
tooltip: {
// show:false
// formatter: function(params, ticket, callback) {
// return params.seriesName + '<br />' + params.name + '：' + params.value
// } //数据格式化
},
// visualMap使用了不能单独对板块设置颜色 （geo-> regions -> itemStyle -> areaColor ）
visualMap: {
min: 0,
max: 1500,
left: 'left',
top: 'bottom',
type: "piecewise",
//text: ['高','低'],//取值范围的文字
inRange: {
color: ['#e0ffff', '#006edd'] //取值范围的颜色
},
show: true //图注
},
// geo: {
// map: 'china',
// roam: true, //不开启缩放和平移
// zoom: 1, //视角缩放比例
// center: [108.5525, 34.3227],
// label: {
// normal: {
// show: true,
// fontSize: '18',
// color: 'rgba(0,0,0,0.7)'
// }
// },
// regions: [{ // 可对单个地图区域进行设置
// name: '华北', // 所对应的地图区域的名称
// //regionHeight: '', // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
// itemStyle: { // 单个区域的样式设置
// color: '#00FF00',
// opacity: 1,
// borderWidth: 0.4,
// areaColor: '#5F9EA0'
// },
// emphasis: { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
// label: { // label高亮时的配置
// show: true,
// textStyle: {
// color: '#fff ', // 高亮时标签颜色变为 白色
// fontSize: 15, // 高亮时标签字体 变大
// }
// },
// itemStyle: { // itemStyle高亮时的配置
// areaColor: '#5F9EA0', // 高亮时地图板块颜色改变
// }
// },
// }, {
// name: '西南',
// itemStyle: {
// areaColor: 'red',
// color: 'red',
// borderColor:'red'
// },
// emphasis: { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
// label: { // label高亮时的配置
// show: true,
// textStyle: {
// color: '#fff ', // 高亮时标签颜色变为 白色
// fontSize: 15, // 高亮时标签字体 变大
// }
// },
// itemStyle: { // itemStyle高亮时的配置
// areaColor: '#F3B329', // 高亮时地图板块颜色改变
// }
// },
// }],
// itemStyle: {
// normal: {
// borderColor: 'rgba(0, 0, 0, 0.2)'
// },
// emphasis: {
// areaColor: '#F3B329', //鼠标选择区域颜色
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// shadowBlur: 20,
// borderWidth: 0,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
// }
// }
// },
geo: [{
map: 'china',
zlevel:5,
label: {
show: true,
color: '#eee'
},
itemStyle: {
color: '#2075B8', // 背景
borderWidth: '1', // 边框宽度
borderColor: '#fff', // 边框颜色
}
},
{
map: 'china',
top:'11%',
zlevel:4,
itemStyle: {
color: '#3C5FA1', // 背景
borderWidth: '1', // 边框宽度
borderColor: '#3C5FA1', // 边框颜色
}
},
{
map: 'china',
top:'12%',
zlevel:3,
itemStyle: {
color: '#163F6C', // 背景
borderWidth: '1', // 边框宽度
borderColor: '#163F6C', // 边框颜色
}
},
{
map: 'china',
top:'13%',
zlevel:2,
itemStyle: {
color: '#31A0E6', // 背景
borderWidth: '1', // 边框宽度
borderColor: '#31A0E6', // 边框颜色
shadowColor: '#fff', // 外部阴影
shadowBlur:'10'
}
}
],
series: [
// {
// type: "scatter",
// roam: false,
// zoom: 1,
// coordinateSystem: "geo",
// data: [[121.221, 23.43, 12]], //散点的数据
// symbol: function (params) {
// return "image://http://47.96.130.88:9000/liughhxcdmsg/temp/xiangmu_1676884761006.png" ;
// // if (params[2] === "0") {
// // return "image://" + process.env.BASE_URL + "map/1.svg";
// // } else if (params[2] === "1") {
// // return "image://http://47.96.130.88:9000/liughhxcdmsg/temp/xiangmu_1676884761006.png" ;
// // }
// }, // svg图标
// z: 2,
// symbolSize: [48.63, 40], // symbols图标大小
// },
{
name: '事业部',
type: 'map',
// type: 'map3D',
geoIndex: 0,
data: this.chinaMapData,
markPoint: { //图表标注。
label: {
normal: {
show: true,
},
emphasis: {
show: true,
}
},
itemStyle: {
normal: {
color: 'rgba(72,150,128,1)'
}
},
data: [{
name: "四川移动",
coord: [
123.97, 47.33 //坐标，通过百度地图提取
],
symbol: 'http://47.96.130.88:9000/liughhxcdmsg/temp/xiangmu_1676884761006.png', // 标注图片地址路径
symbolSize: 32,
service: '这个是自定义的字段，不是echarts的配置',
url: '这个也是自定义的字段，不是echarts的配置'
}, {
name: "河南电信",
coord: [
105.97, 36.33
],
symbol: 'http://47.96.130.88:9000/liughhxcdmsg/temp/xiangmu_1676884761006.png', // 标注图片地址路径
symbolSize: 32,
service: '自定义',
url: 'http://www.idcd.com'
}, ]
}
},
// 散点图
{ // 涟漪效果
name: 'Top 6',
type: 'effectScatter',
coordinateSystem: 'geo',
data: [{
name: "苏尼特左旗",
value: [113.653412, 43.854108, 4500]
},
{
name: "二连浩特市",
value: [111.97981, 43.652895, 3560]
},
{
name: "阿巴嘎旗",
value: [114.970618, 44.022728, 3300]
},
{
name: "苏尼特右旗",
value: [112.65539, 42.746662, 2800]
},
{
name: "正镶白旗",
value: [115.031423, 42.286807, 2100]
},
{
name: "太仆寺旗",
value: [115.28728, 41.895199, 1900]
}
],
symbolSize: function(val) {
return val[2] / 200;
},
encode: {
value: 2
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke', //fill 、stroke
color: 'red'
},
emphasis: {
scale: false
},
label: {
position: 'left',
// formatter: '{b}',
position: 'right',
show: true,
// formatter:'{b}'
formatter: '{b}: {@score}'
// formatter: function(params) {
// // console.log(params)
// return `${params.data.name}:${params.data.value[2]}个`
// } //数据格式化
},
hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(230, 10, 10, 1)',
color: 'red'
},
zlevel: 8
}
]
};
this.mapCharts.setOption(option);
this.mapCharts.on('click', params => {
console.log(params)
let clickRegionCode = params.data.cityCode;
// this.getGeoJson(clickRegionCode)
// .then(regionGeoJson => this.initEcharts(regionGeoJson.data, params.data.cityCode))
// .catch(err => {
// this.getGeoJson('440000').then(GdGeoJson => this.initEcharts(GdGeoJson.data,
// '440000'))
// })
})
// },
/*this.mapCharts.on('click', function (params) {
alert(params.name);
});*/
},
//划分大区
mergeProvinces(chinaJson, names, properties) { //合并大区里省份的coordinates
var features = chinaJson.features;
var polygons = [];
for (var i = 0; i < names.length; i++) {
var polygonsCoordinates = [];
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]) {
// polygonsCoordinates.push(features[j].geometry.coordinates[k][d]);
// if (features[j].geometry.coordinates[0].constructor == String) { //合并coordinates
// for (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++) {
if (features[j].properties.name == '内蒙古自治区') {
polygonsCoordinates.push(features[j].geometry.coordinates[k]);
} else {
for (var d = 0; d < features[j].geometry.coordinates[k].length; d++) {
polygonsCoordinates.push(features[j].geometry.coordinates[k][d]);
}
}
// for (var d = 0; d < features[j].geometry.coordinates[k].length; d++) {
// polygonsCoordinates.push(features[j].geometry.coordinates[k][d]);
// }
}
// }
break;
}
}
}
polygons.push(polygonsCoordinates);
}
// 构建新的合并区域
var features = [];
for (var a = 0; a < names.length; a++) {
var feature = {
id: features.length.toString(),
type: "FeatureCollection",
geometry: {
type: "Polygon",
coordinates: polygons[a]
},
properties: {
name: properties.name[a] || "",
childNum: polygons[a].length
}
};
if (properties.cp[a]) {
feature.properties.cp = properties.cp[a];
}
// 将新的合并区域添加到地图中
features.push(feature);
}
console.log(polygons)
this.chinaDaquGeo.type = "FeatureCollection";
this.chinaDaquGeo.features = features;
},
repRegionStrategy() {
var params = {
names: [ //把各个大区的省份用二维数组分开
['北京市', '天津市', '河北省', '山西省', '内蒙古自治区'],
["黑龙江省", "吉林省", "辽宁省"],
['山东省', '江苏省', '安徽省', '江西省', '浙江省', '福建省', '上海市', '台湾省'],
['河南省', '湖北省', '湖南省'],
['广东省', '广西壮族自治区', '海南省', '香港特别行政区', '澳门特别行政区'],
['重庆市', '四川省', '云南省', '西藏自治区', '贵州省'],
['陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区']
],
properties: { //自定义大区的名字，要和上面的大区省份一一对应
name: ['华北', '东北', '华东', '华中', '华南', '西南', '西北'],
cp: [ //经纬度可以自己随意定义
[116.24, 40.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]
]
}
};
this.mergeProvinces(chinaJson, params.names, params.properties);
}
},
//调用
created() {
this.repRegionStrategy()
// 注册地图
echarts.registerMap('china', this.chinaDaquGeo) // 如果是js引入就不需要这一行了
},
mounted() {
// this.repRegionStrategy()
// // 注册地图
// this.echarts.registerMap('china', this.chinaDaquGeo) // 如果是js引入就不需要这一行了
this.$nextTick(function() {
this.drawChinaMap('chinaMap')
// this.repRegionStrategy()
// 注册地图
// this.echarts.registerMap('china', this.chinaDaquGeo) // 如果是js引入就不需要这一行了
})
}
}
</script>
<style scoped>
#chinaMap {
background-color: beige;
}
</style>
到了这里，关于echarts地图3D效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
