地图json可在我的资源里下载
<template>
<div class="app-container">
<div class="chart-wrapper">
<div id="chinaMap" style="width: 100%; height: 80vh"></div>
</div>
</div>
</template>
<script>
// import 'echarts/map/js/china.js'
// import echarts from 'echarts'
import * as echarts from "echarts";
import chinaJson from "./china.json"; // 这个是json引用
import areaChina from "./areaChina.json"; //中国大区板块json
import "echarts-gl";
import mapJS from "./js/map";
export default {
mixins: [mapJS],
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: {},
hierarchy: 1, //地图层级 1 为全国 2为大区下面几个省 3为省级
};
},
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: 1000,
left: "left",
top: "bottom",
type: "piecewise",
//text: ['高','低'],//取值范围的文字
inRange: {
color: ["#e0ffff", "#006edd"], //取值范围的颜色
},
show: true, //图注
},
// geo: {
// map: "chinaJson", //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: "chinaJson", //china会有台湾岛屿小地图
zlevel: 5,
roam: true, //不开启缩放和平移
label: {
show: true,
color: "#eee",
},
itemStyle: {
color: "#2075B8", // 背景
borderWidth: "1", // 边框宽度
borderColor: "#fff", // 边框颜色
},
},
{
map: "chinaJson",
top: "11%",
roam: true, //不开启缩放和平移
zlevel: 4,
itemStyle: {
color: "#3C5FA1", // 背景
borderWidth: "1", // 边框宽度
borderColor: "#3C5FA1", // 边框颜色
},
},
{
map: "chinaJson",
top: "12%",
roam: true, //不开启缩放和平移
zlevel: 3,
itemStyle: {
color: "#163F6C", // 背景
borderWidth: "1", // 边框宽度
borderColor: "#163F6C", // 边框颜色
},
},
{
map: "chinaJson",
top: "13%",
roam: true, //不开启缩放和平移
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", (event) => {
console.log(event);
// 大区下砖
if (this.hierarchy == 1) {
let nameList = [
{
name: "华北",
list: ["北京市", "天津市", "河北省", "山西省", "内蒙古自治区"],
},
{ name: "东北", list: ["黑龙江省", "吉林省", "辽宁省"] },
{
name: "华东",
list: [
"山东省",
"江苏省",
"安徽省",
"江西省",
"浙江省",
"福建省",
"上海市",
"台湾省",
],
},
{ name: "华中", list: ["河南省", "湖北省", "湖南省"] },
{
name: "华南",
list: [
"广东省",
"广西壮族自治区",
"海南省",
"香港特别行政区",
"澳门特别行政区",
],
},
{
name: "西南",
list: ["重庆市", "四川省", "云南省", "西藏自治区", "贵州省"],
},
{
name: "西北",
list: [
"陕西省",
"甘肃省",
"青海省",
"宁夏回族自治区",
"新疆维吾尔自治区",
],
},
];
// nameList.forEach(element => {
// if(element.name==event.name){
// this.initArea(chinaJson, element.list, element.list);
// }
// });
for (let key in nameList) {
if (nameList[key].name == event.name) {
this.initArea(chinaJson, nameList[key].list, nameList[key].list);
}
}
}
// 大区 如西南地区
if (this.hierarchy == 2) {
let mapJson= require(`./mapJson/${event.name}.json`)
console.log(mapJson)
this.mapCharts.dispose()
echarts.registerMap("chinaJson", mapJson);
this.drawChinaMap("chinaMap");
}
// 省
if (this.hierarchy == 3) {
let mapJson= require(`./mapJson/guizhousheng/${event.name}.json`)
console.log(mapJson)
this.mapCharts.dispose()
echarts.registerMap("chinaJson", mapJson);
this.drawChinaMap("chinaMap");
}
this.hierarchy ++
// 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.5],
[121.28, 31.13],
[114.2, 30.32],
[113.15, 23.08],
[104.04, 30.39],
[103.49, 36.03],
],
},
};
this.mergeProvinces(chinaJson, params.names, params.properties);
},
},
//调用
created() {
this.repRegionStrategy();
// 注册地图
console.log(this.chinaDaquGeo);
// console.dir(JSON.stringify(this.chinaDaquGeo))
// echarts.registerMap("chinaJson", this.chinaDaquGeo); // 如果是js引入就不需要这一行了
echarts.registerMap("chinaJson", areaChina); // 如果是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>
1732
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
