<div class="lnMap" id="mapEcharts"></div>
export default {
data() {
return {
mapChart: "",
mapArr:[],
}
}
}
methods: {
//地图
InitMap() {
let that = this;
let name = "bj";
let uploadedDataURL = require("../../assets/LiaoNing.json");//地图json文件
let symbolImg = require("../../assets/images/big_img/tips.png");//坐标图片
that.mapChart = this.$echarts.init(document.getElementById("mapEcharts"));
that.$echarts.registerMap(name, uploadedDataURL);
let _data = [
{
name: "朝阳市",
value: 50
},
{
name: "葫芦岛市",
value: 24
},
{
name: "锦州市",
value: 35
},
{
name: "阜新市",
value: 30
},
{
name: "沈阳市",
value: 2
},
{
name: "铁岭市",
value: 38
},
{
name: "抚顺市",
value: 42
},
{
name: "本溪市",
value: 24
},
{
name: "辽阳市",
value: 35
},
{
name: "鞍山市",
value: 28
},
{
name: "盘锦市",
value: 38
},
{
name: "营口市",
value: 42
},
{
name: "大连市",
value: 244
},
{
name: "丹东市",
value: 35
}
];
let _dataArr= [
{
lat: 41.639961,
lng: 123.500847,
name: "沈阳市机场",
level: "district",
parent: "沈阳市机场"
},
{
lat: 41.091599,
lng: 121.123859,
name: "渤海大学",
level: "district",
parent: "渤海大学"
},
{
lat: 40.550448,
lng: 122.369126,
name: "营口蓝旗机场",
level: "district",
parent: "营口蓝旗机场"
},
{
lat: 40.192062,
lng: 120.106833,
name: "中国石油",
level: "district",
parent: "中国石油"
},
{
lat: 38.868255,
lng: 121.540198,
name: "沈阳万达集团",
level: "district",
parent: "沈阳万达集团"
},
{
lat: 41.862744,
lng: 123.341883,
name: "丁香湖",
level: "district",
parent: "丁香湖"
},
{
lat: 40.033594,
lng: 124.298884,
name: "丹东浪头机场",
level: "district",
parent: "丹东浪头机场"
},
{
lat: 42.380231,
lng: 123.944161,
name: "中国石化集团",
level: "district",
parent: "中国石化集团"
}
];
//let _dataArr = this.mapArr.map(res=>{
// return {
// lat: res.latitude,
// lng: res.longitude,
// name:res.entName,
// level: "district",
// parent:res.entName
// }
//})
const option = {
geo: {
map: "bj",
aspectScale: 0.75, //长宽比
zoom: 1.2,
roam: false,
itemStyle: {
normal: {
borderColor: "#2ab8ff",
// areaColor: "#fff",
shadowColor: "#0e4276",
borderWidth: 0, //设置外层边框
shadowOffsetX: 10,
shadowOffsetY: 10
}
}
},
tooltip: {
position: "top",
padding: [5, 10],
backgroundColor: "rgba(33,185,249,1)", //设置背景图片 rgba格式
formatter: function(params) {
// console.log(params);
return params.name;
}
},
visualMap: {
show: false,
min: 0,
max: 50,
left: "left",
top: "bottom",
text: ["高", "低"], // 文本，默认为数值文本
calculable: true,
inRange: {
color: [
"rgba(9, 31, 226, 0.6)",
"rgba(9, 31, 226, 0.7)",
"rgba(9, 31, 226, 0.8)",
"rgba(9, 31, 226, 0.9)",
"rgba(9, 31, 226, 1)"
]
},
textStyle: {
color: "#333"
// fontSize:"17px"
}
},
series: [
{
type: "map",
mapType: name,
showLegendSymbol: false,
label: {
normal: {
show: true,
color: "#fff" //地图上文字颜色
},
emphasis: {
textStyle: {
color: "#fff"
}
}
},
zoom: 1.2, //地图放大比列
itemStyle: {
normal: {
borderColor: "#bccdf5",
areaColor: "#fff"
},
emphasis: {
areaColor: "#21B9F9",
borderWidth: 0
}
},
data: _data
},
{
type: "effectScatter",
coordinateSystem: "geo",
showEffectOn: "render",
symbolSize: 10,
rippleEffect: {
period: 10,
scale: 3,
brushType: "fill"
},
hoverAnimation: false,
itemStyle: {
normal: {
color: "#fff",
shadowBlur: 5,
shadowColor: "#21b9f9"
}
},
data: _dataArr.map(item => {
return {
name: item.name,
value: [item.lng, item.lat]
};
})
},
..._dataArr.map((item, index) => {
return {
type: "scatter",
coordinateSystem: "geo",
//自定义图片的 位置（lng, lat）
data: [{ name: item.name, value: [item.lng, item.lat] }],
//自定义图片的 大小
symbolSize: [20, 25],
symbolOffset: [0, -10],
//自定义图片的 路径
symbol: "image://" + symbolImg
};
})
]
};
that.mapChart.setOption(option);
window.addEventListener("resize", () => {
that.mapChart.resize();
});
},
}
mounted() {
this.InitMap();
}
